Search code examples
javascripttinymce

Non editable content allowed to delete. How to restrict this?

We have used the TinyMCE editor with "non editable" plugin. we tried to delete the non editable content, it is deleted. How to restrict the delete(delete/backspace) action for non editable content?

Below is my code:

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>

enter image description here enter image description here

Solution

  • TinyMCE's noneditable plugin is designed to make a block of content non-editiable, but not non-deletable. Rather it treats the entire section of non-editable content as a single character.

    To stop content from being deleted with the keyboard, you could use Tiny's event handling structure to look for certain key presses and then interrupt/stop them. Here is a very simple example of how to do that:

    http://fiddle.tinymce.com/Mvhaab

    You would need to expand this to look at where the cursor is located in the content, and if the result of the keypress would delete something you want to preserve, stop the keypress only in those situations.

    Note that this approach will not keep content from being deleted via other methods, such as by removing it as part of a larger selection.