All geek questions in one place

Customize WYSIHTML5 Toolbar

How do you customize the toolbar in WYSIHTML5 . I want to disable the font size buttons and image insert buttons, especially for the version of WYSIHTML5 used in Bootstrap X-editable.

+6
source share
3 answers

If you use bootstrap-wysiwyg / bootstrap3-wysiwyg (which, for example, is used by gem bootstrap-wysihtml5-rails ), starting from version 3.0, you will need to attach it to the toolbar:

$('#some-textarea').wysihtml5({ toolbar: { "font-styles": true, // Font styling, eg h1, h2, etc. "emphasis": true, // Italics, bold, etc. "lists": true, // (Un)ordered lists, eg Bullets, Numbers. "html": false, // Button which allows you to edit the generated HTML. "link": true, // Button to insert a link. "image": true, // Button to insert an image. "color": false, // Button to change color of font "blockquote": true, // Blockquote "size": <buttonsize> // options are xs, sm, lg } });
+13
source

You can disable the toolbar options using the launch options:

 $('#[YOUR INPUT ID]').wysihtml5({ "font-styles": false, //Font styling, eg h1, h2, etc. "emphasis": true, //Italics, bold, etc. "lists": true, //(Un)ordered lists, eg Bullets, Numbers. "html": true, //Button which allows you to edit the generated HTML. "link": true, //Button to insert a link. "image": false, //Button to insert an image. "color": true //Button to change color of font });

This information should be inserted in the tag:

 <head> <script> HERE </scrip> </head>
+12
source

You can do it through CSS

 ul.wysihtml5-toolbar li a[title="Insert image"] { display: none; } ul.wysihtml5-toolbar li.dropdown { display: none; }
+3
source

Source: https://habr.com/ru/post/951989/

More articles:


All Articles