Создание дополнительной кнопки только с функциональностью абзаца в Jodit WYSIWYG HTML Editor - PullRequest
Новая
       15

Создание дополнительной кнопки только с функциональностью абзаца в Jodit WYSIWYG HTML Editor

0 голосов
/ 02 октября 2018

Я работаю над небольшим CMS-приложением и использую редактор Jodit (v3) в качестве редактора WYSIWYG html.Это в основном потому, что я рендерил в текущем тексте с помощью EJS, а другие редакторы не хотели корректно отображать эту информацию в других редакторах WYSIWYG (CKEditor, TinyMCE, Quill).Для этого проекта Jodit был установлен и настроен через npm и grunt.

У меня проблемы с созданием дополнительной кнопки с функцией форматирования текущего выделения в абзаце.Редактор поставляется с функциональностью «параграфа», но этот выпадающий список включает заголовки и опцию форматирования кавычек, которую я не хочу, чтобы пользователь имел (на данный момент).У дополнительной кнопки в этом примере еще нет значка, но вы все еще можете нажать кнопку рядом с текущей опцией «абзаца».

Редактор Jodit (v3): https://xdsoft.net/jodit/doc/

Методы редактора Jodit: https://xdsoft.net/jodit/doc/methods/

Соответствующий HTML: (примечание: я визуализирую текст в редакторе с использованием EJS, как обычно, но я полагаю, что этого примера информации будет достаточно) 

<textarea name="value" class="form-control" id="html-editor"><h1>Testing</h1><p>Lorem ipsum ....</p></textarea>

Соответствующий JS: 

var editor = new Jodit('#html-editor', {
      buttons: ['bold','italic', 'paragraph'],
      extraButtons: [{
        name: 'OnlyParagraph',
        icon: '',
        exec: (editor) => {
          var selection = editor.selection;
          var text = editor.selection.getHTML();
          console.log(text);
          var html = '<p>' + text + '</p>'
          console.log(html);
          editor.selection.remove();
          editor.selection.insertHTML(html);
        }
      }]
    });

По сути, я хочу иметь возможность выбрать элемент

и превратить его в абзац.Если это нелегко выполнить с помощью дополнительных кнопок, можно ли адаптировать раскрывающееся по умолчанию значение кнопки «абзац», чтобы предлагать только вариант форматирования абзаца (ни один из вариантов заголовка или цитаты не требуется в данный момент).

Спасибо за ваше время и помощь заранее.

1 Ответ

0 голосов
/ 02 октября 2018

Это отговорка, но с использованием этого CSS: 

.jodit_toolbar_btn-h1,
.jodit_toolbar_btn-h2,
.jodit_toolbar_btn-h3,
.jodit_toolbar_btn-h4,
.jodit_toolbar_btn-blockquote {
    display: none !important;
}

Скрыть все, кроме кнопки "Нормальный" для раскрывающегося списка абзаца.

...