JQuery 动态添加多个编辑器,ueditor等其他编辑器同样适用

给别人随手做的小demo,这边只提供思路,代码可再自行完善

<!DOCTYPE html>
<html lang="en">

<head>
  <title>demo</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <!-- 引用的外部文件 -->
  <script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.config.js" type="text/javascript"></script>
  <script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.all.min.js" type="text/javascript"></script>
</head>

<body>
  <div class="addBox">
    <script id="editor_0" type="text/plain" style="width:1024px;height:100px;"></script>
  </div>
  <div id="btns">
    <div>
      <button onclick="createEditor()">创建编辑器</button>
      <button onclick="deleteEditor()">删除编辑器</button>
    </div>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    let arr = []; //存储当前已经存在编辑器id的值,
    $(function() {
      // 如果后台有数量则,直接遍历渲染
      $('.addBox script').each(function() {
        arr.push($(this).attr('id').replace(/[^0-9]/ig, "")) //可以直接获取最后一个编辑器的id,取出也行,这边为了后续操作方便,直接存储id
      });

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

    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 deleteEditor(id) {
      // 删除这边传个ID给下面销毁就好了
      UE.getEditor(`editor${id}`).destroy();
    }

    // 初始化编辑器函数
    function initEditor(id) {
      UE.getEditor(`editor_${id}`);
    }
    // 创建编辑器
    function appendEditor(index) {
      arr.push(index)
      $('.addBox').append(`<script id="editor_${index}" type="text/plain" style="width:1024px;height:100px;"><\/script>`);
    }
  </script>
</body>

</html>

预览效果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章