多个TinyMCE编辑器，但只有一个工具栏？ [英] Multiple TinyMCE editors, but only one toolbar?

问题描述

我环顾了论坛，但似乎无法找到这个问题的明确答案...

我在我们的网站上使用jQuery和TinyMCE 。我已经阅读了TinyMCE的文档，但我还是迷路了。我们正在做一个界面，需要在页面的多个位置进行就地编辑。唯一的问题是，每个都将在顶部的一个工具栏中提供TinyMCE的所有编辑选择。因此，回顾一下，它是多个编辑器（每个编辑器都没有自己的工具栏，只是编辑或选择文本的地方），页面顶部只有一个工具栏来控制当时活动的文本框。 / p>

如何实现这一目标？它甚至可能吗？任何帮助，任何正确方向的推动，任何关于这个问题的提示/技巧/知识都将是一个很好的帮助。

谢谢，James

解决方案

我知道有一种方法可以在textarea聚焦时显示工具栏，然后隐藏textarea模糊事件 - 这样就可以了是一条路。

我做了类似的事情（有多个textareas），我需要加载tinyMCE，所以像按需加载然后在完成后销毁（模糊事件） ）可能就是你想要的。

我不能给你我所有的代码，因为它实际上是我雇主IP的一部分，但这里是一个粗略的轮廓它，希望应该有所帮助。 tinyMCE_GZ是gzip的一部分，它位于tinyMCE网站之外。

  isTinyMCE_Loaded = false; 
 
 jQuery（'。my-textarea'）。one（click，function（）{
 BuildWYSIWYG.Full（jQuery（this））; 
}）
 
 BuildWYSIWYG.OnDemand：function（callback）{
 tinyMCE_GZ.init（{
 plugins：'style，table，advhr，advimage，advlink，insertdatetime，preview，searchreplace，contextmenu，paste ，全屏，visualchars，nonbreaking，xhtmlxtras，safari，tinybrowser'，
主题：'简单，高级'，
语言：'en'，
 disk_cache：true，
 debug： false 
}，function（）{
 isTinyMCE_Loaded = true; 
 callback（）; 
}）; 
}; 
 BuildWYSIWYG.Full：function（el）{
 settings.elements = jQuery（el）.attr（id）; 
 
 //构建高级的wysiwyg 
 if（isTinyMCE_Loaded）{
 tinyMCE.init（settings）; 
} else {
 BuildWYSIWYG.OnDemand（function（）{
 tinyMCE.init（settings）; 
}）; 
} 
} 
  

I've looked around the forum, but cannot seem to find a definite answer to this problem...

I'm using jQuery and TinyMCE on our website. I've gone through the docs of TinyMCE, but am still getting lost I'm afraid. We're doing an interface that requires edit-in-place in multiple places in the page. The only thing is, each of these will have all the editing choices from TinyMCE in one toolbar at the top. So, to recap it, it's multiple editors (that each have no toolbars of their own, just a place to edit or select the text) and only one toolbar at the top of the page to control whichever textbox is active at the time.

How could this be achieved? Is it even possible? Any help, any push in the right direction, any hints/tips/knowledge at all on this problem would be a great, great help.

Thanks, James

解决方案

I know there is a way to show the toolbar when a textarea is focused into, and then hide on textarea blur event - so that could be one route.

I do a similar sort of thing (with multiple textareas) where i load in demand the tinyMCE, so something like loading on demand and then destroy when finished with (blur event) might be what you're after.

I can't give you all of my code as it's actually part of my employer's I.P, but here is a rough outline to it, hopefully should help. The tinyMCE_GZ is part of the gzip which is off the tinyMCE site.

isTinyMCE_Loaded = false;

jQuery('.my-textarea').one("click", function(){
    BuildWYSIWYG.Full(jQuery(this));
})

BuildWYSIWYG.OnDemand: function(callback){
    tinyMCE_GZ.init({
        plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser',
        themes : 'simple,advanced',
        languages : 'en',
        disk_cache : true,
        debug : false
    }, function(){ 
        isTinyMCE_Loaded = true; 
        callback();
    });
};
BuildWYSIWYG.Full: function(el){   
    settings.elements = jQuery(el).attr("id");

    // Build advanced wysiwyg
    if (isTinyMCE_Loaded){
        tinyMCE.init(settings);
    } else {
        BuildWYSIWYG.OnDemand(function(){
            tinyMCE.init(settings);
        });
    }
}

这篇关于多个TinyMCE编辑器，但只有一个工具栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！