Встроенный CKeditor интегрирован в редактор GrapesJS
Я работаю в приложении-редакторе, в котором реализован 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 он должен отражаться в выделенном тексте.
Подробно опишите ошибку:
Я интегрировал CKeditor в редактор grapesJS для встроенного редактирования. В настоящее время, когда я выделяю текст для его форматирования, встроенные параметры CKeditor отображаются вместе с несколькими другими параметрами на черной панели инструментов. Я сбит с толку. И главная проблема в том, что даже я использую какие-либо варианты встроенного форматирования, форматирование не отражается в выделенном тексте. Невозможно сделать что-либо из встроенной опции CKeditor, например форматирование текста, список, загрузку изображений, ссылку и т. Д.
Каково текущее поведение?
Основная проблема заключается в том, что даже если я использую какие-либо встроенные параметры, форматирование не отражается в выделенном тексте. Невозможно сделать что-либо из встроенной опции CKeditor, например форматирование текста, список, загрузку изображений, ссылку и т. Д.

Ответы
Как вы видите, я не получил ответа от SO. Я также сообщил об этой проблеме в Github, где я видел ответы на похожие проблемы. Через несколько дней я получил ответ, и это сработало для меня. Так что я хочу поделиться этим ответом со всеми вами, который может быть полезен для кого-то вроде меня.
Моя первая проблема: отображаются несколько вариантов встроенного редактирования
GrapesJS CKEditor плагин уже регистрирует CKEditor как обычай RTE, поэтому вызов
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 это исправит.
Вот рабочая скрипка, которую вы можете использовать для интеграции Inline CKEditor с GrapesJS

Дополнительное примечание : я столкнулся с другой проблемой после удаления editor.setCustomRte
блока - это было исправлением моей первой проблемы. Это выглядит как:
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)
Если кто-то из вас столкнулся с подобной ошибкой, обратите внимание, что это связано с типом / версией CKEditor, который вы используете. Я использовал стандартную версию CKEditor, и в этом была проблема. После изменения этой версии на Standard-All CKEditor проблема была решена.
Grapedrop - это сайт, на котором вы можете создать учетную запись и проверить почти все свойства GrapesJS.
Вот дополнительный список плагинов, используемых в 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 Встроенная настраиваемая опция панели инструментов, добавляемая по вашему желанию