Question

我尝试将balloonpanel插件集成到我的编辑器中。

我使用文档中的代码。

editor.on( 'instanceReady', function() {
 var toolbar = new CKEDITOR.ui.balloonToolbar( editor );

 toolbar.addItems( {
    link: new CKEDITOR.ui.button( {
        command: 'link'
    } ),
    unlink: new CKEDITOR.ui.button( {
        command: 'unlink'
    } )
 } );

 editor.on( 'selectionChange', function( evt ) {
    var lastElement = evt.data.path.lastElement;

    if ( lastElement ) {
        toolbar.attach( lastElement );
    }
 } );
} );

但是，当我点击编辑器时，它会给出以下错误信息。

以下提供了文档链接

Balloonpanel Docs Link

我不知道这意味着什么。

更新:(附加代码）

我的原始代码看起来像这样，

<body>
    <textarea id="editor1"></textarea>
    <script>
        CKEDITOR.replace('editor1', {
        toolbarGroups: [{
            name: 'basicstyles'
        }, {
            name: 'authorgroup'
        }],
        removePlugins: 'indent,indentblock,indentlist,list,removeformat,table,tabletools,entities,menu,find,font,iframe,pagebreak,flash,print,preview,save,smiley,pastetext,crossreference,youtube,footnotes,dragdrop,basket,horizontalrule,indentlist,image,format,selectall,specialchar,spellchecker,pastefromword,showblocks,link,unlink,anchor,copyformatting',
        extraPlugins: 'indentmodify,indentblockmodify,indentlistmodify,listmodify,removeformatmodified,table1,tabletools1,entitiesmodified,menumodified,findmodified,stylesheetparser,characterStyle,zoom,eventhandler,navigate,comment,symbol,notification,authorproff,proffpara,Newcitation,customfootnotes,floatingmenu,pubsearch,balloontoolbar,balloonpanel,autocorrect' 
        });    


        //My instanceReady Code Goes Here

        </script>
</body>

Answer 1

我使用新的CKEditor实例检查了此代码示例，它工作正常。您给我们的信息太少，无法得到任何可靠的答案。

要运行此示例没有错误或奇怪的行为，您应该在CKEditor配置中包含wysiwygarea,toolbar,link,balloontoolbar个插件。如果您需要帮助，请访问Setting CKEditor configuration。

如果它没有解决您的问题，请向我们展示一些代码或尝试以最少的配置重现问题。

Codepen工作样本。

我必须提到它无法按预期工作，因为我们在选择balloonpanel时存在一些问题。您可以在github

上找到有关该问题实际状态的更多信息

如何将Balloonpanel插件集成到我的编辑器中？

1 个答案: