CKEditor4 упоминает шаблон вывода, который не выводит всю шаблонную строку в редакторе wysiwyg и вставляется как новый тег <p>вместо встроенного - PullRequest
Новая
       158

CKEditor4 упоминает шаблон вывода, который не выводит всю шаблонную строку в редакторе wysiwyg и вставляется как новый тег <p>вместо встроенного

1 голос
/ 18 июня 2020

У меня несколько проблем с реализацией плагина Mentions в CKEditor4:

  1. outputTemplate работает не так, как ожидалось. <span class="tag is-delete"></span> из шаблона полностью опускается при вставке в редактор после выбора из раскрывающегося списка упоминаний.
  2. outputTemplate вставляется в отдельный тег <p> сам по себе, тогда как мне нужны теги быть встроенным.
    • Пример токового выхода: 
    <p>After looking into this issue, I can confirm</p> 
<p><a data-value="1" class="tags has-addons"><span class="tag is-info">John Doe</span></a></p>
<p>'s bug report is reproducible in all major production releases; therefore, further escalation is required.</p>
    • Пример ожидаемого / желаемого выхода: 
    <p>After looking into this issue, I can confirm <a data-value="1" class="tags has-addons"><span class="tag is-info">John Doe</span><span class="tag is-delete"></span></a>'s bug report is reproducible in all major production releases; therefore, further escalation is required.</p>

Мой соответствующий код

Точную конфигурацию CKEditor можно посмотреть здесь .
Я использую плагин Div Editing Area вместо iframe, поэтому что мой глобальный css ( Bulma ) используется для тегов внутри редактора wysiwyg. 

<div class="field">
    <p class="control" id="discussion-inputs">
        <textarea id="discussion-textarea" class="textarea" placeholder="Add a comment..." style="margin-top: 0px; margin-bottom: 0px; height: 128px;"></textarea>
    </p>
</div>

CKEDITOR.replace( document.querySelector( '#discussion-textarea' ), {
    allowedContent: true,
    mentions: [
        {
            marker: '@',
            minChars: 3,
            feed: "{{ url_for('api.user_list') }}",
            itemTemplate: '<li data-id="{id}" class="dropdown-item">{name}</li>',
            outputTemplate: '<a data-value="{id}" class="tags has-addons"><span class="tag is-info">{name}</span><span class="tag is-delete"></span></a>'
        }
    ]
});

Небольшой образец вывода, полученного от api.user_list конечной точки 

[
  {
    "email": "johnd@email.com", 
    "id": 1, 
    "name": "John Doe"
  }, 
  {
    "email": "janed@email.com", 
    "id": 2, 
    "name": "Jane Doe"
  }
]

Мои вопросы

  1. Как я могу сделать вывод всего outputTemplate без усечения или удаления каких-либо из предоставленных html тегов / классов?
  2. Как я могу убедиться, что теги вставлены встроенными, а не как отдельные новые теги <p>, чтобы в набранное сообщение не добавлялись ненужные разрывы строк?
  3. Бонус: Как я могу сделать так, чтобы тег упоминания после того, как он был правильно вставлен в область редактора, при нажатии удалялся вместо того, чтобы курсор помещался в то место текста, по которому щелкнули? Идея состоит в том, чтобы помешать пользователю изменить имя пользователя @ 'd на недопустимое.
...