TinyMCE编辑HTML文件内容后无法保存的技术求助

我是TinyMCE新手，想使用它编辑多个HTML文件，请问这可行吗？

示例文件：file_to_edit.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="C:\Soft\TinyMCE\tinymce\js\tinymce\tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: 'textarea#mytextarea',
        mode: 'textareas',
        plugins: 'code, save',
        toolbar: 'code | save',
        save_enablewhendirty : true,
        save_onsavecallback: () => {
        },
        object_resizing: false
      });
    </script>
  </head>

  <body>
    <h1>Long attribute description</h1>
    <form>
      <textarea id="mytextarea">Attribute description</textarea>
      <h2>HTML output</h2>
    <div class="HTMLContainer"></div>
    </form>
  </body>
</html>

问题 #

我希望通过TinyMCE修改mytextarea字段中的文本，但尝试多种方法都没效果：

• 添加了"Save"插件并点击工具栏的保存按钮，无任何反应。
• 在save_onsavecallback回调函数中添加tinymce.triggerSave()方法。
• 使用tinymce.activeEditor.save()方法。
• 尝试修改编辑器模式为tinymce.mode.set("design")。
• 使用tinymce.activeEditor.getContent()和tinymce.activeEditor.setContent()方法。

解决思路及方案 #

首先明确：TinyMCE是浏览器端编辑器，受浏览器安全限制，无法直接写入本地HTML文件。要实现编辑多HTML文件并保存，需要结合后端服务或本地运行环境，以下是针对当前问题的修复和可行方案：

1. 修复保存按钮无响应问题

你的save_onsavecallback是空函数，点击保存自然没反应，需要在回调里处理内容获取和后续逻辑：

save_onsavecallback: () => {
  // 获取编辑器内容
  const content = tinymce.activeEditor.getContent();
  // 同步内容到对应的textarea
  tinymce.activeEditor.save();
  // 这里可添加内容保存逻辑，比如发送到后端、生成下载链接等
  console.log("当前编辑器内容：", content);
}

2. 编辑多个HTML文件的可行方式

• 本地搭建简单服务（如Node.js）
  用Node.js写一个轻量HTTP服务，提供文件读写接口：

  • 服务端读取指定HTML文件内容，返回给前端填充到TinyMCE
  • 前端修改后，把内容发送给服务端，服务端写入对应文件

• 使用桌面应用框架（如Electron）
  将页面打包成Electron应用，利用Node.js的fs模块直接读写本地文件，实现直接编辑并保存多个本地HTML文件。

• 浏览器端下载方案
  若不想搭建服务，可让用户上传HTML文件，编辑后生成新的HTML内容供用户下载：

  // 生成下载链接的示例函数
  function downloadEditedHtml() {
    const content = tinymce.activeEditor.getContent();
    const blob = new Blob([content], {type: 'text/html'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'edited_file.html';
    a.click();
    URL.revokeObjectURL(url);
  }
  // 可将此函数绑定到页面按钮上
  

3. 编辑器内容同步说明

• tinymce.activeEditor.save()会将编辑器内容同步到对应的textarea，之后可通过document.getElementById('mytextarea').value获取同步后的内容。
• tinymce.triggerSave()会触发所有编辑器同步到对应textarea，适合多编辑器场景。

内容的提问来源于stack exchange，提问作者Konstantin