TinyMCE - 添加一個ON/OFF切換開關

我在我的Magento管理部分的文本區域上使用TinyMCE。我有我的TinyMCE編輯器可見的形式，但我想要禁用/重新啓用它的選項。TinyMCE - 添加一個ON/OFF切換開關

我使用jQuery插件版本，所以我添加了一些腳本，這幾乎是工作。但是，它隻影響TinyMCE的第一個實例 - 如果頁面上有任何其他實例，它們不會受到影響。

我用這個例子http://tinymce.moxiecode.com/examples/example_23.php作爲我迄今爲止所做的基礎。但仍然無法弄清楚爲什麼它隻影響一審。有任何想法嗎？這裏是我的代碼：

var $j = jQuery.noConflict(); 
// Add ON OFF toggle switch 
$j(function() { 
$j('textarea').after("<br/><span class=\"toggle form-button\">Toggle TinyMCE</span>"); 
$j("span.toggle").toggle(function(){ 
$j('.wrapper').find('textarea').tinymce().hide(); 
     }, function() { 
$j('.wrapper').find('textarea').tinymce().show(); 
    }); 
});

來源

2009-11-26 Marlon Creative

這是一種脫離實際的高興，但你爲什麼要做$ j（'。wrapper'）。find（'textarea'）？您可以改爲使用$ j（'。wrapper textarea'）。記住jQuery選擇器語法就像CSS一樣工作。 – William 2009-11-26 20:01:42

對不起，我最初確實有這樣的想法，只是在嘗試了一些不同的事情後才忘了將它改回來，看看它們中的任何一個是否能夠工作！ – 2009-11-26 21:14:24

工程確定，如果我重複腳本每個單獨的文本區域，如文本區域：EQ（0），文本區域：EQ（1）等，不知道爲什麼，但它會做。

UPDATE：

它們對TinyMCE的網站jQuery的顯示/隱藏例子並不實際的工作方式。您實際上需要卸載然後重新加載它，而不是隱藏編輯器，否則在提交表單時不會保存「切換」狀態下所做的任何更改。所以，你應該做的事情如下所示：

$(function() { 
    var id = 'tinytextareaID'; // ID of your textarea (no # symbol) 
     $("a.toggle").toggle(function(){ 
      tinyMCE.execCommand('mceRemoveControl', false, id); 
     }, function() { 
      tinyMCE.execCommand('mceAddControl', false, id); 
    }); 
});

來源

2010-01-29 16:51:02

+1。如果您複製該示例並將其關閉，則當您提交表單時，原始textarea將被忽略，並且它的內容會被您編輯器隱藏時的內容替換。 – Dunhamzzz 2011-02-22 15:43:12

在情況下，它可以幫助任何人，我可以說，我從來沒有得到它與jQuery的幫手權工作時，我曾在同一頁上的多個TinyMCE的實例。事實上，我不確定是否有必要使用jquery，因爲您將失去使用tinymce所啓用的「init init」方法的機會。所以，我只是寫了一些函數來處理的轉換：

function showBlogEditor(strItemId){ 
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element 
    if(theeditor && theteditor.initialized){ 
     //you can do something here if you need 
    }else{ 
     tinyMCE.execCommand('mceAddControl', false, strItemId); 
    } 
} 
function hideBlogEditor(strItemId){ 
    if (tinyMCE.getInstanceById(strItemId)) 
    { 
      tinyMCE.execCommand('mceFocus', false, strItemId); 
      tinyMCE.execCommand('mceRemoveControl', false, strItemId); 
    }   
}

而且，我只是使用jQuery幫手初始化停止並初始化這樣的：

/* it is the mode: "none" that matters here. You are initializing the tinymce object without creating a visual manifestation of it. Then the show and hide functions will turn the control on and off */ 
    tinyMCE.init({ 
     theme : "advanced",mode : "exact", 
     mode : "none", 
     plugins : strplgns, 
     theme_advanced_buttons1 : strbtns1, 
     theme_advanced_buttons2 : strbtns2, 
     theme_advanced_buttons3 : strbtns3, 
     content_css : "/css/hlsl.css" 
    });

真的，我浪費的時間後試圖讓它與jQuery的工作，我只是直接使用tinymce對象。由於init只被調用一次，所有的編輯都會看起來和工作一樣。

來源

2013-02-13 18:03:49 lequebecois

爲尋找TinyMCE的4.x版本，你可以使用：

tinymce.EditorManager.execCommand('mceToggleEditor', true, textarea_id);

來源

2015-06-05 10:39:15 Tom

謝謝！我一直在尋找這個！ TinyMCE v3有很多例子，但是v4沒有。 – 2015-09-26 03:33:57

也在尋找這個，謝謝 – 2016-05-14 20:21:55

我們怎樣才能進一步增加這個邏輯：'如果編輯器當前處於打開狀態，將其關閉，否則將其打開？ – 2016-10-24 08:54:41

我的網頁上我的香草HTML「文本區域」和TinyMCE的編輯器之間進行切換。我使用TinyMCE的4 recepies以上不版本4工作了。爲了不失去在這兩種情況下提交textarea的內容，我發現這個解決方案：

<script> 
 
function toggle_tinymce_checkbutton(checkButtonId,strItemId){ 
 
var toggle = $('#'+checkButtonId); // checkButtonId = id of checkbutton w/o # 
 
if(toggle.attr('value') == 'on') { 
 
\t var editor = tinymce.EditorManager.get(strItemId); // strItemId = id of textarea w/o # 
 
\t editor.remove(); 
 
\t toggle.attr('value','off'); 
 
} else { 
 
\t var editor = tinymce.EditorManager.createEditor(strItemId,tinymce_settings); 
 
\t editor.render(); 
 
\t toggle.attr('value','on');} 
 
} 
 
</script>

「tinymce_settings」就是這本字典的編輯選項：

<script> 
 
tinymce_settings = { 
 
\t selector: '#cm_pages_body', 
 
\t height: 300, 
 
\t width:767, 
 
\t statusbar: false, 
 
\t convert_urls: false, 
 
\t valid_children: '+body[style]', 
 
\t plugins: [ 
 
\t  'advlist autolink lists link image charmap print preview anchor', 
 
\t  'searchreplace visualblocks code fullscreen', 
 
\t  'insertdatetime media table contextmenu paste code', 
 
\t  'textcolor', 
 
\t ], 
 
\t toolbar: 'undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code', 
 
\t content_css: [ 
 
\t  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
 
\t  '//www.tinymce.com/css/codepen.min.css' 
 
\t ],}; 
 
</script>

來源

2016-01-30 12:20:56 user3312954

TinyMCE - 添加一個ON/OFF切換開關

回答

相關問題