Fastadmin富文本编辑器（summernote）使用示例

第一步：安装summernote插件

前往fastadmin后台插件管理安装即可，插件免费，不过需要注册fastadmin官方账号。

安装完成后，可在项目根目录下的addons文件夹找到对应插件文件。需清除浏览器缓存和插件缓存方可生效。

第二步：页面引入插件，进行数据绑定

第一种：textarea标签添加类名editor即可将文本框渲染成富文本编辑器；声明name属性即可在表单提交时携带富文本数据。

<div class="col-xs-12 col-sm-8">
   <!-- 富文本编辑器  -->
  <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
</div>

注：editor类名可在后台插件配置项处更改，此处不展示。
第二种：嵌套在form标签里，数据绑定为通过事件触发。
html部分：

<form role="form">
     <textarea id="richtextContent" class="editor"></textarea>
</form>

js部分：插件内置的事件名为’summernote.change’，不是’change’；

// 表单绑定事件
Form.api.bindevent($("form[role=form]"));
// 编辑器数据更新时触发 
$('#richtextContent').on('summernote.change',
 function (we, contents, $editable) {
 	// 此处编写数据处理逻辑                      
 });

第三步：编写处理逻辑，实现预览效果

这一步主要透过jq处理富文本编辑器的值（有规律的，每一行元素都包含在一对p标签里），再通过模板字符串添加渲染效果，最后生成预览效果。

// 预览模块容器
<div id='preview'></div>

// 处理逻辑
$('#richtextContent').on('summernote.change',
 function (we, contents, $editable) {
 	// 1.获取编辑器内容
 	let originContent = $('#richtextContent').val()
	// 2.根据编辑器内容（字符串）生成DOM节点对象，方便数据提取
	const parser = new DOMParser();
    const doc = parser.parseFromString(contentEditor, "text/html"); // 第2个参数为mimeType，可以为 text/html, text/xml 等等这些
    // 解析好的DOM节点
    const nodes = doc.body;

	// 3.获取该节点的子元素集合
	const plist = $(nodes).children();
	// 也可用find函数寻找指定标签子元素
	// const plist = $(nodes).find('p');
	// 获取数据
    let resultList = [];
    plist.each(function () {
      resultList.push($(this).prop("outerHTML"))                                 						               
    })
	
	// 4.提取预览图需要的数据，根据实际情况出发
	// 我的第一个子元素提取为图片
	// 第二个子元素提取为.....
	// .....
	let imgHTML = resultList.find(item =>item.toString().includes('src'))
    let levelHTML = resultList[0] ?? ''
   	let desHTML = resultList[1] ?? ''
    let titHTML = resultList[2] ?? ''
   	let otherHTML = resultList.slice(3).join('') ?? ''
	
	// 5.添加至事先编辑号的页面模板中，并渲染至预览模块
	let contentShow = `<div style="display:flex;padding:10px;border-bottom: 1px solid #eee;">
     <div style="height:75px;width:75px;border-radius: 5px;border:1px solid silver;overflow: hidden;">${imgHTML}</div>
     <div style="margin-left:10px;padding:10px 0;">
     <div>${levelHTML}</div>
     <div style="font-size: 18px;">${desHTML}</div>
     </div>
     </div>
      <div style="font-weight: 550;line-height: 1.5; padding:5px 10px;">${titHTML}</div>
     <div style="padding:0px 15px;">
      ${otherHTML}
      </div>`
     $('#preview').html(contentShow)                     
 });

实现效果如图：

参考链接
summernote官网
根据html字符串生成dom节点
summernote中文API文档