首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ckeditor自动完成插件不工作

ckeditor自动完成插件不工作
EN

Stack Overflow用户
提问于 2015-09-14 11:05:57
回答 1查看 1.2K关注 0票数 1

我是使用navalgandhi插件http://navalgandhi1989.github.io/ckeditor-autocomplete-suggestions-plugin/来获得自动完成在ckeditor,但当输入这个,得到的折叠错误,请帮助。

代码语言:javascript
运行
复制
Uncaught TypeError: Cannot read property 'execCommand' of undefined ckeditor

但在当地,它的运动是正确的。

ckeditor/config.js

代码语言:javascript
运行
复制
/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];


    config.extraPlugins = 'autocomplete';


    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';
    config.fullpage=true;

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

};

ckeditor/index.js

代码语言:javascript
运行
复制
var Index = {

    suggestions : [],

    init : function()
    {
        Index.bindEvents();
        //$('#getNewSuggestionsButton1').click();
               // Index.getSuggestionsFromServer('data/suggestions1.json');
                Index.getSuggestionsFromServer('notification/loadSuggestions');
        Index.initCkEditor();
    },

    bindEvents : function()
    {
        $('#getNewSuggestionsButton1').on('click', function()
        {
            Index.getSuggestionsFromServer('data/suggestions1.json');
        });

        $('#getNewSuggestionsButton2').on('click', function()
        {
            Index.getSuggestionsFromServer('data/suggestions2.json');
        });
    },

    initCkEditor : function()
    {
        //Here "CKEDITOR.SHIFT + 51" is the key combination for '#'
        $('textarea#ckeditorBox').ckeditor({ suggestionsTriggerKey: { keyCode: CKEDITOR.SHIFT + 51 }});
        CKEDITOR.on( 'instanceReady', function( evt ) {
            //Here 'Index.suggestions' is the Array which is holding the current list of suggestions
            CKEDITOR.instances.ckeditorBox.execCommand('reloadSuggetionBox',Index.suggestions);
        });
    },

    getSuggestionsFromServer : function(url)
    {
        Index.suggestions = [];
        Index.ajaxCall(url,'',Index.getSuggestionsFromServerCallback);
    },

    getSuggestionsFromServerCallback : function(response)
    {

        var sugggestions = response.sugggestions;

        $.each(sugggestions, function(index,sugggestion)
        {
            Index.suggestions.push({
                            "id" : sugggestion.id,
                            "label" : sugggestion.label
                        });
        });
        CKEDITOR.instances.ckeditorBox.execCommand('reloadSuggetionBox',Index.suggestions);
    },

    ajaxCall : function(urlForAjax,dataForAjax,successCallBack)
    {
               $.getJSON('/notification/loadSuggestions')
                        .done(function (resp) { console.log(resp);
                            successCallBack(resp);
                        })
    }   
}

ckeditor/plugins/autocomplete/plugin.js

代码语言:javascript
运行
复制
CKEDITOR.plugins.add('autocomplete',
            {
                init : function(editor) {

                     var autocompleteCommand = editor.addCommand('autocomplete', {
                        exec : function(editor) {
                              var dummyElement = editor.document
                                    .createElement('span');
                            editor.insertElement(dummyElement);

                            var x = 0;
                            var y = 0;

                            var obj = dummyElement.$;

                            while (obj.offsetParent) {
                                x += obj.offsetLeft;
                                y += obj.offsetTop;
                                obj = obj.offsetParent;
                            }
                            x += obj.offsetLeft;
                            y += obj.offsetTop;

                            dummyElement.remove();
                          editor.contextMenu.show(editor.document
                                    .getBody(), null, x, y);
                        }
                    });
                },
                afterInit : function(editor) {
                    editor.on('key', function(evt) {
                        if (evt.data.keyCode == CKEDITOR.SHIFT + 51) {
                            editor.execCommand('autocomplete');
                        }
                    });
                    var firstExecution = true;
                    var dataElement = {};

                     editor.addCommand('reloadSuggetionBox', {
                            exec : function(editor) {
                                if (editor.contextMenu) {
                                    dataElement = {};
                                    editor.addMenuGroup('suggestionBoxGroup');
                            var Suggestions = ['google', 'facebook', 'github', 'microsoft', 'yahoo'];
                            $.each(Suggestions,function(i, suggestion)
                            {
                                    var suggestionBoxItem = "suggestionBoxItem"+ i; 
                                    dataElement[suggestionBoxItem] = CKEDITOR.TRISTATE_OFF;
                                    editor.addMenuItem(suggestionBoxItem,
                                                                        {
                                        id : suggestion.id,
                                        label : suggestion.label,
                                        group : 'suggestionBoxGroup',
                                        icon  : null,
                                        onClick : function() {
                                            var data = editor.getData();
                                            var selection = editor.getSelection();
                                            var element = selection.getStartElement();
                                            var ranges = selection.getRanges();
                                            ranges[0].setStart(element.getFirst(), 0);
                                            ranges[0].setEnd(element.getFirst(),0);
                                            editor.insertHtml(this.id + ' ');
                                            },
                                            });
                                    });

                                    if(firstExecution == true)
                                        {
                                            editor.contextMenu.addListener(function(element) {
                                                return dataElement;
                                            });
                                        firstExecution = false;
                                        }
                                }
                            }
                     });

                    delete editor._.menuItems.paste;
                },
            });
EN

回答 1

Stack Overflow用户

发布于 2016-01-13 04:10:21

因为console.log(CKEDITOR.instances)不包含名为"ckeditorBox“的实例

执行此console.log(CKEDITOR.instances)操作,并以这种方式获取编辑器的id

它可能是editor1

( CKEDITOR.instances.ckeditorBox.execCommand('reloadSuggetionBox',Index.suggestions);

应改为

( CKEDITOR.instances.editor1.execCommand('reloadSuggetionBox',Index.suggestions);或CKEDITOR.instances'editorId'execCommand('reloadSuggetionBox',Index.suggestions);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32563232

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档