# 编辑器

富文本编辑器是网站开发常用的功能,在HDCMS中已经集成了多个优秀的编辑器供网站使用。

houdunren.com (opens new window) @ 向军大叔

xj-small

# wangEditor

该编辑器是轻量、简洁、易用、并且开源免费的。

image-20201120020403630

# blade

下面是blade模板中以组件的方式调用编辑器,在模板中使用以下代码调用编辑器

 <hd-total-editor name="editor" :value.sync="content" action="/common/upload"/>

下面对属性进行说明

属性 说明
name 表单名称
value 默认值
action 图片上传地址

# vue

在模板中使用以下代码调用编辑器

<x-editor theme="wang" name="content" value="默认值-后盾人" height="300" action="/common/upload/make" />

下面来对属性进行说明

属性 说明
theme 值固定为wang
name 表单name
value 初始值
height 编辑器高度
action 后台图片上传地址

# ToastEditor

tui.editor (opens new window)编辑器支持markdown与标准富文本内容的编辑器

image-20201120233022887

# blade

下面是blade模板中以组件的方式调用编辑器,在模板中使用以下代码调用编辑器

<x-editor theme="toast" name="content" value="默认值-后盾人" type="markdown" height="300"
                  action="/common/upload/make" />

下面来对属性进行说明

属性 说明
theme 值固定为toast
name 表单name
value 初始值
type 编辑器类型:wysiwyg 或 markdown
height 编辑器高度
action 后台图片上传地址

# vue

系统也提交了Vue组件的编辑器调用方式

 <hd-total-editor name="editor" :value.sync="content" action="/common/upload"/>

下面对属性进行说明

属性 说明
name 表单名称
value 默认值
action 图片上传地址