ckeditor - 可编辑 block /区域只能来自小部件吗？

Question

对于我从事的项目，我们只需要在 CKEditor 4 中包含 block 。其中一些将是可编辑的，其中一些将不可编辑。概念的工作证明在 jsFiddle 中

工具栏中有两个按钮(不知道如何使它们可见)。一个插入不可编辑的 block ，第二个插入可编辑的 block 。

问题:如何确保用户不能在任何插入的 block 之外键入任何内容？

我试过 readOnly : false 希望可编辑 block “获胜”，但这种方法不起作用。

Answer 1

1. 为了显示这两个按钮，您需要下载 Ckeditor 并将图标复制到以下位置。根据ckeditor插件的默认配置，图标图片名称应该与插件名称相同，或者您可以设置图标的自定义路径。

   • ckeditor root/

     • 插件/
       • 不可编辑 block /
         • 图标/
           • nonEditableBlock.png

   • ckeditor root/

     • 插件/
       • 可编辑 block /
         • 图标/
           • editableBlock.png

2. 对于NOT able type anything outside 任何插入的 block ，我没有确切的解决方案。但我想给你一些建议。也许它会对你有所帮助。当Ckeditor的数据发生改变或者在Ckeditor中插入了一个新的block时，监听事件并删除一个数据，比如p,div,span等对你没有用的数据，除了nonEditableBlock和editableBlock类。

<script src="ckeditor/ckeditor.js"></script>

<textarea id="editor" name="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>


<script>
    // Some CSS for the widget to make it more visible.
    CKEDITOR.addCss('.nonEditableBlock { background: lightgreen; padding: 3px; color: black } ');
    CKEDITOR.addCss('.editableBlock { background: lightgray; padding: 3px; color: black } ');

    CKEDITOR.plugins.add('nonEditableBlock', {
        requires: 'widget',
        icons: 'nonEditableBlock',
        init: function (editor) {
            editor.widgets.add('nonEditableBlock', {
                button: 'Insert a nonEditableBlock',
                template:
                    '<div class="nonEditableBlock">' +
                    //'<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content1"><p>nonEditableBlock</p></div>' +
                    '</div>',
            });

            editor.on('afterCommandExec', function (event) {
                clearData()
            })

        },
    });
    CKEDITOR.plugins.add('editableBlock', {
        requires: 'widget',
        icons: 'editableBlock',

        init: function (editor) {
            editor.widgets.add('editableBlock', {
                button: 'Insert a editableBlock',
                template:
                    '<div class="editableBlock">' +
                    //'<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content">editableBlock</div>' +
                    '</div>',
                editables: {
                    content: {
                        selector: '.simplebox-content'
                    }
                },
            });

            editor.on('afterCommandExec', function (event) {
                clearData()
            })

        },
    });


    CKEDITOR.replace('editor', {
        // A clean-up in the toolbar to focus on essentials.
        //readOnly : false,
        toolbarGroups: [
            { name: 'document', groups: ['mode'] },
            //       { name: 'basicstyles' },
            { name: 'insert' }
        ],

        //      toolbar : [ { name: 'document', items: [ 'Source'] },
        //       { name: 'insert'},
        //       { name: 'editing', items: ['Undo', 'Redo', 'editableBlock' ]},
        //       ],    

        removeButtons: 'Image,Table,HorizontalRule,SpecialChar',
        removePlugins: 'exportpdf',
        extraPlugins: 'nonEditableBlock,editableBlock',
    });

    var editor = CKEDITOR.instances.editor

    editor.on('contentDom', function () {
        // console.log(CKEDITOR.instances.editor.getData())

        var editable = editor.editable();
        editable.attachListener(editor.document, 'click', function () {
            clearData()
        });
        editable.attachListener(editor.document, 'keyup', function () {
            clearData()
        });
        editable.attachListener(editor.document, 'afterCommandExec', function () {
            clearData()
        });
        // events continue ... 
    });

    function clearData() {
        // To remove html tags such as p, div, span except nonEditableBlock and editableBlock classes
    }
</script>