動態新增百度富文字的業務實現

阿新 • • 發佈：2021-01-16

百度富文字的業務需求實現

專案業務需求上需要對未知數量未知內容的資料可以用百度富文字展示與編輯更改。

先實現動態新增百度富文字的功能

引入與配置

	<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>`);
    }
// 刪除編輯器
    function deleteEditor(id) {
      // 刪除這邊傳個ID給下面銷燬就好了
      UE.getEditor(`editor${id}`).destroy();
    }

因為涉及到每個富文字的內容在後端都有都已經有對應的id，所以在渲染的時候先嚐試著新增內容以及給div設定id，

 $(function() {
      // 如果後臺有數量則，直接遍歷渲染	
      $('.addBox script').each(function() {
        arr.push($(this).attr('id').replace(/[^0-9]/ig, "")) //可以直接獲取最後一個編輯器的id，取出也行，這邊為了後續操作方便，直接儲存id
      });

      arr.forEach(i => {
        initEditor(i)
      })
    });

到這裡的時候動態新增的功能已經實現了，接下來就是跟介面聯調。
考慮到業務需求需要新增內容和標題還要帶刪除功能，一開始拿到介面資料時主要用到三個引數，title：標題、 content：內容、 id：對應id，所以上面的程式碼修改為

 $(function() {
 		let data = {
       [ regulationId: '',
        title: '',
        content: '']
    } //假設是介面拿到的資料
      // 如果後臺有數量則，直接遍歷渲染	
      data.forEach(i => {
        	var remarkIndex = data.id;
        	remarkIndex = UE.getEditor(remarkIndex, {
          toolbars: _TheArray
          ,wordCount:true
          ,maximumWords:5000
          ,allHtmlEnabled: false//提交到後臺的資料是否包含整個html字串
          ,allowDivTransToP: false//阻止div標籤自動轉換為p標籤
      });
      remarkIndex.ready(function () {
          remarkIndex.setContent(i.content, false)
      })
      })
    });

刪除功能可在建立編輯器後動態新增一個攜帶對應id的按鈕實現。

結合專案使用的layui進行改進

關於layui模板引擎文件的相關介紹：https://www.layui.com/doc/modules/laytpl.html
使用layui模板引擎後也可實現改業務需求
html當中的body程式碼

<script id="imgCardScript" type="text/html">
                {{#  layui.each(d, function(index, item){ }}
                <div style="padding: 20px; background-color: #F2F2F2;">
                    <div class="layui-row layui-col-space15 data-list" id="{{ item.regulationId }}">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header" style="padding: 10px 15px;line-height: 1;">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <div class="layui-form-mid">標題：</div>
                                            <div class="layui-input-inline" style="width: 220px;">
                                                <input type="text" class="layui-input rule-title" maxlength="10" style="width: 200px;" value="{{ item.title }}" />
                                            </div>
                                            <button class="layui-btn layui-btn-danger btn-del" data-id="{{ item.regulationId }}" style="float: right;">刪除</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card-body">
                                    <textarea id="remark{{index}}" name="remark" style="width:1024px;height:220px;" class="remark"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{#  }); }}
            </script>
        <div class="wsp-table" id="imgCard"></div>//用於構建檢視

對應的js程式碼:

//拿到介面資料後呼叫此方法
function renderList(){
  layui.use(['laytpl'], function() {
      var laytpl = layui.laytpl;
      var demo = document.getElementById('imgCardScript');
      var getTpl = demo.innerHTML, view = document.getElementById('imgCard');
      laytpl(getTpl).render(dataList, function (html) {
          view.innerHTML = html;
      });
  });
  // 渲染富文字
  $(".remark").each(function (index, obj) {
      var remarkIndex = $(obj).attr("id");//拿到富文字以前的id
      UE.delEditor(remarkIndex);//刪除後重新建立
      remarkIndex = UE.getEditor(remarkIndex, {
          toolbars: _TheArray
          ,wordCount:true
          ,maximumWords:5000
          ,allHtmlEnabled: false//提交到後臺的資料是否包含整個html字串
          ,allowDivTransToP: false//阻止div標籤自動轉換為p標籤
      });
      remarkIndex.ready(function () {
          remarkIndex.setContent( dataList[index].content, false)//賦值內容
      })
  });
}
//新增
$(document).on('click','#btn-create',function () {
    dataList.push({
        regulationId: '',
        title: '',
        content: ''
    });//介面資料新增空的資料方便渲染
    renderList();//重新渲染
	$(document).scrollTop($(document).height());
});
//刪除
$(document).on('click','.btn-del',function () {
    var id = $(this).attr('data-id');//拿到對應的id
	//通過傳id呼叫刪除介面去刪除此條富文字資料
	//然後呼叫重新獲取資料的方法重新渲染
});