当我尝试构建一个简单的小部件时,CKEditor就会冻结

时间:2017-10-05 15:10:14

标签: javascript ckeditor

我在这里使用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

1 个答案:

答案 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。通常在方法文档中,您可以找到一些使用它的简单示例。