咨询：TinyMCE 4能否实现HTML模板在编辑器内拖拽移动并保留样式？

完全可以实现这个需求！我之前在类似的项目里处理过，结合TinyMCE 4的内置插件和一些简单的自定义配置就能搞定，下面是具体的实现思路和步骤：

核心准备：启用拖拽插件 #

首先，TinyMCE 4自带了dragdrop插件，这是实现拖拽功能的基础。你需要在编辑器初始化时把这个插件加入到plugins列表里，同时保留其他你需要的插件。

让模板元素可拖拽 #

不管你的模板是通过自定义按钮插入，还是用TinyMCE的template插件管理，都要确保插入到编辑区的模板元素带有draggable="true"属性：

• 如果是手动编写的模板代码，直接在根元素上加上这个属性；
• 如果用template插件，在模板定义的HTML里给根元素加上draggable="true"。

另外，你可以通过编辑器的setup钩子，在初始化完成后给所有模板元素绑定拖拽事件，优化拖拽体验：

tinymce.init({
  selector: '#your-editor-container',
  plugins: 'dragdrop template code', // 按需添加其他插件
  content_css: '/path/to/your-template-styles.css', // 关键：引入模板对应的样式文件
  // 允许模板元素的所有必要属性，避免被TinyMCE过滤
  extended_valid_elements: 'div[draggable=true|class|style],section[draggable=true|class|style]',
  setup: function(editor) {
    // 编辑器初始化后处理模板元素
    editor.on('init', function() {
      const templateItems = editor.getBody().querySelectorAll('.your-template-class');
      templateItems.forEach(item => {
        item.setAttribute('draggable', 'true');
        
        // 拖拽开始时的视觉反馈
        item.addEventListener('dragstart', function(e) {
          e.dataTransfer.setData('text/html', this.outerHTML);
          this.style.opacity = '0.6';
        });
        
        // 拖拽结束恢复样式
        item.addEventListener('dragend', function(e) {
          this.style.opacity = '1';
        });
      });
    });
    
    // 处理放置事件，确保拖拽的元素正确插入
    editor.on('drop', function(e) {
      e.preventDefault();
      const templateHtml = e.dataTransfer.getData('text/html');
      editor.insertContent(templateHtml);
    });
  }
});

确保样式不丢失 #

样式丢失是常见的坑，这里有两个关键要点：

1. 引入样式文件：通过content_css配置项，把模板对应的CSS文件引入到编辑器的内容区域，这样编辑区内的模板才能正确渲染样式，拖拽后也能保留；
2. 关闭不必要的内容过滤：TinyMCE默认会过滤一些元素和属性，你需要通过extended_valid_elements或者valid_elements配置，允许模板元素的所有必要属性（比如class、style、draggable等），避免样式或拖拽属性被清理掉。

额外提示 #

如果你用的是TinyMCE的template插件管理模板，直接在模板的HTML代码里添加draggable="true"和对应的样式类，插入后就能直接拖拽，不需要额外遍历元素添加属性。

内容的提问来源于stack exchange，提问作者adam.bielasty