CKEditor 在样式中插入不可编辑的 HTML

Question

我目前正在将 CKEditor 移植到 concrete5 中。作为其中的一部分，concrete5 能够创建可以通过编辑器插入的 "Snippets"。开发人员能够定义这些小部件产生什么样的 HTML 输出，但在编辑模式下，它只显示一个占位符，其中包含以下内容 HTML:

'<span 
    class="ccm-content-editor-snippet" 
    contenteditable="false" 
    data-scsHandle="' + selectedSnippet.scsHandle + '"
>' + selectedSnippet.scsName +'</span>'

我研究了 CKEditor 小部件，但不一定想用大量按钮来激活此类功能来使我的工具栏混乱。我很好奇是否可以向 stylescombo 下拉菜单（或类似的下拉菜单）添加一些内容，然后插入像上面那样的片段。

目前我必须尝试做的事情可以在 https://github.com/ExchangeCore/Concrete5-CKEditor/blob/feature/magicstyles/assets/concrete5styles/plugin.js#L17-L30 找到这不太有效，因为我无法将 selectedSnippet.scsName 插入内部 HTML的风格。有没有什么方法可以做到这一点或其他更明显的方法来在 CKEditor 中实现这种插入功能而无需制作大量的工具栏按钮？

此外，该跨度的内容应该可以删除，但不可编辑。

Answer 1

使用此插件，您可以创建一个下拉列表以插入您想要的任何 HTML 块：http://ckeditor.com/addon/htmlbuttons

如果它不符合您的需要，请查看源代码并选择您缺少的部分。

CKEditor 在样式中插入不可编辑的 HTML

CKEditor Insert non editable HTML within style

javascript

ckeditor

concrete5

ckeditor4.x

concrete5-5.7