# 富文本组件

# 概述

  • 富文本编辑器在我们的项目研发中是必不可少的存在,只要需要图文展示的地方都需要使用到富文本编辑器,市面上的编辑器有很多,比较主流的有Kind编辑器百度编辑器,如果看过富文本编辑器的源码的朋友应该比较清楚,看似一个简简单单的编辑器,他的原生代码确实如此复杂,有各种各样的JS文件、CSS文件,引用时需要在每个页面引入编辑器的JS和CSS,然后根据官方的指导初始化编辑器,需要写一堆的配置和参数来定义这个编辑器,然后才能在我们表单页面中展示出精美的编辑器,如果只是一次的引用问题不大,就怕比较大型的项目,很多模块都需要引入编辑器,那么算下来这是一项非常巨大的工作量,而且还容易出错,后期如果需要改一个东西需要满世界的去页面中找,费时费力,后期维护成本将非常的高,后期如果换个人去维护,那更是一项耗大的工程;

  • 为了简化开发,降低开发成本和维护成本,同时也为了后期更好的升级编辑器,我们特地开发了富文本编辑器组件,一切一切复杂的引用外部JS、外部CSS以及编辑器的初始化全部交由组件去完成,我们只需要传入简单的业务参数即可,其他的我们不去管它,编辑器组件他自己回去初始化、根据参数动态解析。

  • 目前框架中集成的自定义编辑器组件有主流的两种Kind编辑器百度编辑器,下面我们逐个给大家讲解。

# Kind编辑器

  • 组件:{editor:kindeditor name="content" type="default" width="100%" height="350"}

  • 参数分析

  1. name="content":name代表编辑器的名称,值为content,当前这个字段也是最终我们需要将编辑器内容存储到数据库中的字段;
  2. type="default":type代表编辑器的类型,编辑器分为defaultsimple两种常用类型,默认是default;
  3. width="100%":用于表示编辑器的宽度,这里的值是100%,可以根据现实需要自行设定;
  4. height="350":用于表示编辑器的高度,可以根据需要自行设定;
  • 组件使用

富文本编辑器组件的引入表单的方式也非常简单,如下演示:

<form class="layui-form model-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">通知内容:</label>
        <div class="layui-input-block">
            <textarea name="content" id="content" lay-verify="required" class="layui-textarea">{$info.content|default=''}</textarea>
			{editor:kindeditor name="content" type="default" width="100%" height="350"}
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
9
  • 效果展示:

    mixureSecure

# 百度编辑器

百度编辑器还在完善中...