【发布时间】：2020-12-09 10:43:59
【问题描述】：
我在一个实现了 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 内联选项执行任何操作，例如文本格式、列表、图片上传、链接等。
【问题讨论】：