CODEWITHSUNDEEP
javascriptjquerywysihtml5
John S
John S

Reputation: 8351

Having trouble getting my toolbar to show with the WYSIHTML5 editor?

I'm trying to use the Wysihtml5 editor on a textarea on my site. If I use the defaults and don't specify a toolbar I get the default toolbar just fine but if I follow the documentation on the wysihtml5 website I don't get any toolbar.

My custom toolbar:

<div id="wysihtml5-toolbar" style="display: none;">
      <header>
        <a data-wysihtml5-command="bold">bold</a>
        <a data-wysihtml5-command="italic">italic</a>
        <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
        <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
        <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>
      </header>
          <a data-wysihtml5-command="createLink">insert link</a>
           <div data-wysihtml5-dialog="createLink" style="display: none;">
           <label>
            Link:
           <input data-wysihtml5-dialog-field="href" value="http://" class="text">
           </label>
           <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
        </div>
 </div>


<textarea id='Body'></textarea>

And my script to make the textarea a wysihtml5 editor:

<script>
    $(document).ready(function () {
        $('#Body').wysihtml5({
            toolbar: 'wysihtml5-toolbar'
        });
    });
</script>

I've now created a jsfiddle of what I have setup. I still can not seem to control the toolbar as the instructions specify.

Upvotes: 0

Views: 1590

Answers (2)

Saeed Ansari
Saeed Ansari

Reputation: 465

It was changed since they released update

now it should be like 

<script>
    $(document).ready(function () {
        $('#Body').wysihtml5({
            toolbar: {

                    "font-styles": false, // Font styling, e.g. h1, h2, etc.
                    "emphasis": true, // Italics, bold, etc.
                    "lists": true, // (Un)ordered lists, e.g. Bullets, Numbers.
                    "html": false, // Button which allows you to edit the generated HTML.
                    "link": false, // Button to insert a link.
                    "image": false, // Button to insert an image.
                    "color": true, // Button to change color of font
                    "blockquote": true, // Blockquote
                    "indent": false,
                    "outdent": false,
            }  
        });
    });
</script>

Upvotes: 1

Fation Hadri
Fation Hadri

Reputation: 150

I have exactly the same problem and i solved in a funny solution. Go here(http://xing.github.io/wysihtml5/), open page source and get from there css and script code.Be careful when you import css in javascript!

Upvotes: 1

Related Questions