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

Question

我目前正在将 CKEditor 移植到 concrete5 中。作为其中的一部分，concrete5 能够创建可以通过编辑器插入的“片段”。开发人员能够定义这些小部件产生什么样的 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 插入到样式的 innerHTML 中。有没有什么方法可以做到这一点或其他更明显的方法来在 CKEditor 中实现这种插入功能而无需制作大量的工具栏按钮？

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

Answer 1

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

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