{"id":13500662,"url":"https://github.com/eissasoubhi/summernote-bricks","last_synced_at":"2025-09-14T17:47:56.906Z","repository":{"id":57374374,"uuid":"105773592","full_name":"eissasoubhi/summernote-bricks","owner":"eissasoubhi","description":"A Summernote module to add user-friendly components to the wysiwyg editor","archived":false,"fork":false,"pushed_at":"2022-12-08T18:14:15.000Z","size":17039,"stargazers_count":37,"open_issues_count":2,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-30T10:29:33.760Z","etag":null,"topics":["summernote","summernote-bricks","summernote-extension","summernote-module","summernote-plugins"],"latest_commit_sha":null,"homepage":"https://eissasoubhi.github.io/summernote-bricks/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eissasoubhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-04T13:44:39.000Z","updated_at":"2023-12-01T19:59:36.000Z","dependencies_parsed_at":"2023-01-25T15:30:17.896Z","dependency_job_id":null,"html_url":"https://github.com/eissasoubhi/summernote-bricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eissasoubhi/summernote-bricks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-bricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-bricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-bricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-bricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eissasoubhi","download_url":"https://codeload.github.com/eissasoubhi/summernote-bricks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-bricks/sbom","scorecard":{"id":370253,"data":{"date":"2025-08-11","repo":{"name":"github.com/eissasoubhi/summernote-bricks","commit":"a9bc002c2c368460ef518922b59b57579afc6cf4"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}}]},"last_synced_at":"2025-08-18T12:46:59.841Z","repository_id":57374374,"created_at":"2025-08-18T12:46:59.842Z","updated_at":"2025-08-18T12:46:59.842Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275143585,"owners_count":25413091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["summernote","summernote-bricks","summernote-extension","summernote-module","summernote-plugins"],"created_at":"2024-07-31T22:01:09.084Z","updated_at":"2025-09-14T17:47:56.842Z","avatar_url":"https://github.com/eissasoubhi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Plugins"],"sub_categories":["Insert"],"readme":"Summernote Bricks\n=================\n\n\nIntroduction\n----------\n\nSummernote bricks is a module of the Summernote plugin to add user-friendly components to the editor using bootstrap.\n\nSee the demo here https://eissasoubhi.github.io/summernote-bricks/  \n\nRequirements\n----------\n\n - npm\n - Modern browser that supports ECMAScript 6\n - Tested on Windows 10, Google Chrome Version 61 and Firefox 55.0.3 (64-bit) with summernote v0.8.2\n\n\nInstallation\n-------------\n\n**Using NPM**\n\n 1. `$ npm i summernote-bricks`\n 2. `$ cd node_modules/summernote-bricks`\n 3. `$ npm start`\n\nThen go to http://127.0.0.1:9090\n\n**Or using GitHub**\n\n 1. [Download/Clone](https://github.com/eissasoubhi/summernote-bricks) the repo from GitHub\n 2. `$ cd summernote-bricks`\n 3. `$ npm start`\n\nThen go to http://127.0.0.1:9090\n\nUsage\n=====\n\nAdd the required files :\n**The stylesheet files.**\n```HTML\n\u003clink href=\"node_modules/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"node_modules/summernote/dist/summernote.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"node_modules/font-awesome/css/font-awesome.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"dist/assets/editable-bloc.css\" rel=\"stylesheet\"\u003e\n```\n\n**Then Summernote tag.**\n```HTML\n\u003cdiv id=\"summernote\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n```\n**The script files.**\n```HTML\n\u003cscript src=\"node_modules/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/summernote/dist/summernote.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/summernote-extensions.dist.js\"\u003e\u003c/script\u003e\n```\n\u003ca name=\"initialization\"\u003e\u003c/a\u003e\n**Initialize [Summernote](https://github.com/summernote/summernote) with the bricks module.**\n```HTML\n \u003cscript\u003e\n\n     jQuery(document).ready(function($) {\n          $('#summernote').summernote({\n             toolbar: [\n                 ['insert', ['bricks']],\n                 ['font style', ['fontname', 'fontsize', 'color', 'bold', 'italic', 'underline',]],\n             ],\n             // bricks options\n\n             bricks: {\n                 gallery: {\n                     modal_body_file: \"php/gallery_dynamic_content.html\"\n                 },\n                 thumbnails: {\n                     modal_body_file: \"php/thumbnails_dynamic_content.html\"\n                 },\n             }\n\n         });\n     });\n\n \u003c/script\u003e\n```\n[See more details about Summernote installation and options.](https://github.com/summernote/summernote)\n\n\nOptions\n=======\n\nThe Summernote-bricks options can be passed with [the Summernote editor options with key \"bricks\".](#initialization) or you can put them inside the config file src/config/default.js\n\n\n| Option            | description                                                                                                                                                           | default                                                                       | type      | example                                                                   |\n|-----------------  |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |-----------------------------------------------------------------------------  |--------   |-------------------------------------------------------------------------  |\n|\u003ca name=\"lang_option\"\u003e\u003c/a\u003e modal_body_file   | instead of loading the content from a local HTML file, use this option to load the content from a URL.This option must be set for a specific brick inside an object.  | loads the default brick HTML file **dist/bricks_assets/[brick name]/html.html**   | String    | `thumbnails: {modal_body_file: \"php/thumbnails_dynamic_content.html\",},`     |\n|  lang              | Localization language in the file **src/config/langs.js**. The given value must be in that file as an object.                                                             | en                                                                            | String    | fr                                                                        |\n| bricks_assets     | The bricks folder path which contains the HTML and the style files.                                                                                                   | dist/bricks_assets                                                            | String    | dist/bricks_assets                                                        |\n\nTo retrieve the configuration values use the helper function :\n\n```javascript\nvar configs = _helpers.getConfig();\nvar current_lang = configs.lang; // en\n```\n\nCreating custom bricks\n======================\n\nRun `$ npm run watch` to set watchify to auto-generate the bundle file **/dist/summernote-extensions.dist.js**.\n\nTo Create a modalable brick (opens a modal on click) run `$ gulp brick --type modalable --name [brick name]`.\n\nTo Create a simple brick (inserts the content immediately to the editor without opening a modal) run `$ gulp brick --type simple --name [brick name]` or just `$ gulp brick --name [brick name]`. \n\nDisabling or removing a brick\n--------------------\n\nTo disable a brick, all you need to do is removing it or commenting it out from the the plugins array in the main js file  **src/summernote-extensions.js**\n\n```javascript\n var plugins = [\n     new H2(),\n     new Panel(),\n     // the Menu brick is disabled\n     // new Menu(),\n     new Gallery(),\n     new Thumbnails(),\n     new ContactForm(),\n     new Header()\n ];\n```\n\nSimple brick example\n--------------------\n\n    $ gulp brick --name header\n\nThe code above will create the following files :\n\n - src/classes/Header.class.js\n - dist/bricks_assets/header/html.html\n - dist/bricks_assets/header/style.html\n\nNext :\n\n 1. Require the **Header** class you just created in the file **src/utility/autoload.js**\n 2. Then go to the file **src/summernote-extensions.js** and add the same class to the **plugins** array : `new Header()`\n```javascript\n var plugins = [\n     new H2(),\n     new Panel(),\n     new Menu(),\n     new Gallery(),\n     new Thumbnails(),\n     new ContactForm(),\n     // Header added\n     new Header()\n ];\n```\n\n 3. Add the brick localization text in the file **src/config/langs.js**\n```javascript\n en: {\n\n    header:{\n        tooltip: \"Add a header\",\n        label: \"Header\",\n    },\n\n    panel:{\n    tooltip: \"Add a new panel with text\",\n    label: \"Panel\",\n },\n```\nTo edit the inserted HTML go to **dist/bricks_assets/header/html.html** file.\nTo edit the style of the inserted HTML go to **dist/bricks_assets/header/style.html** file.\n\nModalable brick example\n-----------------------\n\n    $ gulp brick --type modalable --name something\n\nThe code above will create the following files :\n\n - src/classes/Something.class.\n - dist/bricks_assets/something/modal.\n - dist/bricks_assets/something/modal_body.\n - dist/bricks_assets/something/modal_style.\n - dist/bricks_assets/something/html.\n - dist/bricks_assets/something/style.html\n\nNext :\n\n 1. Require the **Something** class you just created in the file\n    **src/utility/autoload**.\n 2. Then go to the file **src/summernote-extensions.js** and add the same\n        class to the **plugins** array : `new Something()`\n\n```javascript\n var plugins = [\n     new H2(),\n     new Panel(),\n     new Menu(),\n     new Gallery(),\n     new Thumbnails(),\n     new ContactForm(),\n     // Something added\n     new Something()\n ];\n```\n 3. Add the brick localization text in the file **src/config/langs.js**\n \n```javascript\n en: {\n\n     something:{\n         tooltip: \"Add something\",\n         label: \"Something\",\n     },\n\n     panel:{\n     tooltip: \"Add a new panel with text\",\n     label: \"Panel\",\n },\n```\n\nTo edit the inserted HTML go to **dist/bricks_assets/something/html.html file**.\n\nTo edit the style of the inserted HTML go to **dist/bricks_assets/something/style.html** file.\n\nTo edit the modal go to **dist/bricks_assets/something/modal.html** file.\n\nTo edit the modal body HTML go to **dist/bricks_assets/something/modal_body.html** file.\n\nTo edit the modal body style go to **dist/bricks_assets/something/modal_style.html** file.\n\nLocalization\n============\n\nAfter setting the [lang option](#lang_option) in the [initialization step](#initialization) you can customize the shown text for every brick in the file **src/config/langs.js** .\n\nYou may retrieve lines from language file using the _helpers.lang() helper function. The lang() method accepts the key of the translation string as its first argument with the dot notation. For example, let's retrieve the menu tooltip translation string from the **src/config/langs.js** file\n\n```javascript \n_helpers.lang('menu.tooltip');\n```\n\nFor example if the chosen language is *en* the lang() function expects the langs file to have something like this :\n\n```javascript\n// src/config/langs.js\n\nen: {\n\n    menu:{\n        tooltip: \"Add a new menu\",\n    },\n\n    ...\n\n```\n\nif it doesn't find the requested translation it returns the key prefixed with the language. Example:  \n*en.menu.tooltip*\n\nLicense\n=======\n\n\n----------\nThe contents of this repository is licensed under [The MIT License](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feissasoubhi%2Fsummernote-bricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feissasoubhi%2Fsummernote-bricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feissasoubhi%2Fsummernote-bricks/lists"}