在TinyMCE中保護DIV元素不被刪除

我想創建一個只能刪除DIV中的內容而不是在WordPress中使用的TinyMCE編輯器中的DIV標籤本身的場景。在TinyMCE中保護DIV元素不被刪除

例如;

<div class="name"> 

content 

</div>

在TinyMCE的編輯，我想用戶能夠刪除他/她的「內容」，但對於退格/刪除鍵，當涉及到刪除他們應該這樣做被禁止被禁用。

我想到的可能是沿線的東西;

<div class="name"> 

<!-- editable --> 

content 

<!-- end editable --> 

</div>

因爲用戶不會看到在TinyMCE的視覺窗格中的HTML - 這可能是可能僅在允許內容爲可編輯，一旦認爲是空全部刪除功能（鼠標/鍵盤）是殘疾人保留div。

我希望這是有道理的，如果不是，請讓我知道，我會嘗試並提供一些進一步的信息。對於潛在的解決方案，我看上去很高，但我不確定解決這個問題的最佳方法。

謝謝。

來源

2012-03-24 userabuser

據我所知，最接近的是NonEditableContent，但是這並不能保護DIV本身免於被刪除。還有一個ReadOnly模式，它不會讓你編輯任何東西。

您可能會掛鉤到TinyMCE以防止刪除受保護的DIV，但我認爲您最好的選擇是在編輯器中不包括DIV，並讓用戶編輯它的內容。更新內容後，你可以用你的平臺，把用戶的內容在div ...

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

來源

2012-03-24 22:49:22 RobIII

Hi Rob，感謝您的回覆。不包括DIV會很容易，但是我使用本文中找到的這種模板定製方法[link]（http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in- wordpress-content-editor /），它允許我根據用戶的各種配置來佈局編輯器。所以不能去除DIV是可用性的關鍵部分。我認爲你對ReadOnly是正確的。我看了NonEditableContent，但它不足。現在的問題是如何掛鉤ReadOnly。 TinyMCE源看起來很險惡。 :) – userabuser 2012-03-25 01:08:55

我不知道這是否是沿着正確的道路 - > [鏈接]（http://www.tinymce.com/wiki.php/Configuration:mode） – userabuser 2012-03-25 01:32:53

嗯，這可能會訣竅的確。沒有想過以這種方式使用它，以前從來沒有這樣做過，所以你可能只想嘗試一下:) – RobIII 2012-03-26 07:59:02

這裏是我使用的解決方案（使用jQuery的DOM操作）：

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

來源

2014-02-07 04:34:47 levi

你好，我有同樣的問題，我用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; 


    }); 



});

來源

2015-04-24 15:48:38 Corepany

我寫了一個受Corepany代碼啓發的插件。

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

它與TinyMCE的的不可編輯的插件，並從理論上使得它，所以你不能刪除不可編輯的區域。

我是爲了自己的目的而做的，但是上傳過來讓有相似需求的人可以使用它。

參見：

https://jsfiddle.net/5a5p5vz7/

用法：

的index.html

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

somefile。js

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

來源

2016-09-02 22:58:58 csga5000

在TinyMCE中保護DIV元素不被刪除

回答

相關問題