在 CKEditor5 中更改视图架构的优雅方式

Question

I'm looking for a way to change the view schema/tags used by CKE5 while trying not to reimplement everything. So basically the question is what is the best way to change for example the <strong> element to <b> in the editor.

My current solution is to change the *editing.js file, and the base plugin file to include the modified Editing plugin instead of the original. This works nicely, however, I'm wondering if there is a way to reduce the number of lines of code needed to accomplish this task.

So my solution currently looks like this:

newbold.js :

static get requires() {
    return [ NewBoldEditing, BoldUI ];
}

and newboldediting.js :

editor.conversion.attributeToElement({
    model: 'bold',
    view: 'b'
});

Is there a better way of doing this (that preferably wouldn't involve reimplementing this many classes)?

Answer 1

You could provide only a very simple plugin that overwrites the default bold attribute conversion.

class BoldToB extends Plugin {
    init() {
        this.editor.conversion.attributeToElement( {
            model: 'bold',
            view: 'b',
            converterPriority: 'high'
        } );
    }
}

Here's a fiddle for you to test: https://jsfiddle.net/u3zyw67v/

Note that in the fiddle I don't have access to Plugin class so I had to add constructor() . You don't need to do that if you extend Plugin class.