不可编辑的内容允许删除。如何限制这个？

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"

});

<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 的事件处理结构来查找某些按键，然后中断/停止它们。您需要展开它以查看光标在内容中的位置，如果按键的结果会删除您想要保留的内容，则仅在这些情况下停止按键。请注意，此方法不会阻止通过其他方法删除内容，例如将其作为更大选择的一部分删除。

Answer 2

编写了一个到目前为止运行良好的 Angular 服务，可能需要针对边缘情况进行一些调整。nonDeletableSelectors包含表示应该不可删除的元素的 CSS 选择器。我注意到显然有一个带有不可编辑元素的 TinyMCE 错误，所以代码比我想象的更复杂。import {Injectable} from '@angular/core';@Injectable({  providedIn: 'root'})export class EditorPreventDeleteService {  constructor() { }  public nonDeletableSelectors = ['.mceNonEditable'];  public preventDelete(editor) {    let self = this;    editor.on('keydown', function(event) {      if (self.keyWillDelete(event)) {        let range = editor.selection.getRng(), selection = editor.selection.getSel();        if (!range.collapsed)          return self.checkSelection(editor, event);        else if (event.keyCode == 8)          self.checkBackspace(editor, event, selection);        else if (event.keyCode == 46)          self.checkDelete(editor, event, selection);      }      return true;    });    editor.on('beforeSetContent', event => {      return self.checkSelection(editor, event);    });    editor.on('dragstart', event => {      if (self.checkNode(event.target, true))        self.cancelEvent(event);    });  }  protected checkNode(node, includeChildren = true) {    if (node && node.nodeType !== Node.TEXT_NODE)      for (let nonDeletableSelector of this.nonDeletableSelectors)        if (node.matches(nonDeletableSelector)            || (includeChildren && node.querySelectorAll(nonDeletableSelector).length > 0))          return true;    return false;  }  protected checkSelection(editor, event) {    const selectedHTMLString = editor.selection.getContent({format : 'html'});    const selectedHTML = new DOMParser().parseFromString(selectedHTMLString, 'text/html').documentElement;    if (this.checkNode(selectedHTML))      return this.cancelEvent(event);    return true;  }  protected checkBackspace(editor, event, selection) {    if (selection.anchorOffset === 0 && this.getPrefixContent(editor, selection).length === 0)      return this.cancelEvent(event);    this.checkCaretDeletion(editor, event, selection, false);  }  protected checkDelete(editor, event, selection) {    this.checkCaretDeletion(editor, event, selection, true);  }  protected checkCaretDeletion(editor, event, selection, forwards = true) { // https://developer.mozilla.org/en-US/docs/Web/API/Selection    let borderingElement = forwards ? selection.anchorNode.nextSibling : selection.anchorNode.previousSibling;    if (selection.anchorNode.nodeType === Node.TEXT_NODE) {      if (this.getTrailingText(selection, forwards, false).length > 0)        return; // not at the border of a text element    } else if (selection.anchorOffset !== (forwards ? selection.anchorNode.childNodes.length : 0)        && this.trimZeroWidthSpaces(selection.anchorNode.textContent).length > 0        && this.checkNode(selection.anchorNode.childNodes.item(selection.anchorOffset + (forwards?0:1))))        return this.cancelEvent(event); // not at the border of anchor, anchor not empty, only neighbouring child is deleted    if (this.checkNode(selection.anchorNode) || this.checkNode(borderingElement))      this.cancelEvent(event);  }  protected getPrefixContent(editor, selection) {    let currentRange = editor.selection.getRng(1), tempRange = currentRange.cloneRange();    tempRange.setStartBefore(editor.getBody().childNodes.item(0));    tempRange.setEndBefore(selection.anchorNode);    editor.selection.setRng(tempRange);    let content = editor.selection.getContent({format: 'html'});    editor.selection.setRng(currentRange);    return this.trimZeroWidthSpaces(content.trim());  }  protected getTrailingText(selection, forwards = true, includeSiblings = false) {    let trailer = '', appendTrailer = function(text) { forwards ? trailer += text : trailer = text + trailer; }    if (selection.anchorNode.nodeType === Node.TEXT_NODE) {      let text = selection.anchorNode.textContent;      appendTrailer(forwards ? text.substr(selection.anchorOffset) : text.substr(0, selection.anchorOffset));    } else {      for (let i=selection.anchorOffset ; i>=0 && i<selection.anchorNode.childNodes.length ; i+=(forwards?-1:1))        appendTrailer(selection.anchorNode.childNodes.item(i).textContent);    }    if (includeSiblings) {      let sibling = selection.anchorNode.previousSibling;      while (sibling) {        appendTrailer(sibling.textContent);        sibling = sibling.previousSibling;      }    }    return this.trimZeroWidthSpaces(trailer);  }  protected cancelEvent(event) {    event.preventDefault();    event.stopPropagation();    return false;  }  protected keyWillDelete(evt) {    let c = evt.keyCode;    if (evt.ctrlKey)      return evt.key == 'x' || [8, 46].includes(c);    return [8, 9, 13, 46].includes(c)        || this.inRange(c, 48, 57)        || this.inRange(c, 65, 90)        || this.inRange(c, 96, 111)        || this.inRange(c, 186, 192)        || this.inRange(c, 219, 222);  }  protected inRange(val, min, max) {    return val >= min && val <= max;  }  protected trimZeroWidthSpaces(text: string) {    return text.replace(/[\u200B-\u200D\uFEFF]/g, '');  }}