如何解决如何完全自定义 GrapesJs UI
我在我的网络应用程序中使用 Grapesjs 来创建网页。由于我是 GrapesJS 的新手,我不确定如何从 GrapesJs 自定义 UI。 我只是用这个代码。
const editor = grapes.init({
container: '#gjs',fromElement: true,plugins: ["gjs-blocks-basic","gjs-plugin-ckeditor",editor => gjsForms(editor,{ /* options */ }),editor => gjsnavbar(editor,editor => styleFilter(editor,editor => plugin(editor,editor => flexBox(editor,editor => slider(editor,editor => tabs(editor,editor => customcode(editor,editor => tooltip(editor,editor => gjstouch(editor,editor => thePlugin(editor,],pluginsOpts: {
"gjs-blocks-basic": {
/* ...options */
},'gjs-plugin-ckeditor': {
options: {
language: 'en',startupFocus: true,extraAllowedContent: '*(*);*{*}',// Allows any class and any inline style
allowedContent: true,// disable auto-formatting,class removing,etc.
enterMode: CKEDITOR.ENTER_BR,uiColor: '#0000001a',// Inline editor color
extraPlugins: 'justify,colorbutton,panelbutton,font,sourcedialog,showblocks',toolbar: [
["Format","-","Bold","Italic","Strike","Underline","Subscript","Superscript","RemoveFormat","NumberedList","BulletedList","Outdent","Indent","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","Link","Unlink","Anchor","TextColor","BGColor","ShowBlocks","Image","Table","Sourcedialog"]
]
},position: 'left',}
},fromElement: false,components: LandingPage.components || LandingPage.html,style: LandingPage.style || LandingPage.css,});
editor.getConfig().showDevices = 0;
editor.Panels.addPanel({
id: "devices-c"
}).get("buttons").add([{
id: "set-device-desktop",command: function(e) {
return e.setDevice("Desktop")
},className: "fa fa-desktop",active: true
},{
id: "set-device-tablet",command: function(e) {
return e.setDevice("Tablet")
},className: "fa fa-tablet"
},{
id: "set-device-mobile",command: function(e) {
return e.setDevice("Mobile portrait")
},className: "fa fa-mobile"
},]);
// Panel should re render again otherwise
// New button will not be shown on device panel
editor.Panels.render();
});
}
},
它工作正常并显示为 enter image description here
现在我想改变它。编辑器的风格 完全自定义。 隐藏侧边栏 仅在选择画布对象时显示 更改图标 换颜色 更改文本编辑器 如何做这些任务。我不知道 。让我知道是否有一些最好的来源可以清除所有内容
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。