替换ckeditor内容并添加撤消历史记录条目 [英] Replace ckeditor content and add undo history entry

问题描述

我有一个基本的功能需要实现，而找不到有关该操作方法的信息:我只是想用自定义标记替换所有CKEditor的内容，并添加一个撤消历史记录条目，因此您可以返回到版本.

1. 因此，替换内容的基本命令是 editor.setData ，但不会添加撤消历史记录，将调用包装在 editor.model.change 中的条目会赢得也不要改变行为.

2. 然后，在文档的深处有关于如何向编辑器添加(但不替换)自定义html的信息，该编辑器将添加撤消历史记录条目:

     this.editor.model.change((writer)=> {const html ='< p> aaa< p> ul> li" huu< li> li" zzzz</li>/ul< p> ssss</p>'const viewFragment = this.editor.data.processor.toView(html);const modelFragment = this.editor.data.toModel(viewFragment);this.editor.model.insertContent(modelFragment);this.editor.model.insertContent(modelFragment);this.editor.editing.view.scrollToTheSelection();}); 

那么我如何替换编辑器的内容并添加撤消历史记录条目?我只能满足其中一项要求.

解决方案

下面是一个示例，其中

I have a basic functionality I need to implement and can't find the information on how to do it: I simply want to replace all of CKEditor's content with custom markup and add an undo history entry so you can go back to the version before replacing.

1. So the basic command for replacing the content is editor.setData but it won't add an undo history, entry wrapping the call in editor.model.change won't change the behavior too.

2. Then there is somewhere deep in the documentationthe information on how to add (but not replace) custom html to the editor which is adding an undo history entry:

   this.editor.model.change((writer) => {
         const html = '<p>aaa</p><ul><li>huu</li><li>zzzz</li></ul><p>ssss</p>'
         const viewFragment = this.editor.data.processor.toView(html);
         const modelFragment = this.editor.data.toModel(viewFragment);
         this.editor.model.insertContent(modelFragment);
         this.editor.model.insertContent(modelFragment);
         this.editor.editing.view.scrollToTheSelection();
   });
   

So how do I replace the content of the editor and add an undo history entry? I can only achieve one of the requirements but not both.

解决方案

Here's an example that selects all the text first and then inserts custom text:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class Replace extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'Replace', locale => {
            const replaceButtonView = new ButtonView( locale );

            replaceButtonView.set( {
                label: 'Replace',
                withText: true,
            });

            replaceButtonView.on( 'execute', () => {
                editor.execute('selectAll');
                const html = '<p>aaa</p><ul><li>huu</li><li>zzzz</li></ul><p>ssss</p>';
                const viewFragment = editor.data.processor.toView(html);
                const modelFragment = editor.data.toModel(viewFragment);
                editor.model.insertContent(modelFragment);
                editor.editing.view.scrollToTheSelection();
            });

            return replaceButtonView;
        } );
    }
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Undo, Replace ],
        toolbar: [ 'undo', 'Replace' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

Live:

这篇关于替换ckeditor内容并添加撤消历史记录条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！