CKEditor:插件按钮不会出现

时间:2017-07-25 20:24:16

标签: javascript ckeditor

使用最新的CKEditor,我试图添加他们的示例插件," timestamp"来自文档。我从他们提供的链接下载了Github的所有代码,并将所有内容放在适当的位置。

文档:http://docs.ckeditor.com/#!/guide/plugin_sdk_sample github链接:https://github.com/ckeditor/ckeditor-docs-samples/tree/master/tutorial-timestamp

ckeditor/plugins/timestamp/plugin.js
ckeditor/plugins/timestamp/icons/timestamp.png
ckeditor/plugins/timestamp/samples/timestamp.html

在config.js文件中,我输入了这一行:

config.extraPlugins = 'timestamp';

我关闭了浏览器,使用了我几个月没用过的其他浏览器等,无论如何,按钮图标都不会出现。

我已经用Google搜索了这个,并在StackOverflow上阅读了几个问题。许多人谈到了错误的图标或丢失的图标或其他什么,但这一次,它都在那里,而且它完全与Github一样。

一旦这样做,我可以尝试从旧的CKEditor v4.0安装移动一些插件。谢谢!

1 个答案:

答案 0 :(得分:0)

您还需要将插件添加到ckeditor.replace。这是一个简单的例子。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1', {
                    extraPlugins: 'timestamp'
                }  );
            </script>
        </form>
    </body>
</html>

config.js文件。

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing'] },
        { name: 'forms', groups: [ 'forms' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph', 'timestamp'] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ];
    config.extraPlugins = 'timestamp';
    config.allowedContent = true;
};