时间戳

首页 > 解决方案 > CKEditor4 提到输出模板未在所见即所得编辑器中输出整个模板化字符串并作为新插入

标签而不是内联

ckeditor - CKEditor4 提到输出模板未在所见即所得编辑器中输出整个模板化字符串并作为新插入

标签而不是内联

问题描述

我在 CKEditor4 中实现Mentions 插件时遇到了一些问题：

  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 ) 用于所见即所得编辑器内的标签。

<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 用户名修改为无效的用户名。

标签： ckeditorckeditor4.x

解决方案

推荐阅读