可编辑的块/区域只能来自小部件吗？

Answer 1

1. 为了显示这两个按钮，您需要下载 Ckeditor 并将您的图标复制到以下位置。

   • ckeditor 根目录/

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

   • ckeditor 根目录/

     • 插件/
       • 可编辑块/
         • 图标/
           • 可编辑块.png

2. 我没有确切的解决方案无法在外面输入任何内容任何插入的块。但我想为你提出一些想法。也许对你有帮助。当 Ckeditor 的数据发生变化或在 Ckeditor 中插入新块时，监听事件并删除除 nonEditableBlock 和 editableBlock 类之外对您无用的数据，例如 p、div、span 等。

   <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>