javascript - 不可编辑的内容允许删除。这个怎么限制？

Question

我们使用了带有“不可编辑”插件的 TinyMCE 编辑器。我们试图删除不可编辑的内容，它被删除了。如何限制不可编辑内容的删除(删除/退格)操作？
下面是我的代码:

tinymce.init({
  selector: "#myeditablediv",
  plugins: "advlist table lists image paste link pagebreak noneditable help",
  noneditable_noneditable_class: "mceNonEditable",
  menubar: false,
  inline: true,
  height: 500,
  paste_data_images: true,
  toolbar_sticky: true,
  toolbar:
    "bold italic underline | superscript subscript | formatselect | bullist | code pagebreak | link image | COC | table | removeformat | help",
  formats: {
    editable: {
      inline: "span",
      styles: { borderBottom: "2px solid gray" },
      classes: "mceEditable"
    }
  },
  setup: function (editor) {
    editor.ui.registry.addButton("COC", {
      text: "<b style='font-size:large;font-weight:bold;'>{CC}</b>",
      tooltip: "CopyToClipBoard",
      onAction: function (api) {
        editor.execCommand("Copy");
      }
    });
  },

  toolbar_mode: "floating"
});

.demo-inline {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  line-height: 1.3;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
  padding: 20px 20px 20px 20px;
}
.demo-inline .container {
  background-color: #fafafa;
  margin: -20px -20px 0 -20px;
  padding: 20px;
}

.demo-inline ul,
.demo-inline ol {
  padding-left: 20px;
}
.demo-inline ul {
  list-style: disc;
}
.demo-inline ol {
  list-style: decimal;
}
.demo-inline a {
  text-decoration: underline;
}
.demo-inline img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px 10px 10px;
}
.demo-inline textarea {
  display: none;
}
.demo-inline *[contentEditable="true"]:focus,
.demo-inline *[contentEditable="true"]:hover {
  outline: 2px solid #2276d2;
}

#myeditablediv {
  margin-top: 20px;
  font-family: "Calibri";
  font-size: 16px;
  line-height: 1.1em;
}

/*Component Editable*/
div.FixedComponent {
  text-align: center;
  background-color: #d8d8d8;
  padding: 10px;
}

div.FixedComponent::before {
  content: attr(data-displayname);
}

div[data-prefix]::before {
  content: attr(data-prefix);
  color: #1f477d !important;
  font-weight: bold;
  float: left;
  display: inline-block;
  margin-right: 3px;
}

.componentSuffix::after {
  content: " ]";
  color: #1f477d !important;
  font-weight: bold;
}

div[data-type="content"] {
  min-height: 23px;
  display: inline;
}

div.ComponentWrapper:focus {
  outline: dotted;
}

<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js"></script>

<div class="demo-inline">
  <div id="myeditablediv">
    Hi tiny

    <p class='mceNonEditable'> <b> This is a non editable content</b>
    </p>
    <p> <span class='mceNonEditable'> <b>This part is non editable</b> </span>
      This is a editable content

      <span class='mceNonEditable'> <b>This part is non editable</b> </span>

    </p>
  </div>
</div>

Answer 1

TinyMCE的noneditable插件旨在使内容块不可编辑，但 不是 不可删除。相反，它将不可编辑内容的整个部分视为单个字符。
要停止使用键盘删除内容，您可以使用 Tiny 的事件处理结构来查找某些按键，然后中断/停止它们。这是一个非常简单的例子，说明如何做到这一点:
http://fiddle.tinymce.com/Mvhaab
您需要扩展它以查看光标在内容中的位置，如果按键的结果会删除您想要保留的内容，请仅在这些情况下停止按键。
请注意，此方法不会阻止通过其他方法删除内容，例如将其作为较大选择的一部分删除。