英文:
How to show custom HTML element in CKEditor5?
问题
我们正在升级一个使用CKEditor4的传统系统到CKEditor5。在编辑器的内容中，包含类似以下的内容：
<whatsapp>
This is pretext for whatsapp
</whatsapp>
我们希望在编辑器正文中显示整个内容，包括 <whatsapp> 和 </whatsapp>。
这在CKEditor4中工作正常，但在CKEditor5中显示为空白。
下面是使用的CKEditor5配置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
#container {
width: 1000px;
margin: 20px auto;
}
.ck-editor__editable[role="textbox"] {
/* 编辑区域 */
min-height: 200px;
}
.ck-content .image {
/* 块级图片 */
max-width: 80%;
margin: 20px auto;
}
</style>
<div id="container">
<div id="editor">
</div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/ckeditor.js"></script>
<script>
CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
toolbar: {
items: [
'sourceEditing'
],
shouldNotGroupWhenFull: true
},
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
},
removePlugins: [
'CKBox',
'CKFinder',
'EasyImage',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'WProofreader',
'MathType'
]
}).then(editor => {
let mydata = '<div>hello world</div><whatsapp>hi whatsapp</whatsapp><wechat>hey wechat</wechat><div>bye world</div>';
editor.setData(mydata)
});
</script>
</body>
</html>
英文:
We are upgrading a legacy system that uses CKEditor4 to CKEditor5. In one of the editor's content, it contains something like this:
<whatsapp>
This is pretext for whatsapp
</whatsapp>
We would like to show the entire content, including the <whatsapp> and </whatsapp> in the editor body.
This works fine in CKEditor4 but is displayed as blank in CKEditor5.
The CKEditor5 config used is shown below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
#container {
width: 1000px;
margin: 20px auto;
}
.ck-editor__editable[role="textbox"] {
/* editing area */
min-height: 200px;
}
.ck-content .image {
/* block images */
max-width: 80%;
margin: 20px auto;
}
</style>
<div id="container">
<div id="editor">
</div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/ckeditor.js"></script>
<script>
CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
toolbar: {
items: [
'sourceEditing'
],
shouldNotGroupWhenFull: true
},
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
},
removePlugins: [
'CKBox',
'CKFinder',
'EasyImage',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'WProofreader',
'MathType'
]
}).then(editor => {
let mydata = '<div>hello world</div><whatsapp>hi whatsapp</whatsapp><wechat>hey wechat</wechat><div>bye world</div>';
editor.setData(mydata)
});
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
- 有两种方法可以实现这一点。
- 通过插件创建向上转型和向下转型转换。
- 使用 通用 HTML 支持。
要创建自定义插件，您需要通过 npm 和 webpack 构建编辑器。以下是一个非常简单的示例，说明如何实现这一点：
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class WhatsappPlugin extends Plugin {
static elementName = 'whatsapp';
init() {
registerSchemaAndConversion(this.editor, WhatsappPlugin.elementName);
}
}
function registerSchemaAndConversion(editor, elementName) {
if (!editor.model.schema.isRegistered(elementName)) {
editor.model.schema.register(elementName, {
inheritAllFrom: '$block',
});
}
editor.conversion.for('downcast').elementToElement({
model: elementName,
view: elementName,
});
editor.conversion.for('upcast').elementToElement({
view: {
name: elementName,
},
model: elementName,
converterPriority: 'low',
});
}
class Editor extends ClassicEditor {}
Editor.defaultConfig = {
plugins: [WhatsappPlugin, ...Editor.builtinPlugins],
}
export default Editor;
英文:
There're two ways to achieve this.
- Creates the upcast and downcast conversion via Plugin
- Uses the general HTML support
To create custom plugin, you will need to build the editor via the npm and webpack. Below shows a very simple example how this can be achieved
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class WhatsappPlugin extends Plugin {
static elementName = 'whatsapp';
init() {
registerSchemaAndConversion(this.editor, WhatsappPlugin.elementName);
}
}
function registerSchemaAndConversion(editor, elementName) {
if (!editor.model.schema.isRegistered(elementName)) {
editor.model.schema.register(elementName, {
inheritAllFrom: '$block',
});
}
editor.conversion.for('downcast').elementToElement({
model: elementName,
view: elementName,
});
editor.conversion.for('upcast').elementToElement({
view: {
name: elementName,
},
model: elementName,
converterPriority: 'low',
});
}
class Editor extends ClassicEditor {}
Editor.defaultConfig = {
plugins: [WhatsappPlugin, ...Editor.builtinPlugins],
}
export default Editor;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论