我正在按照此处的教程进行操作，使用版本 4.7.3:
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/widget_sdk_tutorial_1
起初我使用的是标准包，我手动安装了小部件插件，同时添加了它的依赖项，但没有添加依赖项的依赖项，因为我假设它们已经包含在 CKEditor 中。
当它卡住时，我开始怀疑我是否搞砸了下载插件，所以我下载了一个自定义构建，从标准包开始，包括小部件插件。据说这应该为我处理依赖关系。
所以我开始按照教程进行操作。
这是我的 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
最佳答案
您正处于本教程的中间部分，因此您尝试在编辑器内实现的解决方案并不完整。应该至少添加 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 。通常在方法文档中您可以找到一些简单的用法示例。
关于javascript - 当我尝试构建一个简单的小部件时，CKEditor 卡住了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46589062/