富文本tinymce外围的DIV拖拽后内容插入到富文本之中

因为是在做原型图的时候调查的，所以代码用的是原生JS，富文本插件用的是tinymce

富文本html页面

 function init() {
      console.log("触发初始加载内容")
      var droppable0 = document.getElementById('tinydemoId0');
      console.log(droppable0, "droppable0")
      // 添加放置事件监听器
      droppable0.addEventListener('dragover', function (event) {
        tinymce.editors["tinydemoId0"].focus();
        console.log("触发拖入")
        // 取消默认行为，允许放置
        event.preventDefault();
      });
      droppable0.addEventListener('drop', function (event) {
        console.log("进行放置")
        // 取消默认行为，允许放置
        event.preventDefault();
        // 获取拖动数据
        var data = event.dataTransfer.getData('aaaaa');
        // console.log("data",data)
        // 在放置区域中插入拖动数据
        tinymce.editors["tinydemoId0"].insertContent(data)
        // console.log("window.parent.openUrlDatatest", window.parent.openUrlDatatest,"data",data)
      });

      var droppable1 = document.getElementById('tinydemoId1');
      droppable1.addEventListener('dragover', function (event) {
        tinymce.editors["tinydemoId1"].focus();
        // 取消默认行为，允许放置
        event.preventDefault();
      });
      droppable1.addEventListener('drop', function (event) {

        // 取消默认行为，允许放置
        event.preventDefault();
        var data = event.dataTransfer.getData('aaaaa');
        tinymce.editors["tinydemoId1"].insertContent(data)
        // console.log("window.parent.openUrlDatatest", window.parent.openUrlDatatest, "data", data)
      });
    }

做了两个的富文本框，tinydemoId0是唯一的，等正式项目根据内容循环出来唯一ID就可以了

父页面html

 function draggable(val) {
      // 目标位置
      let iframe = document.getElementById("u914_input");
      let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      let element = iframeDocument.getElementById("mce_0");
      console.log("触发拖拽")
    }
 // 初始加载(页面实际使用的时候记得更改成循环渲染数据)
    function init() {

      // 获取拖动目标元素和放置区域元素
      var draggableOne = document.getElementById('u918');
      console.log(draggableOne, "draggableOne")
      // 添加拖动事件监听器
      draggableOne.addEventListener('dragstart', function (event) {
        console.log("触发监听", "draggableOne")
        // var content = tinymce.editors['tinydemoOne'].getContent();
        var content = document.getElementById('tinydemoOne').innerHTML;
        // window.parent.openUrlDatatest = content
        // 设置拖动数据，这里使用文本数据
        event.dataTransfer.setData('aaaaa', content);
      });
      // 获取拖动目标元素和放置区域元素
      var draggableTwo = document.getElementById('u925');
      console.log(draggableTwo, "draggableTwo")
      // 添加拖动事件监听器
      draggableTwo.addEventListener('dragstart', function (event) {
        console.log("触发监听", "draggableTwo")
        // 设置拖动数据，这里使用文本数据
        // var content = tinymce.editors['tinydemoTwo'].getContent();
        var content = document.getElementById('tinydemoTwo').innerHTML;
        // window.parent.openUrlDatatest = content
        // 设置拖动数据，这里使用文本数据
        event.dataTransfer.setData('aaaaa', content);

      });
      // 获取拖动目标元素和放置区域元素
      var draggableThree = document.getElementById('u932');
      console.log(draggableThree, "draggableThree")
      // 添加拖动事件监听器
      draggableThree.addEventListener('dragstart', function (event) {
        console.log("触发监听", "draggableThree")
        // var content = tinymce.editors['tinydemoThree'].getContent();
        var content = document.getElementById('tinydemoThree').innerHTML;
        // window.parent.openUrlDatatest = content
        // 设置拖动数据，这里使用文本数据
        event.dataTransfer.setData('aaaaa', content);
      });
      // 获取拖动目标元素和放置区域元素
      // var draggableTest = document.querySelectorAll('#test');
      // for (let i = 0; i < draggableTest.length; i++) {
      //   draggableTest[i].addEventListener('dragstart', function (event) {
      //     // 设置拖动数据，这里使用文本数据
      //     event.dataTransfer.setData('text/html', draggableTest[i].textContent);
      //   });
      // }
    }
----------------------------------------------------------------------------------------- 
<div id="u932" draggable="true" onclick="draggable()" class="ax_default" data-left="9" data-top="357"
            data-width="208" data-height="121">

父页面也是两个盒子可拖拽，同理正式项目的时候直接循环就行了，循环的代码是注释掉的那一段