GrapesJS UI 组件
Jmix 框架支持下列 GrapesJS UI 组件：
-
grapesJsHtmlEditor- 一个基础的 HTML 编辑器，无任何 插件。 -
grapesJsWebpageHtmlEditor- 一个适合做网页开发的 HTML 编辑器，使用了webpage、customcode插件。 -
grapesJsNewsletterHtmlEditor- 一个适合做新闻资讯开发的 HTML 编辑器，使用了newsletter、customcode插件。grapesJsNewsletterHtmlEditor组件还有附加的inlineCss属性，如果启用该属性，则 CSS 类嵌入在 HTML 中。
下面示例演示如何创建 grapesJsHtmlEditor 组件：
<window xmlns="http://jmix.io/schema/ui/window"
caption="Grapes JS Screen"
xmlns:grapesjs="http://jmix.io/schema/grapesjs/ui">
<layout expand="htmlEditor" spacing="true">
<grapesjs:grapesJsHtmlEditor id="htmlEditor">
<grapesjs:plugin name="basicBlocks"/>
</grapesjs:grapesJsHtmlEditor>
</layout>
</window>所有 GrapesJS UI 组件都提供下列方法：
-
setValue(String value)- 为组件设置 HTML 内容。 -
getValue()- 从组件获取 HTML 内容。 -
runCommand(String command)- 运行命令。 -
stopCommand(String command)- 停止命令。
禁用分块
可以禁用某些 分块，使用逗号分隔定义禁用分块列表，示例：
<grapesjs:grapesJsHtmlEditor id="htmlEditor">
<grapesjs:disabledBlocks>
map,tabs
</grapesjs:disabledBlocks>
</grapesjs:grapesJsHtmlEditor>插件
UI 组件可以使用插件（plugin 元素）进行扩展。支持从预定义插件列表选择或配置新插件。
默认支持的插件有：
-
basicBlocks- 此插件包含 GrapesJS 编辑器基本的分块（参阅 GrapesJS Basic Blocks 文档）。 -
ckeditor- 此插件将默认的Rich Text Editor（富文本编辑器）替换为CKEditor（参阅 GrapesJS CKEditor 文档）。 -
customcode- 此插件支持添加嵌入的自定义代码（参阅 GrapesJS Custom Code 文档）。 -
flexBlocks- 此插件添加了Flexbox分块，支持灵活的响应式列布局（参阅 GrapesJS Blocks Flexbox 文档）。 -
forms- 此插件添加了一些基础的表单组件和分块，表单使用更容易（参阅 GrapesJS Forms 文档）。 -
newsletter- 此预设将 GrapesJS 配置为一个资讯构建器，带有一些独特的功能和分块，专门用于在主要的电子邮件客户端展示（参阅 GrapesJS Newsletter Preset 文档）。 -
postcss- 此插件通过PostCSS启用自定义的 CSS 解析器（参阅 GrapesJS Parser PostCSS 文档）。 -
styleFilter- 此插件为 GrapesJS 的 Style Manager 添加了filter类型输入（参阅 GrapesJS Style Filter 文档）。 -
tabs- 此插件添加了简单的标签页组件（参阅 GrapesJS Tabs 文档）。 -
tooltip- 此插件添加了简单的仅用 CSS 的提示框（tooltip）组件（参阅 GrapesJS Tooltip 文档）。 -
touch- 此插件为 GrapesJS 编辑器提供了触摸支持（参阅 GrapesJS Touch 文档）。 -
tuiImageEditor- 此插件添加了TOAST UI Image Editor（弹窗图片编辑器）图片组件（参阅 GrapesJS TOAST UI Image Editor 文档）。 -
webpage- 此预设将 GrapesJS 配置为一个网页构建器（参阅 GrapesJS Preset Webpage 文档）。
下面示例定义了使用插件的 grapesJsNewsletterHtmlEditor：
<grapesjs:grapesJsNewsletterHtmlEditor id="templateEditor"
inlineCss="true"
height="100%" width="100%">
<grapesjs:disabledBlocks>
map
</grapesjs:disabledBlocks>
<grapesjs:plugin name="basicBlocks"/>
<grapesjs:plugin name="forms"/>
<grapesjs:plugin name="styleFilter"/>
<grapesjs:plugin name="ckeditor">
<grapesjs:optionsPath>
/io/jmix/grapesjs/plugins/gjs-plugin-ckeditor.js
</grapesjs:optionsPath>
</grapesjs:plugin>
<grapesjs:plugin name="forms"/>
<grapesjs:plugin name="flexBlocks"/>
<grapesjs:plugin name="tuiImageEditor"/>
<grapesjs:plugin name="customcode"/>
<grapesjs:plugin name="postcss"/>
<grapesjs:plugin name="styleFilter"/>
<grapesjs:plugin name="webpage">
<grapesjs:options> (1)
<![CDATA[
{
"modalImportTitle" : "Import HTML"
}
]]>
</grapesjs:options>
</grapesjs:plugin>
</grapesjs:grapesJsNewsletterHtmlEditor>| 1 | 定义自定义插件选项。 |
自定义项目插件可通过 io.jmix.grapesjs.component.GjsPluginsRepository 类进行注册。
自定义分块
自定义 分块 可以使用 block 元素添加至组件，支持下列参数：
-
name- 唯一分块 id。 -
label- 分块名称。 -
category- 将分块按类别分组。 -
content- HTML 内容。 -
contentPath- HTML 内容的路径。 -
attributes- 分块属性。
下面示例演示如何创建自定义分块：
<grapesjs:block>
<grapesjs:name>h1-block</grapesjs:name>
<grapesjs:label>Heading</grapesjs:label>
<grapesjs:category>Basic</grapesjs:category>
<grapesjs:content>
<![CDATA[<h1>Put your title here</h1>]]>
</grapesjs:content>
<grapesjs:attributes>
<![CDATA[
{
title: 'Insert h1 block',
class:'fa fa-th'
}
]]>
</grapesjs:attributes>
</grapesjs:block>自定义项目分块可以通过 io.jmix.grapesjs.component.GjsBlocksRepository 类注册。已注册的分块可以使用 name 属性添加至 UI 组件。
下面示例中，我们创建了一个 Spring bean 并注册新的自定义分块：
@Component
public class BlocksRegister {
@Autowired
protected GjsBlocksRepository gjsBlocksRepository;
@Authenticated
public void registerBlock() {
GjsBlock testBlock = new GjsBlock(); (1)
testBlock.setName("h1-block");
testBlock.setLabel("Heading");
testBlock.setCategory("Basic");
testBlock.setContent("<h1>Put your title here</h1>");
testBlock.setAttributes("{" +
" title: 'Insert h1 block',\n" +
" class:'fa fa-th'\n" +
" }");
gjsBlocksRepository.registerBlock(testBlock); (2)
}
}| 1 | 创建一个 GrapesJS 分块的实例。 |
| 2 | 注册自定义分块，支持在 XML 中使用。 |
然后我们在 XML 描述中添加上面注册的分块：
<grapesjs:grapesJsHtmlEditor id="htmlEditor">
<grapesjs:disabledBlocks>
map,tabs
</grapesjs:disabledBlocks>
<grapesjs:block name="h1-block"/>
</grapesjs:grapesJsHtmlEditor>|
在 |
