WangEditor CKEditor migration before and after the effect comparison
The background,
The toolbar of wangEditor, a rich text editor, is shown
The rich text editor CKEditor4 toolbar is shown
There are problems with the wangEditor editor
1. Unfriendly size and font Settings
Customer service feedback Can not quickly find the function of setting the size and font through the toolbar icon
Different from many mainstream editors and Office software, the old editor does not support setting the font (or size) before entering the text, only select the target text first and then set the font (or size).
2. Later function expansion cannot be satisfied
2.1 Not using modular thinking to organize source code
All the code is in one file.
2.2 No event mechanism of its own
It is not easy to control the precedence of different callbacks to the same event or the cancellation of callback functions of the same type. For example, when extending paste scenarios, you may need to avoid compatibility with existing callbacks.
2.3 There is no control flow for the insertion process of editor content
The original data cannot be modified or filtered in the editor setData.
3. Advantages of migrating to CKEditor4
1. Smooth migration
CKEditor4 has built-in support for nesting edit areas in iframe, which is consistent with the style isolation requirements of the original project after the modification of the old editor.
2. The built-in plug-ins meet service scenarios
There are format brush plug-ins
The table plugin supports table adjustment through the right-click menu
3. Easy to expand
3.1 Built-in plug-in mechanism
Different business requirements can be written as separate plug-ins.
3.2 Built-in event mechanism
Can set the priority of event response, control the order of callback execution, intervene and adjust the default execution result.
3.3 Controlling getData and setData through configuration items
You can control the editor content and setup process by combining configuration items into different filters.
4. Comparison of effects before and after migration
1. Support format brush
2. The paste effect of the table is closer to the copy source style
Copy the source
WangEditor editor paste effect
CKEditor4 paste effect
3. Table adjustment is supported
Support for adjusting tables in the editor (not open yet)
4. Support to adjust picture layout and drag
WangEditor editor effect
CKEditor4 editor effect
