选择TinyMCE模板：设置内容而不是附加到当前内容

Question

上下文：C＃.NET Web应用程序。

TinyMCE文本编辑器。选择模板时，文本会附加到textarea的内容中。

对于此特定文本区域，产品所有者要求将内容设置为所选模板的文本，而不是附加到已设置的内容。因此，当选择模板时，需要首先清除当前内容。

请有人告诉我，如何实现这一目标？

这不是相关的，但这里是我的代码片段和截图：

<script type="text/javascript">
var e = tinyMCE.get("MailText");
if (!e) {
    tinymce.init({
    height: 200,
    selector: "textarea#MailText",
    theme: "modern",
    plugins: ["template","code"],
    templates: [ @Html.Raw(finalizeQueryVm.Templates)],
        statusbar: false,
        resize: false,
        toolbar1: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | code",
});
}

Answer 1

模板插件没有标记或设置来指示何时替换或插入内容。你可以做几件事......

1 - 修改template插件

template插件的代码当然可以修改为根据您对每个模板的标准插入或设置内容。这里的优点是您可以完全控制代码。减号是每次更新TinyMCE时都必须保持这些更改，以确保template插件仍能按预期运行。

2 - 依靠TinyMCE编辑器事件（例如BeforeSetContent）

当编辑器中发生事情时，会触发事件通知您 - 这允许您根据事件采取行动。其中一个事件是BeforeSetContent。您可以在模板中放置一些标记来标记这是一个＆＃34;模板＆＃34;插入然后在插入之前触发删除编辑器的当前内容。例如......

tinymce.init({
  selector: "#myEditor",
  ...
  setup: function (editor) {
    editor.on('BeforeSetContent', function(e) {
      console.log('BeforeSetContent: ' + e.content);
      if (e.content.startsWith("<!-- replace -->")) {
        console.log('REMOVING EXISTING CONTENT');
        editor.setContent("");
      }
    });
  }
})  

此示例假定模板的第一部分是HTML注释<!-- remove -->。无法知道是什么触发了内容的设置 - 它可以是从粘贴到插入模板的任何内容，因此您需要在模板中包含一些内容，以便让您知道要删除编辑器的当前内容内容。