Question

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

23

在源部分，它应该像这样显示：

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

主要目的是以用户可以避免编写它们的方式显示胡须标记，只需从工具栏中插入它们即可自动插入正确的html和预览。

我的问题是我对CKEditor的理解以及我需要阅读的关于它们的术语以实现这样的插件。

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

如果我的问题过于通用，请告诉我！

Answer 1

这听起来像是CKEditor widgets（demos）的工作！

请查看以下示例（JSFiddle）。它将为您提供一些基本知识，了解如何使用小部件来解决您的问题。如果您关注this official tutorial，您就会知道如何在窗口小部件中实现可编辑的部分，并使用对话框进行编辑，这也可能会有所帮助。

// 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'
            } );            
        }
    }
} );

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>

快乐的编码！

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

1 个答案: