{"id":13394926,"url":"https://github.com/jhollingworth/bootstrap-wysihtml5","last_synced_at":"2025-10-22T21:09:48.612Z","repository":{"id":2770675,"uuid":"3769419","full_name":"jhollingworth/bootstrap-wysihtml5","owner":"jhollingworth","description":"Simple, beautiful wysiwyg editor","archived":false,"fork":false,"pushed_at":"2020-04-14T20:13:56.000Z","size":2007,"stargazers_count":4146,"open_issues_count":196,"forks_count":1014,"subscribers_count":174,"default_branch":"master","last_synced_at":"2024-05-21T08:09:56.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jhollingworth.github.com/bootstrap-wysihtml5/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhollingworth.png","metadata":{"files":{"readme":"readme.textile","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":"2012-03-19T22:26:50.000Z","updated_at":"2024-05-17T16:40:13.000Z","dependencies_parsed_at":"2022-08-30T16:11:25.059Z","dependency_job_id":null,"html_url":"https://github.com/jhollingworth/bootstrap-wysihtml5","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhollingworth%2Fbootstrap-wysihtml5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhollingworth%2Fbootstrap-wysihtml5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhollingworth%2Fbootstrap-wysihtml5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhollingworth%2Fbootstrap-wysihtml5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhollingworth","download_url":"https://codeload.github.com/jhollingworth/bootstrap-wysihtml5/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478236,"owners_count":20297217,"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","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":[],"created_at":"2024-07-30T17:01:36.355Z","updated_at":"2025-10-22T21:09:48.502Z","avatar_url":"https://github.com/jhollingworth.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Editors","Editors [🔝](#readme)","编辑器"],"sub_categories":["Runner","运行器","运行器e2e测试"],"readme":"**This repo is no longer maintained. \"bootstrap3-wysiwyg\":https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg is much better**\n\nh1. Overview\n\nBootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of \"wysihtml5\":https://github.com/xing/wysihtml5 and \"Twitter Bootstrap\":http://twitter.github.com/bootstrap/.\n\nh1. Examples\n\n* \"http://jhollingworth.github.com/bootstrap-wysihtml5\":http://jhollingworth.github.com/bootstrap-wysihtml5/\n\nh1. Quick Start\n\nIf you are using rails use the \"bootstrap-wysihtml5-rails gem\":http://rubygems.org/gems/bootstrap-wysihtml5-rails.\n\n\u003cpre\u003e\ngem install bootstrap-wysihtml5-rails\n\u003c/pre\u003e\n\nOtherwise, download \"the latest version of bootstrap-wysihtml5\":https://github.com/jhollingworth/bootstrap-wysihtml5/downloads.\n\nh2. Files to reference\n\n\u003cpre\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/css/bootstrap-wysihtml5.css\"\u003e\u003c/link\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/css/bootstrap.min.css\"\u003e\u003c/link\u003e\n\u003cscript src=\"js/wysihtml5-0.3.0.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jquery-1.7.2.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/bootstrap-wysihtml5.js\"\u003e\u003c/script\u003e\n\u003c/pre\u003e\n\nh2. Usage\n\n\u003cpre\u003e\n\u003ctextarea id=\"some-textarea\" placeholder=\"Enter text ...\"\u003e\u003c/textarea\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t$('#some-textarea').wysihtml5();\n\u003c/script\u003e\n\u003c/pre\u003e\n\nYou can get the html generated by getting the value of the text area, e.g. \n\n\u003cpre\u003e\n$('#some-textarea').val();\n\u003c/pre\u003e\n\nh1. Advanced\n\nh2. Options\n\nAn options object can be passed in to .wysihtml5() to configure the editor:\n\n\u003cpre\u003e\n$('#some-textarea').wysihtml5({someOption: 23, ...})\n\u003c/pre\u003e\n\nh3. Buttons\n\nTo override which buttons to show, set the appropriate flags:\n\n\u003cpre\u003e\n$('#some-textarea').wysihtml5({\n\t\"font-styles\": true, //Font styling, e.g. h1, h2, etc. Default true\n\t\"emphasis\": true, //Italics, bold, etc. Default true\n\t\"lists\": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true\n\t\"html\": false, //Button which allows you to edit the generated HTML. Default false\n\t\"link\": true, //Button to insert a link. Default true\n\t\"image\": true, //Button to insert an image. Default true,\n\t\"color\": false //Button to change color of font  \n});\n\u003c/pre\u003e\n\nh3. Custom Templates for Toolbar Buttons\n\nTo define custom templates for buttons, you can submit a customTemplates hash with the new definitions.  Each entry should be a function which expects 'locale' and optional 'options' to manage the translations.\n\nFor example, the default template used for the editHtml mode button looks like this (with size fetched from the optional 'options')\n\n\u003cpre\u003e\n\u003cli\u003e\n  \u003cdiv class='btn-group'\u003e\n    \u003ca class='btn\" + size + \"' data-wysihtml5-action='change_view' title='\" + locale.html.edit + \"'\u003e\u003ci class='icon-pencil'\u003e\u003c/i\u003e\u003c/a\u003e\"\n  \u003c/div\u003e\n\u003c/li\u003e\n\u003c/pre\u003e\n\nYou can change it to not use the pencil icon (for example) by defining the custom template like this:\n\n\u003cpre language='javascript'\u003e\nvar myCustomTemplates = {\n  html : function(locale) {\n    return \"\u003cli\u003e\" +\n           \"\u003cdiv class='btn-group'\u003e\" +\n           \"\u003ca class='btn' data-wysihtml5-action='change_view' title='\" + locale.html.edit + \"'\u003eHTML\u003c/a\u003e\" +\n           \"\u003c/div\u003e\" +\n           \"\u003c/li\u003e\";\n  }\n}\n\n// pass in your custom templates on init\n$('#some-textarea').wysihtml5({\n   customTemplates: myCustomTemplates\n});\n\u003c/pre\u003e\n\n\nThis will override only the toolbar template for html, and all others will use the default.\n\n\nh3. Stylesheets\n\nIt is possible to supply a number of stylesheets for inclusion in the editor `\u003ciframe\u003e`:\n\n\u003cpre\u003e\n$('#some-textarea').wysihtml5({\n\t\"stylesheets\": [\"/path/to/editor.css\"]\n});\n\u003c/pre\u003e\n\nh3. Events\n\nWysihtml5 exposes a \"number of events\":https://github.com/xing/wysihtml5/wiki/Events. You can hook into these events when initialising the editor:\n\n\u003cpre\u003e\n$('#some-textarea').wysihtml5({\n\t\"events\": {\n\t\t\"load\": function() { \n\t\t\tconsole.log(\"Loaded!\");\n\t\t},\n\t\t\"blur\": function() { \n\t\t\tconsole.log(\"Blured\");\n\t\t}\n\t}\n});\n\u003c/pre\u003e\n\nh3. Shallow copy by default, deep on request\n\nOptions you pass in will be added to the defaults via a shallow copy.  (see \"jQuery.extend()\":http://api.jquery.com/jQuery.extend/ for details). You can use a deep copy instead (which is probably what you want if you're adding tags or classes to parserRules) via 'deepExtend', as in the parserRules example below.\n\nh3. Parser Rules\n\nIf you find the editor is stripping out tags or attributes you need, then you'll want to extend (or replace) parserRules.  This example extends the defaults to allow the \u003ccode\u003e\u003cstrong\u003e\u003c/code\u003e and \u003ccode\u003e\u003cem\u003e\u003c/code\u003e tags, and the class \"middle\":\n\n\u003cpre\u003e\n$('#some-textarea').wysihtml5('deepExtend', {\n  parserRules: {\n    classes: {\n      \"middle\": 1\n    },\n    tags: {\n      strong: {},\n      em: {}\n    }\n  }\n});\n\u003c/pre\u003e\n\nThere's quite a bit that can be done with parserRules; see \"wysihtml5's advanced parser ruleset\":https://github.com/xing/wysihtml5/blob/master/parser_rules/advanced.js for details.  bootstrap-wysihtml5's default parserRules can be found \"in the source\":https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js (just search for 'parserRules' in the file).\n\nh3. Defaults\n\nYou can change bootstrap-wysihtml5's defaults by altering:\n\n\u003cpre\u003e\n$.fn.wysihtml5.defaultOptions\n\u003c/pre\u003e\n\nThis object has the same structure as the options object you pass in to .wysihtml5().  You can revert to the original defaults by calling:\n\n\u003cpre\u003e\n$(this).wysihtml5('resetDefaults') \n\u003c/pre\u003e \n\nOperations on the defaults are not thread-safe; if you're going to change the defaults, you probably want to do it only once, after you load the bootstrap-wysihtml plugin and before you start instantiating your editors.\n\nh2. The underlying wysihtml5 object\n\nYou can access the \"wysihtml5 editor object\":https://github.com/xing/wysihtml5 like this:\n\n\u003cpre\u003e\nvar wysihtml5Editor = $('#some-textarea').data(\"wysihtml5\").editor;\nwysihtml5Editor.composer.commands.exec(\"bold\");\n\u003c/pre\u003e\n\n\nh2. I18n\n\nYou can use Bootstrap-wysihtml5 in other languages. There are some translations available in the src/locales directory. You can include your desired one after the plugin and pass its key to the editor. Example:\n\n\u003cpre\u003e\n\u003cscript src=\"src/locales/bootstrap-wysihtml5.pt-BR.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  $('#some-textarea').wysihtml5({locale: \"pt-BR\"});\n\u003c/script\u003e\n\u003c/pre\u003e\n\nIt is possible to use custom translations as well. Just add a new key to $.fn.wysihtml5.locale before calling the editor constructor.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhollingworth%2Fbootstrap-wysihtml5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhollingworth%2Fbootstrap-wysihtml5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhollingworth%2Fbootstrap-wysihtml5/lists"}