GrapesJS 편집기에 통합 된 인라인 CKeditor
GrapesJS가 구현 된 편집기 응용 프로그램에서 일하고 있습니다. 편집기와 기능이 잘 작동합니다. 인라인 CKeditor를 GrapesJS 편집기에 통합했으며 문제가 거의 없습니다.
- 여러 인라인 편집 옵션이 표시됩니다.
- 때때로 편집기 옵션이 제대로 배치되지 않습니다.
- 주요 문제 : 인라인 옵션이 표시되지만 선택한 텍스트에 반영되지 않습니다 . 인라인 옵션을 클릭하여 편집기 내용의 형식을 지정할 수 있지만 편집기에는 반영되지 않습니다.
여기에 작성된 몇 가지 코드를 공유하고 있습니다.
const editor = grapesjs.init({
container: '#gjs',
fromElement: 1,
height: '100%',
storageManager: { type: 0 },
plugins: ['gjs-plugin-ckeditor']
});
editor.setCustomRte({
enable: function(el, rte) {
// If already exists just focus
if (rte) {
this.focus(el, rte); // implemented later
return rte;
}
// CKEditor initialization
rte = CKEDITOR.inline(el, {
// Your configurations...
toolbar: [
{ name: 'styles', items: ['Font', 'FontSize' ] },
['Bold', 'Italic', 'Underline', 'Strike'],
{name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
{name: 'links', items: ['Link', 'Unlink']},
{name: 'colors', items: [ 'TextColor', 'BGColor' ]},
],
uiColor: '#9AB8F3', // Inline editor color
startupFocus: true,
extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
allowedContent: true, // Disable auto-formatting, class removing, etc.
enterMode: CKEDITOR.ENTER_BR,
// extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
// sharedSpaces: {
// top: editor.RichTextEditor.getToolbarEl(),
// }
});
this.focus(el, rte); // implemented later
return rte;
},
focus(el, rte) {
// Do nothing if already focused
if (rte && rte.focusManager.hasFocus) {
return;
}
el.contentEditable = true;
rte && rte.focus();
},
disable(el, rte) {
el.contentEditable = false;
if (rte && rte.focusManager)
rte.focusManager.blur(true);
}
});
다음은 JSFiddle 은 작업 및 코드를 확인할 수 있습니다.
버전:
grapesjs-0.16.18
ckeditor-표준-4.14.1
예상되는 동작은 무엇입니까?
인라인 CKeditor 옵션에서 인라인 서식 옵션을 적용하는 동안 선택한 텍스트에 반영되어야합니다.
버그를 자세히 설명하세요.
인라인 편집 목적으로 grapesJS 편집기에 CKeditor를 통합했습니다. 현재 서식을 지정할 텍스트를 선택하면 인라인 CKeditor 옵션이 검은 색 도구 모음에 다른 몇 가지 옵션과 함께 표시됩니다. 나는 그것에 대해 혼란 스럽습니다. 그리고 주요 문제는 인라인 서식 옵션을 사용하더라도 서식이 선택한 텍스트에 반영되지 않는다는 것입니다. 텍스트 서식, 목록, 이미지 업로드, 링크 등과 같은 CKeditor 인라인 옵션에서 아무것도 할 수 없습니다.
현재 행동은 무엇입니까?
주요 문제는 인라인 옵션을 사용하더라도 서식이 선택한 텍스트에 반영되지 않는다는 것입니다. 텍스트 서식, 목록, 이미지 업로드, 링크 등과 같은 CKeditor 인라인 옵션에서 아무것도 할 수 없습니다.

답변
보시다시피 나는 그렇게 응답하지 않습니다. 비슷한 문제에 대한 응답을 본 Github에서도이 문제를보고했습니다. 며칠 후, 나는 응답을 받았으며 그것은 나를 위해 잘 작동했습니다. 그래서 저 같은 다른 사람에게 도움이 될만한 답변을 여러분 모두와 공유하고 싶습니다.
내 첫 번째 문제 : 여러 인라인 편집 옵션이 표시됩니다.
플러그인 GrapesJS CKEditor는 이미 호출, 사용자 정의 RTE로 CKEditor를 등록
editor.setCustomRte
실제로 두 번을 설정하는 것입니다.
나는 editor.setCustomRte
블록 을 제거했고 잘 작동했습니다. CKEditor 옵션을 제공하려면 여기에pluginsOpts
표시된 수준 에서 수행해야합니다 .
두 번째 문제는 다음과 같습니다. 가끔 편집기 옵션이 제대로 배치되지 않습니다.
이것은 editor.setCustomRte
블록 을 제거한 후에도 수정되었습니다 .
그리고 통합하는 동안 직면 한 마지막 및 주요 문제 : 선택한 텍스트에 반영되지 않는 인라인 서식
GrapesJS CKEditor 플러그인은 Standard-All CKEditor 버전 에 종속되며 표준 CKEditor 버전을 사용하지 않습니다 . 사용하다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