Javascript CKEditor：如何在预览中以不同方式显示代码块

我想创建一个用户可以在编辑器中插入的元素。 困难的部分是，它需要以不同于其来源的方式显示。 例如，我希望用户在预览部分中插入以下内容：

二十三

在源代码部分，它应该如下所示：

<span class="tagSpecialClass">{{birthYear}}</span> 

{{出生年份}

主要目的是以一种用户可以避免编写的方式显示mustache标记，而只需从自动插入正确html并预览的工具栏中插入它们

我的问题是我对CKEditor的理解，以及为了实现这样一个插件我需要阅读的术语

如何强制CKEditor以不同方式解析/编译/预览特定标记

---

如果我的问题太笼统，请告诉我

这听起来像是（）的工作

请看下面的示例（）。它将给你一些基本的想法如何使用小部件来解决你的问题。如果您遵循，您将知道如何在小部件中实现可编辑部分并启用对话框编辑，这也可能会有所帮助

// Some CSS for the widget to make it more visible.
CKEDITOR.addCss( '.tagSpecialClass { background: green; padding: 3px; color: #fff } ' );

CKEDITOR.replace( 'editor', {
    // A clean-up in the toolbar to focus on essentials.
    toolbarGroups: [ 
        { name: 'document', groups: [ 'mode' ] },
        { name: 'basicstyles' },
        { name: 'insert' }
    ],
    removeButtons: 'Image,Table,HorizontalRule,SpecialChar',
    extraPlugins: 'widget',
    on: {
        pluginsLoaded: function() {
            var editor = this;

            // Define a new widget. This should be done in a separate plugin
            // to keep things clear and maintainable.
            editor.widgets.add( 'sampleWidget', {
                // This will be inserted into the editor if the button is clicked.
                template: '<span class="tagSpecialClass">23</span>',

                // A rule for ACF, which permits span.tagSpecialClass in this editor.
                allowedContent: 'span(tagSpecialClass)',

                // When editor is initialized, this function will be called
                // for every single element. If element matches, it will be
                // upcasted as a "sampleWidget".
                upcast: function( el ) {
                    return el.name == 'span' && el.hasClass( 'tagSpecialClass' );
                },

                // This is what happens with existing widget, when
                // editor data is returned (called editor.getData() or viewing source).
                downcast: function( el ) {
                    el.setHtml( '{{birthYear}}' );
                },

                // This could be done in upcast. But let's do it here
                // to show that there's init function, which, unlike
                // upcast, works on real DOM elements.
                init: function() {
                    this.element.setHtml( '23' );
                }
            } );

            // Just a button to show that "sampleWidget" 
            // becomes a command.
            editor.ui.addButton && editor.ui.addButton( 'SampleWidget', {
                label: 'Some label',
                command: 'sampleWidget',
                toolbar: 'insert,0'
            } );            
        }
    }
} );

//为小部件添加一些CSS以使其更可见。
addCss（'.tagSpecialClass{背景：绿色；填充：3px；颜色：#fff}'）；
CKEDITOR.replace（'editor'{
//工具栏中的一个清理，重点放在基本要素上。
工具栏组：[
{name:'document'，组：['mode']}，
{name:'basicstyles'}，
{name:'插入'}
],
移除按钮：“图像、表格、水平规则、特殊字符”，
extraPlugins:'widget'，
关于：{
pluginsload:function（）{
var编辑器=这个；
//定义一个新的小部件。这应该在一个单独的插件中完成
//保持事物的清晰性和可维护性。
add（'sampleWidget'{
//如果单击该按钮，则会将其插入编辑器中。
模板：“23”，
//ACF的规则，允许在此编辑器中使用span.tagSpecialClass。
allowedContent:“span（tagSpecialClass）”，
//初始化编辑器时，将调用此函数
//对于每个元素。如果元素匹配，则
//升级为“sampleWidget”。
上行：功能（el）{
返回el.name=='span'&&el.hasClass（'tagSpecialClass'）；
},
//这就是现有小部件在以下情况下发生的情况：
//返回编辑器数据（称为editor.getData（）或查看源）。
下行：功能（el）{
el.setHtml（{{birthYear}}'）；
},
//这可以在向上投射中完成，但让我们在这里完成
//显示有init函数，与
//upcast，适用于真实的DOM元素。
init:function（）{
this.element.setHtml（'23'）；
}
} );
//只需一个按钮来显示“sampleWidget”
//成为一个命令。
editor.ui.addButton&&editor.ui.addButton（'SampleWidget'{
标签：“一些标签”，
命令：“sampleWidget”，
工具栏：“插入，0”
} );            
}
}
} );

HTML

一些文本

还有一个小部件{{生日}

一些文本{{生日}}

---

快乐编码

现在已经有了一个插件，它基本上完成了你想要的东西。看这张照片。它不进行文本替换，但向您展示了创建标记的基本思想。

<textarea id="editor">
    <p>Some text.</p>
    <p>And there's the widget <span class="tagSpecialClass">{{birthYear}}</span></p>
    <p>Some text <span class="tagSpecialClass">{{birthYear}}</span>.</p>
</textarea>