DIV 요소가 TinyMCE 내에서 삭제되지 않도록 보호

DIV 요소가 TinyMCE 내에서 삭제되지 않도록 보호

WordPress에서 사용하는 TinyMCE 에디터에서는 DIV 태그 자체가 아닌 DIV 내의 콘텐츠만 삭제할 수 있는 시나리오를 작성하려고 합니다.

예를 들어,

<div class="name">

content

</div>

TinyMCE 에디터 내에서 사용자가 자신의 "콘텐츠"를 삭제할 수 있도록 하고 싶지만, 백스페이스/삭제 키를 삭제할 때 비활성화하려면 이를 금지해야 합니다.

나는 아마도 다음과 같은 것들을 생각해 냈다.

<div class="name">

<!-- editable -->

content

<!-- end editable -->

</div>

TinyMCE Visual 페인에 HTML이 표시되지 않기 때문에 안에 있는 콘텐츠만 편집할 수 있으며 빈 콘텐츠로 인식되면 모든 삭제 기능(마우스/키보드)이 비활성화되어 div가 유지됩니다.

이것이 타당하기를 바랍니다.그렇지 않다면 저에게 알려주시면 더 많은 정보를 제공해 드리겠습니다.나는 가능한 해결책을 찾기 위해 온갖 방법을 찾아봤지만, 이 문제를 해결하기 위한 최선의 방법을 모르겠다.

감사해요.

Corepany의 코드에서 영감을 얻은 플러그인을 작성했습니다.

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

Tinymce의 편집 불가능한 플러그인과 함께 작동하며 이론적으로 편집 불가능한 영역을 제거할 수 없도록 만듭니다.

나만의 목적을 위해 만들었는데, 저와 비슷한 사람이면 누구나 사용할 수 있도록 올렸습니다.

참조:

https://jsfiddle.net/5a5p5vz7/

사용방법:

index.displaces를 표시합니다.

...
<script src="preventdelete.js"></script>
...

somefile.displaces 를 지정합니다.

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

안녕하세요 저도 같은 문제가 있어서 이 플러그인을 jQuery 없이 작성했습니다.도움이 되었으면 좋겠다

//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;


    });



});

가장 가까운 것은 NonEditableContent입니다만, DIV 자체를 삭제로부터 보호하는 것은 아닙니다.아무것도 편집할 수 없는 읽기 전용 모드도 있습니다.

보호된 DIV를 삭제하지 않도록 TinyMCE에 접속할 수도 있지만, 편집기에 DIV를 전혀 포함하지 않고 사용자가 내용을 편집하도록 하는 것이 최선이라고 생각합니다.콘텐츠를 업데이트한 후 플랫폼을 사용하여 사용자의 콘텐츠를 div에 넣을 수 있습니다.

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

다음은 제가 사용한 해결책입니다(dom 조작에 jQuery를 사용).

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();

언급URL : https://stackoverflow.com/questions/9856269/protect-div-element-from-being-deleted-within-tinymce