Question

我正在构建一个基于jQuery和Ajax的站点，几乎网站上的每个元素都是用jQuery创建的。

这可能非常有效，因为它释放了许多从服务器生成页面的工作。

我经常遇到的一个问题是插件通常不是为这种编程设计的，元素是在网站加载后创建的。

tinyMCE有一个jQuery版本，但它只是可以立即安装和启动。

var textarea = $("<textarea/>");
and then just play with
textarea.tinymce({ 
     script_url : 'js/tiny_mce/tiny_mce.js',
     theme : "advanced"
     configs:yeah...
});

当我尝试再做一次时，textarea2.tinymce（{ease：peace}）;然后它没有加载，它隐藏了textarea2但是没有显示编辑器，据我所知，因为编辑器已经在DOM中创建了。

我不想删除第一个，我只想发起一个（或更多:)更多。我曾尝试将tinyMCE.init与editor_selector：mceAdvanced1一起使用，但是当我稍后使用jQuery创建$（“”）。addClass（“mceAdvanced1”）时，它不想使用编辑器加载。

或者像这样

var ed = new tinymce.Editor({
    some_setting : 1
});
var textarea = $("<textarea/>");
ed.add(textarea);

我尝试将jQuery版本存储在一个变量中，但如果我不立即附加它就无法工作，并且在创建或克隆它之后无法移动它...

能够将编辑器放在网站上的多个位置而不需要重新加载它会非常好，所以我要求你的帮助以便我能解决这个问题。

感谢您的努力。

修改

由于TinyMCE的jQuery版本没有像我想象的那样工作，我已经改变了我的方法如何解决它，但通过，看到jQuery版本的改进以便你可以使用超过一个例子。解决方案是在页面加载时启动2个不同的编辑器，只是隐藏它们，当创建元素时，只需将编辑器附加到它就可以了。

我就是这样做的，启动编辑器......

tinyMCE.init({
    mode : "exact",
    elements : "popup",
    // General optionss...
});

在我用jQuery构建网站的地方，我只是这样应用它......

tinyMCE.execCommand('mceRemoveControl', false, 'popup');
dd.append($("#popupContainer"));    
$("#popupContainer").show();
tinyMCE.execCommand('mceAddControl', false, 'popup');
tinyMCE.activeEditor.setContent('');

Answer 1

我一直在努力解决类似的问题，并且自从我发现它以来一直在使用livequery plugin。它允许您规避许多与向DOM添加新元素相关的问题。

用法示例如下所示：

// Using the TinyMCE jquery build
$('textarea.wysiwyg').livequery(function () {
    $(this).tinymce({/* your options */});
});

可能有更高效（也可能是详细）的方法，但由于livequery插件所以对all-ajax网站有用，我强烈推荐它。

Answer 2

带有livequery的解决方案正是我所需要的，但是Wesley告诉我们的方式在更改dom并添加新的textarea之后对我不起作用。在尝试调试数小时后，以下解决方案适用于我。 ;）我使用tinyMCE的所有textareas都得到了类“ tinyMceEditor ”，因此在我的情况下，livequery的选择器是“textarea.tinyMceEditor”。

$('textarea.tinyMceEditor').livequery(function () {
    tinyMCE.init({
        mode : "exact",
        elements : $(this).attr('id'),
        theme : "advanced",
    });
});

Answer 3

要使用其他配置创建几个tinymce实例，您可能需要查看此示例：http://tinymce.moxiecode.com/tryit/multiple_configs.php

Answer 4

我也在这里发布：TinyMCE - adding an ON/OFF toggle switch一个适用于此的解决方案。我建议不要使用jquery helper来操作同一页面上的多个tinymce实例。我不相信jquery助手是为此而制作的。只需使用tinyMCE对象，无论如何，它为您提供了一种为所有实例初始化一次的简单方法，如下所示：

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

注意{mode：“none”}这意味着您正在初始化tinyMCE对象但没有创建编辑器。在我的例子中，strbtnsX字符串很长，所以我认为每页初始化一次，而不是每个编辑器一次提供性能提升（但我根本没有测试性能）。在初始化之后，您将使用mceAddControl放在页面上的所有编辑器的外观和功能都相同。然后我只使用简单的show和hide函数来切换编辑器，因为我需要它们：

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帮助程序，请告诉我。经过几十个小时的努力，我没有得到它的工作，所以我只是回到这个简单的解决方案。

TinyMCE - 使用jQuery进行多次配置/编辑

4 个答案: