Javascript 使用编辑器5中的文本创建不可编辑的块

如何在CKEditor 5中创建包含文本的不可编辑块

我需要在最终视图中生成以下内容：

<div>Non editable message here</div>

---

根据文档

isReadOnly:Boolean

将其设置为true。

您可以为此创建：

import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Widget, /* ... other plugins ... */ ],
        toolbar: [ 'undo', 'redo' ]
    } )
    .then( editor => {
        window.editor = editor;

        const model = editor.model;

        model.schema.register( 'myWidget', {
            inheritAllFrom: '$block',
            isObject: true
        } );

        editor.conversion.for( 'dataDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    return writer.createContainerElement( 'div', { class: 'widget' } );
                }
            } ) );

        editor.conversion.for( 'editingDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    const div = writer.createContainerElement( 'div', { class: 'widget' } );

                    return toWidget( div, writer, { label: 'widget label' } );
                }
            } ) );

        editor.conversion.for( 'upcast' )
            .add( upcastElementToElement( {
                view: {
                    name: 'div',
                    class: 'widget'
                },
                model: 'myWidget'
            } ) );

        editor.setData(
            '<p>foobar</p>' +
            '<div class="widget">Non editable text goes here</div>' +
            '<p>foobar</p>'
        );
    } )
    .catch( err => {
        console.error( err.stack );
    } );

从“@ckeditor/ckeditor5 Widget/src/Widget”导入Widget；
从“@ckeditor/ckeditor5 widget/src/utils”导入{toWidget}；
从“@ckeditor/ckeditor5 engine/src/conversion/downcast converters”导入{downcastlementtoelement}”；
从“@ckeditor/ckeditor5 engine/src/conversion/upcast converters”导入{upcastlementtoelement}”；
分类编辑器
.create（document.querySelector（“#editor”）{
插件：[要点，段落，小部件，/*…其他插件…*/]，
工具栏：[“撤消”、“重做”]
} )
.然后（编辑=>{
window.editor=编辑器；
const model=editor.model；
model.schema.register（'myWidget'{
inheritAllFrom:“$block”，
isObject:对
} );
for（'dataDowncast'）
.add（downcastElementToElement（{
模型：“myWidget”，
视图：（modelItem，writer）=>{
返回writer.createContainerElement（'div'，{class:'widget'}）；
}
} ) );
editor.conversion.for（'editingDowncast'）
.add（downcastElementToElement（{
模型：“myWidget”，
视图：（modelItem，writer）=>{
const div=writer.createContainerElement（'div'，{class:'widget'}）；
返回到widget（div，writer，{label:'widget label'}）；
}
} ) );
editor.conversion.for（'upcast'）
.add（UpCastlementToElement（{
视图：{
姓名：'div'，
类：“小部件”
},
模型：“myWidget”
} ) );
editor.setData(
“foobar
”+
'此处显示不可编辑的文本'+
“foobar
”
);
} )
.catch（错误=>{
console.error（err.stack）；
} );

关键的一点是在将图元向下投射到编辑视图时使用该函数。此外，该元素应在中标记为对象

---

另外，别忘了加载

小部件
插件，它打开了对小部件的支持。
几乎可以正常工作。我无法通过单击将光标放在那里，因此看起来我无法编辑它。但是，如果我将光标移动到可编辑区域的开头，然后将其向左移动，然后按backspace按钮，则整个文本将被删除。在Firefox 61.0.1中，我可以将光标设置在foobar文本的中心，然后使用向上键将光标向上移动到不可编辑文本的末尾。我仍然无法编辑它，但我可以使用退格删除它。但它对于我的用例来说已经足够好了，所以谢谢。使它不可删除比使它不可编辑更重要。有几十种方法可以删除内容，所以这并不容易。但如果你能单独问一个问题，我很乐意试一试。CKEditor 5的不同之处在于，后期修复程序应该使它变得非常可行和可靠。在哪里可以找到在CKEditor 5中创建小部件的指南？我想把我的项目移到这个版本，一切都取决于小部件的功能。然而，我所能找到的只是零星的代码，而不是任何明确的指南或大型代码示例。任何帮助都将不胜感激。
import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Widget, /* ... other plugins ... */ ],
        toolbar: [ 'undo', 'redo' ]
    } )
    .then( editor => {
        window.editor = editor;

        const model = editor.model;

        model.schema.register( 'myWidget', {
            inheritAllFrom: '$block',
            isObject: true
        } );

        editor.conversion.for( 'dataDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    return writer.createContainerElement( 'div', { class: 'widget' } );
                }
            } ) );

        editor.conversion.for( 'editingDowncast' )
            .add( downcastElementToElement( {
                model: 'myWidget',
                view: ( modelItem, writer ) => {
                    const div = writer.createContainerElement( 'div', { class: 'widget' } );

                    return toWidget( div, writer, { label: 'widget label' } );
                }
            } ) );

        editor.conversion.for( 'upcast' )
            .add( upcastElementToElement( {
                view: {
                    name: 'div',
                    class: 'widget'
                },
                model: 'myWidget'
            } ) );

        editor.setData(
            '<p>foobar</p>' +
            '<div class="widget">Non editable text goes here</div>' +
            '<p>foobar</p>'
        );
    } )
    .catch( err => {
        console.error( err.stack );
    } );