如何限制我自己的元素仅包含纯文本?

时间:2018-10-30 21:23:55

标签: javascript ckeditor5

如何创建只能包含纯文本的块元素? (没有粗体,斜体等)。

我已经将元素注册为:

model.schema.register(mtHeaderLine, {
   // Changing inheritAllFrom to '$block' creates an editable element
   // but then it can contain bold text.
   inheritAllFrom: '$text',  
   allowIn: mtHeaderDiv,
   isBlock: true
});

然后我垂头丧气:

editor.conversion.for('downcast').add(downcastElementToElement( { model: mtHeaderLine, view: 'div' }

但这会创建一个我无法编辑的元素。

我也尝试过沮丧:

view: (modelElement, viewWriter ) => { 
    const viewElement=viewWriter.createEditableElement('div',{ 'class': (mtHeaderLine) ,isghost: isGhost });
    return viewElement;
}

但是那也没有给我一个可编辑的元素。

1 个答案:

答案 0 :(得分:2)

您需要使用Schema#addAttributeCheck()。该方法允许您注册一个回调,该回调在某些情况下将禁止$text上的所有属性(例如,模型<plaintext>元素的子代):

function MyPlugin( editor ) {
    editor.model.schema.register( 'plaintext', {
        inheritAllFrom: '$block'
    } );

    editor.model.schema.addAttributeCheck( ( ctx, attrName ) => {
        if ( ctx.endsWith( 'plaintext $text' ) ) {
            return false;
        }
    } );

    editor.conversion.elementToElement( {
        model: 'plaintext',
        view: 'div'
    } );
}

ClassicEditor
    .create( document.getElementById( 'editor' ), {
        plugins: [ ...ClassicEditor.builtinPlugins, MyPlugin ]
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( error => {
        console.error( error );
    } );

演示:https://jsfiddle.net/rvas7pLn/1/