代码之家 › 专栏 › 技术社区 › Marlon Creative

TinyMCE-添加开/关拨动开关

tinymce magento jquery

Marlon Creative · 技术社区 · 16 年前

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

4 回复 | 直到 14 年前

Marlon Creative 15 年前

如果我为每个单独的文本区域重复脚本,比如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);
    });
});

Alex K 10 年前

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

lequebecois 13 年前

如果它可以帮助任何人,我可以说,当我在同一页面上有多个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只调用了一次,所以所有的编辑器看起来和工作起来都是一样的。

user3312954 10 年前

在我的页面上,我在普通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_设置”是编辑器选项的字典:

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