我希望能够从所见即所得模式切换到纯HTML模式,例如插入一个包含YouTube视频的IFrame。目前标准的CKEditor 5构建版本中没有关于如何实现这一点的文档。
是否有相当于CKEditor 5的Source Editing Area插件的替代方案?
我希望能够从所见即所得模式切换到纯HTML模式,例如插入一个包含YouTube视频的IFrame。目前标准的CKEditor 5构建版本中没有关于如何实现这一点的文档。
是否有相当于CKEditor 5的Source Editing Area插件的替代方案?
是的,可以在CKEditor5中插入HTML:
insertHTML(html:string) {
// See: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content
const viewFragment = this.editor.data.processor.toView( html );
const modelFragment = this.editor.data.toModel( viewFragment );
this.editor.model.insertContent(modelFragment);
}
您的问题涉及两个复杂的主题:
它们已经在CKEditor 5的GitHub上的"View Source" mode和"How to preserve markup and not have it removed"票据中进行了讨论,但我会在此快速解释它们。
不完全有意义。对于懂得HTML并且能够可靠地手动编辑它的一小群人来说,这是有意义的,但那么为什么还要使用所谓的所见即所得编辑器呢?
你可以说,这不是问题吗?只有高级用户才会编辑HTML。其他人将使用所见即所得模式。但是,另一组问题出现了。你刚刚将任意HTML插入编辑器,现在其他用户尝试在所见即所得模式下编辑它。但由于这是编辑器不理解的HTML(因为没有处理它的功能),有很大的机会随着时间的推移被破坏。那些HTML块可能会被拆分、加粗、包装、不正确地复制和粘贴等等。你可以说源代码模式再次证明是有用的,因为由于缺乏适当的UI来编辑该块,你需要手动修复它。但等等——难道不是所有这些混乱的原因都是人们讨厌所谓的所见即所得编辑器吗?
让我们通过比喻来看待这个问题。富文本编辑器只是一个编辑某些数据的接口(在这种情况下是HTML格式)。同样,CMS是一个编辑数据库的接口。那么你会直接给普通用户访问你的数据库吗?你会通过mysqladamin
手动添加产品到你的数据库吗?我认为不会。这既不方便,也不安全,普通用户也无法理解。不可以。我在这里引用自己的话:
CKEditor 5采用自定义数据模型。为向该模型加载数据,您需要针对要支持编辑器的每个内容块创建视图->模型转换器。然后,您需要模型->视图转换器来使此内容可编辑(它需要在编辑器中呈现以进行编辑)。最后,您需要配置模式并有时自定义某些功能,例如Enter,以便它们知道将其加载到编辑器中的内容的含义以及如何修改它。builtinPlugins
的一部分,请确保同时拥有HtmlEmbed
和SourceEditing
- 只在您的defaultToolbar
中包含SourceEditing
现在,当您想要编写100%未修改的HTML时,可以这样做,但必须在以下div内完成:<div class="raw-html-embed">
<span class="something">nested</span>
<custom>Even this tag will stay intact</custom>
</div>
额外信息:
我不得不通过直接从CKEditor github下载SourceEditor源代码来拼凑SourceEditing插件。我单独构建了它,然后在扩展CKE5并添加插件/自定义工具栏的地方进行了导入。
如果您想知道如何在Ckeditor5中插入HTML/查看源代码插件,请按照以下步骤操作:
创建自己的Ckeditor5构建。 前往Ckeditor在线构建器。
选择你想要的插件和工具栏
按照所有步骤并下载构建文件夹
像这样在您的网页中包含。
src="./ckeditor5-34.1.0-to6amocvzyre/build/ckeditor.js"
初始化Ckeditor
ClassicEditor
.create( document.querySelector( '#post-editor' ), {
licenseKey: '',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: to6amocvzyre-ms4eax6uq5yt' );
console.error( error );
} );
更多信息请查看示例文件夹中的index.html