Возникли проблемы с отображением панели инструментов в редакторе WYSIHTML5?

Я пытаюсь использовать редактор Wysihtml5 в текстовой области на своем сайте. Если я использую значения по умолчанию и не указываю панель инструментов, я прекрасно получаю панель инструментов по умолчанию, но если я следую документации на веб-сайте wysihtml5, я не получаю никакой панели инструментов.

Моя пользовательская панель инструментов:

<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>

И мой скрипт, чтобы сделать текстовую область редактором wysihtml5:

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

Я создал jsfiddle того, что у меня есть. Я все еще не могу управлять панелью инструментов, как указано в инструкции.


javascript jquery wysihtml5
person John S    schedule 14.03.2015    source источник
comment
какой редактор wysihtml 5 вы используете, укажите, пожалуйста.   -  person Pushker Yadav    schedule 14.03.2015
comment
и создайте jsfiddle вашего кода, чтобы помочь   -  person Pushker Yadav    schedule 14.03.2015
comment
Я использую редактор wsyihtml5. xing.github.io/wysihtml5   -  person John S    schedule 14.03.2015
comment
Добавил ссылку на мой jsfiddle в верхнее сообщение.   -  person John S    schedule 17.03.2015

Ответы (2)


arrow_upward
1
arrow_downward

У меня точно такая же проблема, и я решил забавное решение. Перейдите сюда (http://xing.github.io/wysihtml5/), откройте исходный код страницы и получите оттуда css и код скрипта. Будьте осторожны при импорте css в javascript!

person Fation Hadri    schedule 14.03.2015
comment
Если у вас есть проблемы, скажите мне опубликовать весь код моего редактора! - person Fation Hadri; 14.03.2015
comment
да. вам нужно добавить файл css, как это было предложено Fation Hadri. Вот jsfiddle. jsfiddle.net/alaksandarjesus/jkyyabxn - person Alaksandar Jesus Gene; 14.03.2015
comment
Проблема с вашими примерами в том, что я использую это в сочетании с x-Editable. - person John S; 17.03.2015

arrow_upward
1
arrow_downward

Это было изменено, так как они выпустили обновление

теперь должно быть так

<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>
person Saeed Ansari    schedule 25.12.2015
comment
или используя ваш код, я думаю, ‹script› $(document).ready(function () { $('#Body').wysihtml5({ toolbar: { 'wysihtml5-toolbar': true, } }); }); ‹/скрипт› - person Saeed Ansari; 25.12.2015