我们有最终用户可以管理内容的动态文本区域。该应用程序本身是一个 Angular 9，grapesJS（版本：0.17.27），以允许用户管理内容并用 CKEditor4 替换默认的grapesJS富文本编辑器，并通过grapesjs-plugin-ckeditor（版本：0.0.10）启用它）。
我们面临一个问题，我们似乎无法将工具栏固定/停靠在有意义的位置，因此它不会为用户反弹。如果您查看图片并看到 grapesJS 框架，我可以抓取 iFrame，我可以在我们创建它时抓取底部块）连同 sharedSpaces 顶部和底部，请参阅下面的代码以获取完整的编辑器工具栏实现设置
当我使用这些 id 时，底部块在技术上位于画布之外，因此 CKEditor 中的任何功能都不会真正起作用，因为每次单击它时，如果我使用默认定位，则文本会被取消选择，即删除sharedSpaces 和 toolbarLocation然后一切正常，但它显示的位置没有一致性，即文本上方或下方，有时它会在您按 Enter 并继续扩展文本块时反弹到不同的位置。
在文本区域上使用grapesjs时，是否有固定CKEditor工具栏的好方法？
GrapesJS 编辑器代码：
//remove unneeded buttons
let removeTbActions = [
'Source'
, 'Save'
, 'NewPage'
, 'ExportPdf'
, 'Preview'
, 'Print'
, 'Templates'
, 'Find'
, 'Replace'
, 'Scayt'
, 'Form'
, 'Checkbox'
, 'Radio'
, 'TextField'
, 'Textarea'
, 'Select'
, 'Button'
, 'ImageButton'
, 'HiddenField'
, 'Strike'
, 'Subscript'
, 'Superscript'
, 'CreateDiv'
, 'BidiLtr'
, 'BidiRtl'
, 'Language'
, 'Image'
, 'Flash'
, 'Table'
, 'HorizontalRule'
, 'Smiley'
, 'SpecialChar'
, 'PageBreak'
, 'Iframe'
, 'Maximize'
, 'ShowBlocks'
, 'SelectAll'
, 'PasteFromWord'
, 'PasteText'
, 'Anchor'
, 'Blockquote'
, 'JustifyBlock'
, 'Format'
, 'CopyFormatting'
, 'Font'
, 'FontSize'
].join(',');
this.grapesJsEditor = grapesjs.init({
container: '#gjs',
fromElement: true,
style: style,
height: '600px',
width: 'auto',
storageManager: false,
plugins: ['gjs-plugin-ckeditor'],
pluginsOpts: {
'gjs-plugin-ckeditor': {
options: {
sharedSpaces: {
top: 'gjs',
bottom: 'blocks'
},
toolbarLocation: 'top',
toolbarGroups: [
{ name: 'document', groups: ['mode', 'document', 'doctools'] },
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
{ name: 'clipboard', groups: ['clipboard', 'undo'] },
{ name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
{ name: 'forms', groups: ['forms'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
{ name: 'links', groups: ['links'] },
/* { name: 'insert', groups: ['insert'] },*/
{ name: 'colors', groups: ['colors'] },
{ name: 'styles', groups: ['styles'] },
{ name: 'tools', groups: ['tools'] },
{ name: 'others', groups: ['others'] },
{ name: 'about', groups: ['about'] }
],
extraPlugins: 'colorbutton, colordialog, indent, indentblock, justify, list, listblock, liststyle, sharedspace',
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
removeButtons: removeTbActions,
//remove unneeded Plugins
removePlugins: 'resize',
//make toolbar not resizable
resize_enabled: 'false',
extraAllowedContent: '*(*);*{*}',
allowedContent: true,
width: '100%'
}
}
},
panels: {
defaults: [{
id: 'layers',
el: '.panel__right',
resizable: false
},
{
id: 'panel-switcher',
el: '.panel__switcher',
buttons: [{
id: 'show-style',
active: true,
label: '<span class="fa fa-paint-brush" title="Styles"></span>',
command: 'show-styles',
togglable: false,
},
{
id: 'show-traits',
active: false,
label: '<span class="fa fa-cog" title="Properties"></span>',
command: 'show-traits',
togglable: false,
}]
}]
},
blockManager: {
appendTo: '#blocks',
blocks: blocksToAdd
},
selectorManager: {
appendTo: '.styles-container'
},
styleManager: {
appendTo: '.styles-container',
sectors: [{
name: 'Typography',
open: true,
buildProps: ['font-family', 'font-size', 'font-weight', 'color', 'text-align', 'text-decoration', 'font-style'],
properties: [
{ name: 'Font', property: 'font-family' },
{ name: 'Weight', property: 'font-weight' },
{ name: 'Font color', property: 'color' },
{
property: 'text-align',
type: 'radio',
defaults: 'left',
list: [
{ value: 'left', name: 'Left', className: 'fa fa-align-left' },
{ value: 'center', name: 'Center', className: 'fa fa-align-center' },
{ value: 'right', name: 'Right', className: 'fa fa-align-right' },
{ value: 'justify', name: 'Justify', className: 'fa fa-align-justify' }
],
}, {
property: 'text-decoration',
type: 'radio',
defaults: 'none',
list: [
{ value: 'none', name: 'None', className: 'fa fa-times' },
{ value: 'underline', name: 'underline', className: 'fa fa-underline' },
{ value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough' }
],
}, {
property: 'font-style',
type: 'radio',
defaults: 'normal',
list: [
{ value: 'normal', name: 'Normal', className: 'fa fa-font' },
{ value: 'italic', name: 'Italic', className: 'fa fa-italic' }
],
}],
}]
},
traitManager: {
appendTo: '.traits-container'
}
});
我还包括了我使用默认定位和 IFrame 本身时的图片。显示此文本的默认工具栏位置的 IFrame 的一部分
