常见问题 - 构建文档 - ckeditor5中文文档

为什么编辑器会过滤掉我的内容（样式，类，元素）？ config.allowedContent = true在哪里？

不像CKEditor 4, CKEditor 5实现了自定义数据模型。这意味着加载到编辑器中的每个内容都需要转换为该模型，然后再渲染回视图。

每种内容都必须由某些功能处理。 例如，ckeditor5-basic-styles包处理HTML元素，例如<b>，<i>，<u>等，以及它们在模型中的表示。 该功能定义了HTML（视图）和编辑器模型之间的双向转换。

如果你加载某些编辑器功能未知的内容，它将被删除。 如果你希望支持所有HTML5元素，则需要编写插件来支持它们。 一旦你这样做，CKEditor 5将不会过滤任何东西。

如何打开源代码模式？ 如何编写源代码模式插件？

由于编辑器中使用的自定义数据模型，源代码模式在CKEditor 5中没有意义。CKEditor 5是内容编辑器，而不是页面构建器，除非某些编辑器功能（插件）支持某种特定类型的HTML（或任何其他输入格式），否则将不被接受为内容。

有关的详细信息，请参阅github上的问题。

contents.css文件发生了什么？我该如何修改编辑器内容的样式？

没有contents.css文件这样的东西，因为在CKEditor 5中有一些功能带来了他们自己的内容样式，这些内容样式默认包含在JavaScript构建中并由样式加载器加载（它们也可以被提取）。 它优化了构建的大小，因为简单地排除了未使用的功能的样式。

虽然功能提供了一些样式，但是开发人员可以确保CKEditor 5创建的内容在前端和后端都具有正确的样式。 要在编辑器（后端）中设置内容样式，请使用.ck-content CSS类：

.ck-content a {

    color: teal;

}

我下载的构建版本缺少一些特性，我该如何添加他们？

请查阅安装插件指南来学习如何使用附加功能来扩展编辑器。

你也可以查看功能索引来知道哪些功能是可用的。

editor.insertHtml()和editor.insertText()方法在哪里？如何去插入一些内容？

由于CKEditor 5使用自定义数据模型，因此无论何时要插入任何内容，都应首先修改模型，然后将其转换回用户输入其内容的视图（称为可编辑）。 在CKEditor 5中，HTML只是众多可能的输出格式之一。 您可以在专用指南中了解有关更改模型的更多信息。

要在当前位置插入新链接，请使用以下代码段：

editor.model.change( writer => {

const insertPosition = editor.model.document.selection.getFirstPosition();

writer.insertText( 'CKEditor 5 rocks!', { linkHref: 'https://ckeditor.com/' }, insertPosition );

} );

如果是插入纯文本内容，你可以使用略短的一段代码：

editor.model.change( writer => {

writer.insertText( 'Plain text', editor.model.document.selection.getFirstPosition() );

} );

您可能已经注意到链接在编辑器模型中表示为具有属性的文本。 请参阅模型编写器的API学习可帮助您修改编辑器模型的其他有用方法。

要插入一些较长的HTML代码，您可以先将其解析为模型片段，然后将其插入编辑器模型中：

const content = '<p>A paragraph with <a href="https://ckeditor.com">some link</a>.';

const viewFragment = editor.data.processor.toView( content );

const modelFragment = editor.data.toModel( viewFragment );

editor.model.insertContent( modelFragment );

全局变量window.CKEDITOR有什么变化？如何列出编辑器的所有实例？

默认情况下，CKEditor 5没有编辑器实例的全局注册表。 但如有必要，可以轻松实现此功能，如此Stack Overflow问答中所述。

如何开启图片拖放和上传？我应该从哪里开始？

默认情况下，在所有编辑器构建中启用图像和图像上载功能。 但是，要在安装CKEditor 5时完全启用图像上传，你需要配置一个可用的上传适配器（Easy Image或CKFinder适配器）或实现并使用您自己的上传适配器。

查阅图片和图片上传功能指南来了解更多信息。

如何在一些框架中使用CKEditor 5（例如Angular，React）？

有关官方集成的完整列表，请参阅“官方集成”部分。

如果您所选择的框架的官方集成尚不存在，请务必阅读“将CKEditor 5与JavaScript框架集成”指南。 CKEditor 5提供了丰富的JavaScript API和随时可用的构建，使您可以在任何需要的框架中使用CKEditor 5。

随着时间推移，我们会逐渐提供更多的官方集成。 我们非常欢迎你对我们下一步应该做些什么进行反馈！

如何获取一个全功能的编辑器构建版本（就像CKEditor 4的“Full Package”）？

我们相信每个编辑器都应该服务于它的目的。 包含未使用的功能毫无意义，因为它们会增加编辑器的大小并使网站变得更重。 这就是为什么我们不提供类似于我们在CKEditor 4中提供的完整编辑器包的原因。

同时，我们建议您安装插件以启用其他功能，甚至创建自定义版本以确保您充分利用CKEditor 5。

如何自定义CKEditor 5的图标？

最简单的方式是使用webpack的NormalModuleReplacementPlugin插件。例如，替换加粗图标，在你的webpack.config.js中添加下面的代码：

...

plugins: [

new webpack.NormalModuleReplacementPlugin(

        /bold\.svg/,

        '/absolute/path/to/my/icon.svg'

    )

]

你还可以使用相对于导入bold.svg的资源（本方案中的BoldUI类文件）的相对路径。

了解更多信息请参考使用webpack构建CKEditor 5。

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476859

文章版权归作者所有，转载请保留此声明。