Jquery TinyMCE-添加开/关拨动开关

我在Magento管理部分的文本区域使用TinyMCE。我的TinyMCE编辑器从一开始就是可见的，但我想要禁用/重新启用它的选项

我使用的是jQuery插件版本，所以我添加了一些脚本，几乎可以正常工作了。但是，它只影响TinyMCE的第一个实例——如果页面上有任何其他实例，则不会受到影响

我用这个例子作为我到目前为止所做工作的基础。但仍然无法理解为什么它只影响第一个实例。有什么想法吗？这是我的密码：

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

var$j=jQuery.noConflict（）；
//附加开关切换开关
$j（函数（）{
$j（'textarea'）。后面（“
Toggle TinyMCE”）；
$j（“span.toggle”）.toggle（函数（）{
$j（'.wrapper'）.find（'textarea'）.tinymce（）.hide（）；
}，函数（）{
$j（'.wrapper'）.find（'textarea'）.tinymce（）.show（）；
});
});

如果我为每个单独的文本区域重复脚本，比如textarea:eq（0）、textarea:eq（1）等，效果还可以。我不知道为什么，但可以

更新：

他们在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);
    });
});

---

如果它可以帮助任何人，我可以说，当我在同一页面上有多个tinymce实例时，我从来没有让它与jquery助手一起正常工作过。事实上，我不确定使用jquery是否有意义，因为您将失去使用tinymce支持的“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帮助程序进行初始化，如下所示：

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

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

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

---

在我的页面上，我在普通HTML“textarea”和tinymce编辑器之间切换。我用tinymce 4。上面的接收器在版本4中不再工作。为了避免在提交时丢失textarea内容，我找到了以下解决方案：

功能切换_tinymce_checkbutton（checkButtonId，strItemId）{
var toggle=$（'#'+checkButtonId）；//checkButtonId=checkbuttonw/o的id#
if（toggle.attr（'value'）='on'）{
var editor=tinymce.EditorManager.get（strItemId）；//strItemId=w/o文本区域的id#
editor.remove（）；
toggle.attr（'value'，'off'）；
}否则{
var editor=tinymce.EditorManager.createEditor（strItemId，tinymce\u设置）；
render（）；
toggle.attr（'value'，'on'）；}
}

这有点不相关，但为什么要执行$j（'.wrapper'）。查找（'textarea'）？您可以只执行$j（'.wrapper textarea'）。请记住jQuery选择器语法的工作原理与CSS类似。对不起，我本来就有这样的语法，只是在尝试了一些不同的东西之后忘记了将其更改回去，以查看它们是否有任何一个起作用+1.如果复制示例并将其关闭，则在提交表单时，原始文本区域将被忽略，其内容将替换为隐藏时编辑器中的内容。谢谢！我到处找这个！！！TinyMCE v3到处都有示例，但v4没有。我们如何进一步添加此逻辑：

如果编辑器当前处于打开状态，请将其关闭，否则将其打开

？由于此命令切换TinyMCE的可见性，因此知道编辑器当前是否处于启用状态非常有用。这可以通过使用

if（tinymce.EditorManager.get（textarea_id）.hidden==false）{/*执行某些操作*/}

来检查。要删除编辑器实例，请//删除绑定到divs tinymce.remove（'div'）；//删除绑定到textareas tinymce的所有编辑器。删除（'textarea'）；//删除所有编辑器tinymce.Remove（）；//按id tinymce删除特定实例。删除（“#id”）；