11

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

我在我们的网站上使用 jQuery 和 TinyMCE。我已经浏览了 TinyMCE 的文档，但恐怕我还是会迷路。我们正在做一个界面，需要在页面的多个位置进行就地编辑。唯一的问题是，它们中的每一个都将在顶部的一个工具栏中具有 TinyMCE 的所有编辑选项。因此，回顾一下，它是多个编辑器（每个都没有自己的工具栏，只是一个编辑或选择文本的地方），并且页面顶部只有一个工具栏来控制当时处于活动状态的任何文本框。

这怎么可能实现？甚至可能吗？任何帮助，任何朝着正确方向的推动，任何关于这个问题的提示/提示/知识都将是一个很大的帮助。

谢谢，詹姆斯

4

5 回答 5

3

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

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

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

然后我在 tinyMCE-settings（对于每个编辑器）中设置 setup 函数，如下所示：

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

这在我的情况下有效 - 编辑器在激活/停用时显示/隐藏工具栏。

于 2010-12-13T15:50:46.727 回答
1

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

我做了类似的事情（有多个文本区域），我按需加载tinyMCE，所以像按需加载然后在完成时销毁（模糊事件）可能是你所追求的。

我不能给你我所有的代码，因为它实际上是我雇主 IP 的一部分，但这里有一个粗略的大纲，希望能有所帮助。tinyMCE_GZ 是位于 tinyMCE 站点之外的 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);
        });
    }
}
于 2010-06-02T15:58:55.433 回答
1

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

您可以将底部的链接（显示、隐藏、粗体、获取内容等）用作菜单（可能需要一些样式）。然后，获取当前焦点所在的 textarea 的 id 并将其传递给菜单 (#current) 并使用它来更改该 textarea。

为了实现您所描述的：

  1. 首先禁用所有单独的 TinyMCE 菜单项。
  2. 一旦它们被禁用，在 HTML 中创建您自己的 TinyMCE 菜单并设置相应的样式。
  3. 确定焦点所在的 TinyMCE 文本区域
  4. 将新菜单中的操作应用于焦点所在的 Textarea

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

首先，初始化 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>

于 2010-06-12T02:34:23.810 回答
1

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

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

虽然还没有用最新版本重新制作这个:(

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

1) 创建您自己的菜单，在活动的 tinymce 编辑器上调用 tinymce 参数。

2）将tinymce工具栏/菜单设置为外部，以便在您聚焦编辑器时出现。然后使用 CSS 将每个工具栏定位到出现在同一个位置。所以看起来只有一个工具栏，但实际上它是多个工具栏出现在同一个地方。

希望有帮助。

于 2010-09-24T23:46:17.513 回答
0

我正在为这个问题提供解决方案，以防有人仍然来这里。您可以使用 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>

无论文本位于 tinymce 的哪个实例中，此按钮都会将文本加粗。尽管此功能的唯一缺点是您必须做很多工作才能在特定按钮打开或关闭时显示其效果。如果您对此不关心，那么这将解决问题。

我希望它有帮助...

于 2016-10-10T13:43:53.343 回答