多个Tinymce编辑器，但只有一个工具栏？

StackOverflow https://stackoverflow.com/questions/2959272

题

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

我在我们的网站上使用jQuery和Tinymce。我已经浏览了Tinymce的文档，但是恐怕仍然迷路了。我们正在执行一个界面，需要在页面中的多个位置进行地位。唯一的事情是，每个工具栏中的每个工具栏中的每一个都将具有所有编辑选择。因此，要回顾一下，它是多个编辑器（每个编辑器都没有自己的工具栏，只是一个可以编辑或选择文本的地方），并且页面顶部只有一个工具栏可以控制当时的任何文本框。

如何实现？有可能吗？任何帮助，朝着正确的方向推动，任何提示/技巧/知识根本就这个问题都是一个很大的帮助。

谢谢，詹姆斯

有帮助吗？

解决方案

我知道有一种方法可以显示工具栏时，当Textarea专注于介绍，然后隐藏在Textarea Blur事件中 - 因此，这可能是一条路线。

我做了类似的事情（有多个textareas），在其中加载了底漆，因此，按需加载，然后在完成（模糊事件）时销毁可能是您所追求的。

我不能给您所有的代码，因为它实际上是我雇主IP的一部分，但这是一个粗略的轮廓，希望能提供帮助。 Tinymce_gz是脱节位点的GZIP的一部分。

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

其他提示

我使用这样的3.x版本（是原型语法）：

首先，我创建了一个工具栏包装器（在我的情况下，我将其附加了位置：固定在文档的顶部：

<div id="externalToolbarWrapper"></div>

然后，我在Tinymce-Settings（对于每个编辑器）中设置设置功能：

[...]
theme_advanced_toolbar_location : "external",
setup : function(ed) {
    ed.onInit.add(function(ed, e) {
        ed.onPostRender.add(function(ed, cm) {
            var toolbar = $(ed.id + '_external');
            // inserts the external toolbar in the external wrapper
            $('externalToolbarWrapper').insert(toolbar.hide());
        });
        ed.onRemove.add(function(ed) {
            if($(ed.id + '_external')) {
                // removes external toolbar
                $(ed.id + '_external').remove();
            }
        });
    });
}

在我的情况下，这起作用了 - 编辑显示/隐藏有关激活/停用的工具栏。

可能还有另一种方式。看看这个示例。 http://tinymce.moxiecode.com/examples/example_23.php

您可以将底部的链接（显示，隐藏，粗体，获取内容等）用作菜单（可能需要一些样式）。然后，将当前焦点的TextArea的ID传递到菜单（#Current），然后使用它来更改Textarea。

为了实现您所描述的内容：

  1. 首先禁用所有独立的Tinymce菜单项。
  2. 禁用它们后，在HTML中创建自己的Tinymce菜单并相应地样式。
  3. 确定焦点中哪些Tinymce Textarea
  4. 将新菜单中的操作应用于专注的文本中心

现在，对于一些代码（可能需要一些调试...）

首先，初始化Tinymce和禁用菜单。

tinyMCE configs 
({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "editable"
    theme_advanced_buttons1 : "",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "botton",
    theme_advanced_statusbar_location : "bottom" });

我认为您还可以在tiny_mce/themes/Advanced/editor_template_src.js中编辑_addtoolbars函数，然后打包它。

然后确定当前使用jQuery绑定的焦点区域的文本区域：

$().ready(function() {
        var current;
        $('.editable').focus(
            current = this.id;
        );
        $('.editable').blur(
            //maybe hide the menu (?)
        );

}

然后使用我们的textareas和菜单创建HTML

<form method="post" action="somepage">  
<div id="independent_menu">
    <!-- The Menu, Please Style Accordingly -->
    <a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a>
    <a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
</div>

<!-- The Text Areas  -->

<textarea class="editable" id="one">Some Text Here</textarea>

<textarea class="editable" id="two">Yet another text area</textarea>

<textarea class="editable" id="three">Final Text Area</textarea>

我用较旧版本的Tinymce做到了这一点：

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197http://examples.dtbaker.com.au/code/tinymce/

但是，还没有使用最新版本重新生产此:(

但基本上有两种方法可以做到：

1）创建自己的菜单，该菜单调用Active Tinymce编辑器上的Tinymce参数。

2）将Tinymce工具栏/菜单设置为外部，以便将其集中在编辑器时出现。然后使用CSS将每个工具栏放置在同一位置。因此，看起来有一个工具栏，但实际上它是在同一位置出现的多个工具栏。

希望有帮助。

我正在为这个问题提供解决方案，以防有人来这里。您可以使用ExecCommand在单击自定义按钮时执行您喜欢的各种文本。例如：

// bold, italic and underline
$('#bold').click(function(){
    tinymce.execCommand('Bold');
});
$('#italic').click(function(){
    tinyMCE.execCommand('Italic');
});
$('#underline').click(function(){
    tinyMCE.execCommand('Underline');
});

//commands for left align, right align and center align
$('#l-a').click(function(){
    tinyMCE.execCommand('JustifyLeft');
});
$('#c-a').click(function(){
    tinyMCE.execCommand('JustifyCenter');
});
$('#r-a').click(function(){
    tinyMCE.execCommand('JustifyRight');
});

//commands for inserting ul or ol
$('#ul').click(function(){
    tinyMCE.execCommand('InsertUnorderedList');
});
$('#ol').click(function(){
    tinyMCE.execCommand('InsertOrderedList');
});

其中#bold，#italic，#ul等是您用于实现样式的HTML元素的ID。例如：

<button id="bold">B</button>

无论文本是什么实例，此按钮都会使文本大胆。尽管此功能的唯一缺点是，您必须做很多工作以在其打开或关闭时在特定按钮上显示效果。如果您不关心，那么这将解决问题。

我希望它有帮助...

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top