Schützen Sie das DIV-Element vor dem Löschen in TinyMCE

Lesezeit: 4 Minuten

Ich versuche, ein Szenario zu erstellen, in dem NUR Inhalte innerhalb eines DIV gelöscht werden können und nicht die DIV-Tags selbst im TinyMCE-Editor, der in WordPress verwendet wird.

Zum Beispiel;

<div class="name">

content

</div>

Innerhalb des TinyMCE-Editors möchte ich, dass der Benutzer seinen / ihren “Inhalt” löschen kann, aber dass die Rücktaste / Löschtaste beim Löschen deaktiviert wird, sollte ihm dies untersagt werden.

Ich dachte an etwas in der Art von;

<div class="name">

<!-- editable -->

content

<!-- end editable -->

</div>

Da der Benutzer den HTML-Code im visuellen Bereich von TinyMCE nicht sieht, ist es möglicherweise möglich, dass Inhalte NUR innerhalb bearbeitet werden können, und sobald sie als leer erkannt wurden, werden alle Löschfunktionen (Maus/Tastatur) deaktiviert, um das div beizubehalten.

Ich hoffe, das macht Sinn, wenn nicht, lassen Sie es mich bitte wissen und ich werde versuchen, weitere Informationen bereitzustellen. Ich habe hoch und niedrig nach einer möglichen Lösung gesucht, bin mir aber nicht sicher, wie ich das am besten lösen soll.

Vielen Dank.

Benutzeravatar von csga5000
csga5000

Ich habe ein Plugin geschrieben, das von Corepanys Code inspiriert wurde.

https://github.com/csga5000/tinymce-prevent-delete

Es funktioniert mit dem nicht bearbeitbaren Plugin von tinymce und macht es theoretisch so, dass Sie die nicht bearbeitbaren Bereiche nicht entfernen können.

Ich habe es für meine eigenen Zwecke erstellt, aber hochgeladen, damit jeder mit ähnlichen Bedürfnissen wie ich es verwenden kann.

Sehen:

https://jsfiddle.net/5a5p5vz7/

Verwendungszweck:

index.html

...
<script src="https://stackoverflow.com/questions/9856269/preventdelete.js"></script>
...

somefile.js

tinymce.init({
    ...
    plugins: ["noneditable","preventdelete"]
    ...
})

Hallo, ich habe das gleiche Problem und habe dieses Plugin ohne jQuery geschrieben. Ich hoffe es hilft

//THIS PLUGIN PREVENTS DELETION OF BOOTSTRAP ELEMENTS WHICH HAS DEFINED CLASS
tinymce.PluginManager.add('preventdelete', function(ed, link) {

    var lastContainer;
    //List of bootstrap elements not to delete
    var bootstrapElements = ["col-sm-2","col-sm-4","col-sm-8","col-sm-10"];

    ed.on('keydown', function(evt) {

        var node            = ed.selection.getNode();
        var range           = ed.selection.getRng();
        var startOffset     = range.startOffset;
        var currentWrapper  = range.endContainer.parentElement.className;

          // if delete Keys pressed
          if (evt.keyCode == 8 || evt.keyCode == 46){

             if (startOffset == "0" && bootstrapElements.indexOf(lastContainer)>-1 ){
                evt.preventDefault();
                evt.stopPropagation();
                return false;
             }


          }

        lastContainer = currentWrapper;


    });



});

Das nächste, soweit ich weiß, wirst du mit bekommen Nicht bearbeitbarer Inhalt aber das schützt das DIV selbst nicht vor dem Löschen. Da ist auch ein Schreibgeschützt Modus, in dem Sie überhaupt nichts bearbeiten können.

Sie können sich möglicherweise in TinyMCE einklinken, um das Löschen des geschützten DIV zu verhindern, aber ich denke, Ihre beste Wette besteht darin, das DIV überhaupt nicht in den Editor aufzunehmen und Benutzer nur seinen Inhalt bearbeiten zu lassen. Nach dem Aktualisieren des Inhalts können Sie Ihre Plattform verwenden, um den Inhalt des Benutzers in die Div …

<div class="name">
    <?php echo $content ?>
</div>

  • Hallo Rob, danke für deine Antwort. Es wäre einfach, das DIV nicht einzuschließen, aber ich verwende diese Methode der Vorlagenanpassung, die in diesem Artikel zu finden ist Verknüpfung Dadurch kann ich den Editor basierend auf verschiedenen Konfigurationen für den Benutzer gestalten. Das DIV nicht entfernen zu können, ist also ein wichtiger Teil der Benutzerfreundlichkeit. Ich denke, Sie haben Recht mit ReadOnly. Ich habe mir NonEditableContent angesehen, aber es greift zu kurz. Nun stellt sich die Frage, wie man sich in ReadOnly einklinkt. TinyMCE-Quelle sieht bedrohlich aus. 🙂

    – Benutzermissbraucher

    25. März 2012 um 1:08 Uhr

  • Ich frage mich, ob das auf dem richtigen Weg ist -> Verknüpfung

    – Benutzermissbraucher

    25. März 2012 um 1:32 Uhr

  • Hmmm, das könnte in der Tat funktionieren. Ich habe nicht daran gedacht, es so zu verwenden, und habe es noch nie gemacht, also solltest du es vielleicht einfach ausprobieren 🙂

    – RobIII

    26. März 2012 um 7:59 Uhr

Hier ist die Lösung, die ich verwendet habe (mit jQuery für die Dom-Manipulation):

var settings = {

    init_instance_callback: function (ed) {
        insertWrapper(ed.contentDocument.body); //insert wrapper when editor is initialized
    },

    setup: function (editor) {

        editor.onGetContent.add(function (ed, o) {
            o.content = $(o.content).unwrap().html(); // remove wrapper prior to extracting content
        });

        editor.onKeyUp.add(function (ed, e) {
            insertWrapper(ed.contentDocument.body); // if wrapper has been deleted, add it back
        });
    }
};

function insertWrapper(body){
    if($(body).find('#body-wrapper').length == 0){
        $(body).wrapInner('<div id="body-wrapper" />');
    }
}

new tinymce.Editor( '#my-textarea', settings ).render();

1387440cookie-checkSchützen Sie das DIV-Element vor dem Löschen in TinyMCE

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy