内置于GrapesJS编辑器中的内联CKeditor [英] Inline CKeditor integrated in GrapesJS editor

问题描述

我正在使用实现GrapesJS的编辑器应用程序.它的编辑器和功能运行正常.我已经将内联CKeditor集成到GrapesJS编辑器中，几乎没有问题.

1. 显示了多个内联编辑选项
2. 有时编辑器选项的位置不正确
3. 主要问题:内联选项正在显示，但未反映在所选文本中.我的意思是我们可以单击那些内联选项来设置编辑器内容的格式，但不会反映在编辑器中.

我在这里分享一些编写的代码:

  const editor = grapesjs.init({容器:#gjs"，fromElement:1高度:"100％"，storageManager:{类型:0}，插件:['gjs-plugin-ckeditor']});editor.setCustomRte({启用:功能(el，rte){//如果已经存在，只需关注如果(rte){this.focus(el，rte);//稍后实施返回rte;}//CKEditor初始化rte = CKEDITOR.inline(el，{//您的配置...工具栏:[{名称:'styles'，项目:['Font'，'FontSize']}，["Bold"，"Italic"，"Underline"，"Strike"]，{name:'paragraph'，items:['NumberedList'，'BulletedList']}，{name:'links'，项目:['Link'，'Unlink']}，{name:'colors'，items:['TextColor'，'BGColor']}，]，uiColor:'#9AB8F3'，//内联编辑器颜色startupFocus:是的，extraAllowedContent:'*(*); * {*}'，//允许任何类和任何内联样式allowedContent:true，//禁用自动格式设置，类删除等.enterMode:CKEDITOR.ENTER_BR，//extraPlugins:"sharedspace，justify，colorbutton，panelbutton，font"，//sharedSpaces:{//顶部:editor.RichTextEditor.getToolbarEl()，//}});this.focus(el，rte);//稍后实施返回rte;}，focus(el，rte){//如果已经聚焦，则不执行任何操作if(rte& rte.focusManager.hasFocus){返回;}el.contentEditable = true;&&rte.focus();}，禁用(el，rte){el.contentEditable = false;如果(rte& rte.focusManager)rte.focusManager.blur(true);}}); 

这是

解决方案

如您所见，我没有收到SO的任何回复.我也在Github上报告了此问题，在那里我看到了类似问题的回应.几天后，我得到了回应对我来说很好.因此，我希望与大家分享该回复，这可能对像我这样的其他人有所帮助.

我的第一个问题:显示了多个内联编辑选项

特别说明:删除 editor.setCustomRte 块后，我遇到了另一个问题-这是我第一个问题的解决方法.看起来像:

  ckeditor.js:270未捕获的错误:[CKEDITOR.resourceManager.load]资源名称"sharedspace"在"https://cdn.ckeditor.com/4.14.1/standard/plugins/sharedspace/plugin.js?t=K5H9"中找不到.在CKEDITOR.resourceManager中.(ckeditor.js:270)在e(ckeditor.js:265)在Array.x(ckeditor.js:265)在w(ckeditor.js:265)在HTMLScriptElement.CKEDITOR.env.ie.e.$.onerror(ckeditor.js:266) 

如果任何人遇到类似的错误，请注意这是由于所使用的CKEditor类型/版本.我使用的是

随便添加

CKEditor内联自定义工具栏选项>

更新:CKEditor内联标准版所有版本仅适用于少数HTML标记行< div> ，< p> ，< h1> -< h6> .此内联编辑器不会弹出 strong ， i ， span 等元素.这是JSFiddle where you can check the working & code.

Version:

grapesjs - 0.16.18

ckeditor - standard - 4.14.1

What is the expected behavior?

While applying the inline formatting options from inline CKeditor options, it should reflect in the selected text.

Describe the bug detailed:

I have integrated the CKeditor in the grapesJS editor for inline editing purposes. Currently, when I select text to format it, the inline CKeditor options are displaying along with another few options in a black toolbar. I'm confused about that. And the main issue is that even I use any of the inline formatting options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..

What is the current behavior?

The main issue is that even I use any of the inline options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..

解决方案

As you see I do not get any response from SO. I have also reported this issue in Github where I have seen responses of similar issues. After a few days, I got a response & that worked fine for me. So I wish to share that response with you all, which might be helpful for someone else like me.

My first issue: Multiple inline edit options are showing

The GrapesJS CKEditor plugin already registers CKEditor as a custom RTE, so calling editor.setCustomRte is actually setting it up twice.

I have removed the editor.setCustomRte block & it worked fine. If you want to provide CKEditor options, this should be done at the pluginsOpts level as shown here.

Here is my second issue: Sometimes the editor options are not positioned properly

This was also fixed after removing the editor.setCustomRte block.

And, the last & main issue I faced while integration: Inline formatting not reflecting in the selected text

The GrapesJS CKEditor plugin is dependent on the Standard-All CKEditor version, not using the Standard CKEditor version. Use https://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js it will fix.

Here is a working fiddle which you can refer for Inline CKEditor integration with GrapesJS

An extra note: I have faced another issue after removing editor.setCustomRte block - which was the fix of my first issue. It looks like:

ckeditor.js:270 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "sharedspace" was not found at "https://cdn.ckeditor.com/4.14.1/standard/plugins/sharedspace/plugin.js?t=K5H9".
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:270)
    at e (ckeditor.js:265)
    at Array.x (ckeditor.js:265)
    at w (ckeditor.js:265)
    at HTMLScriptElement.CKEDITOR.env.ie.e.$.onerror (ckeditor.js:266)

If any of you facing a similar error, note that it's because of the CKEditor type/version that you are using. I was using the Standard CKEditor version & that was the issue. After changing that to Standard-All CKEditor version, the issue was resolved.

Grapedrop is a site where you can create an account and check almost all properties of the GrapesJS.

Here is extra plugin list used in CKEditor:

dialogui,dialog,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,
notification,button,toolbar,clipboard,panelbutton,panel,floatpanel,
colorbutton,colordialog,templates,menu,contextmenu,copyformatting,div,
resize,elementspath,enterkey,entities,exportpdf,popup,filetools,
filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,
forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,
indentblock,indentlist,smiley,justify,menubutton,language,link,list,
liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastetools,
pastefromgdocs,pastefromword,preview,print,removeformat,save,selectall,
showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,
tabletools,tableselection,undo,lineutils,widgetselection,widget,
notificationaggregator,uploadwidget,uploadimage,wsc

CKEditor Inline custom toolbar option adding as your wish

Update: CKEditor Inline standard-all version works only with few HTML tags line <div>, <p>, <h1>-<h6>. This inline editor not popping up for elements like strong, i, span, etc. Here is a solution to the above-mentioned issue.

这篇关于内置于GrapesJS编辑器中的内联CKeditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！