动态添加百度富文本的业务实现

百度富文本的业务需求实现

项目业务需求上需要对未知数量未知内容的数据可以用百度富文本展示与编辑更改。

先实现动态添加百度富文本的功能

引入与配置

	<script type="text/javascript" th:src="@{/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" th:src="@{/ueditor/ueditor.all.js}"></script>

具体的配置和基础使用可以去官网查看: http://fex.baidu.com/ueditor/#start-start

实现

刚看到这个需求的时候先尝试着写了动态添加百度富文本的功能，因为项目技术原因只能用jquery
下面是实现的js代码：

	let arr = []; //存储当前已经存在编辑器id的值,
// 初始化编辑器函数
    function initEditor(id) {
   
      UE.getEditor(`editor_${
     id}`);
    }
//创建编辑器函数
	function createEditor() {
   
		if (arr.length != 0) {
    //如果已经有创建的编辑器，则直接添加
        // 创建时取最后一个编辑器id给他+1
        let newId = parseInt($('.addBox div[id^=editor_]:last').attr('id').replace(/[^0-9]/ig, "")) + 1;
        appendEditor(newId);
        initEditor(newId);
      } else {
   
        // 获取到当前已经存在的编辑器id再继续累加，直接使用时间戳当编辑器id也可以
        appendEditor(0);
        initEditor(0)
      }
    }
//创建编辑器
    function appendEditor(index) {
   
      arr.push(index)
      $('.addBox').append(`<script id="editor_${
     index}" type="text/plain" style="width:1024px;height:100px;"><\/script>`