TinyMCE - 添加ON / OFF切换开关

Question

我在Magento管理部分的文本区域使用TinyMCE。我从一开始就可以看到我的TinyMCE编辑器，但是我希望选项能够禁用/重新启用它。

我正在使用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();
    });
});

Answer 1

如果我为每个单独的文本区域重复脚本，例如textarea：eq（0），textarea：eq（1）等，则工作正常。不知道为什么，但它会这样做。

更新：

他们在tinymce网站上拥有jQuery show / hide示例的方式实际上并不起作用。您实际上需要卸载然后重新加载它，而不是仅仅隐藏编辑器，或者在“切换关闭”中进行的任何更改。提交表单时不会保存状态。所以你应该做以下的事情：

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

Answer 2

对于任何寻找TinyMCE版本4.x的人，您都可以使用：

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

Answer 3

如果它可以帮助任何人，我可以说当我在同一页面上有多个tinymce实例时，我从来没有使用jquery帮助器。事实上，我不确定使用jquery是否有意义，因为你将失去在“init once”中工作的机会。能够实现的方法论。所以我只写了几个函数来处理切换：

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 helper进行初始化和初始化，如下所示：

/* 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只调用一次，所以所有的编辑器都会看起来和工作一样。

Answer 4

在我的页面上，我在vanilla HTML'textarea'和tinymce编辑器之间切换。我使用tinymce 4.上面的接收在版本4中不再起作用。为了不在任何一种情况下松开textarea内容，我找到了这个解决方案：

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

'tinymce_settings'是这个编辑选项词典：

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