我正在一个实现了 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，您可以在其中检查工作和代码。
版本：
葡萄 - 0.16.18
ckeditor - 标准 - 4.14.1
预期的行为是什么？
从内联 CKeditor 选项应用内联格式选项时，它应该反映在选定的文本中。
详细描述错误：
我已将 CKeditor 集成到 grapesJS 编辑器中以进行内联编辑。目前，当我选择文本对其进行格式化时，内联 CKeditor 选项与其他几个选项一起显示在黑色工具栏中。我对此感到困惑。主要问题是，即使我使用任何内联格式选项，格式也不会反映在所选文本中。无法通过 CKeditor 内联选项执行任何操作，例如文本格式、列表、图像上传、链接等。
当前的行为是什么？
主要问题是即使我使用任何内联选项，格式也不会反映在所选文本中。无法通过 CKeditor 内联选项执行任何操作，例如文本格式、列表、图像上传、链接等。
