我在这里使用4.7.3版本的教程:
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/widget_sdk_tutorial_1
起初我使用的是标准软件包,我手动安装了widget插件,并添加了它的依赖项,但没有依赖项的依赖项,因为我认为它们已经包含在CKEditor中。
当它冻结时,我开始怀疑我是否搞砸了下载插件,所以我下载了一个自定义版本,从标准软件包开始并包含widget插件。据说这应该照顾我的依赖。
所以我开始关注教程。
这是我的HTML:
<html>
<head></head>
<body>
<h1>Headline</h1>
<p id="paragraph" contentEditable>This is the body of the article.</p>
<script src="./ckeditor/ckeditor.js"></script>
<script src="./index.js"></script>
</body>
我的index.js
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline("paragraph",{
extraPlugins:'simplebox'
});
以下是ckeditor/plugins/simplebox/plugin.js
的插件代码:
CKEDITOR.plugins.add( 'simplebox', {
requires: 'widget',
icons: 'simplebox',
init: function( editor ) {
editor.widgets.add( 'simplebox', {
button: 'Create a simple box',
template:"<h1>What's going on</h1>"
} );
}
} );
当我激活编辑器时,图标会成功显示在工具栏中,但是当我按下它时,浏览器就会冻结。我的错误在哪里?
以下是我工作的链接:https://www.dropbox.com/s/thw4yxt23jlzq49/ckeditor-widget.zip?dl=0
答案 0 :(得分:1)
您正处于本教程的中间,因此您尝试在编辑器中实现的解决方案并不完整。应该添加至少upcast
方法,该方法将定义元素成为窗口小部件的条件。这似乎是您的示例不能正常运行的主要原因。
您可以在此处查看整个教程的解决方法:https://github.com/ckeditor/ckeditor-docs-samples/blob/master/tutorial-simplebox-1/simplebox/plugin.js
从文档中检查小部件描述可能会有所帮助:https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.widget。通常在方法文档中,您可以找到一些使用它的简单示例。