如何使TinyMCE中的图像可点击

时间:2012-04-10 作者:Sam

我试图在Wordpress前端使用tinyMCE,而不是使用wp\\U编辑器(),因为我需要通过Ajax创建编辑器(据我所知,wp\\U编辑器无法处理这一点)。

是否有人知道他们在Wordpress核心的何处创建了一个功能,可以单击tinyMCE文本区域中的图像来编辑其设置?

或者,如果您知道一种让wp\\u编辑器与Ajax一起工作的方法,那就太棒了。

1 个回复
最合适的回答,由SO网友:ungestaltbar 整理而成

To your primary question:

这是一个tinymce插件,可以在这里找到:wp includes/js/tinymce/plugins/wpeditimage/

我不确定,但我想如果您想将其用于tinymce的非wp实例,就必须重写一些代码。我从来没有试过,但我很肯定它不会开箱即用。

Second question:实际上,让tinymce使用ajax并不难。tinymce的主要问题是:它需要(js)设置(和一些标记),这些设置在调用wp\\u编辑器时生成,并存储在全局js对象tinyMCEPreInit中。mceInit[##编辑器id##]。

(在正常的后期编辑屏幕上打开控制台,通过在控制台中键入对象名称(tinyMCEPreInit)来检查该对象。至少镀铬;Safari工作原理如下)

所以它需要这些设置,当然还有页面中已经存在的所有必要的js/css文件。

此处有两个选项:

干净、好的方法是过于完整,您可以自己构建此设置对象。基本上,您可以从标准的“content”tinymce post edit实例中克隆它(通过在控制台中检查并复制内容)。将此设置重写为php数组,并使用本地化脚本(或其他任何内容)在需要时将其注入。将脚本排队应该很容易,就像wp\\u enqueue\\u script(\'tinymce\');。我必须查找这个,但有一个函数可以加载所有脚本。

其次,黑客的做法:

如果您知道在哪里需要此功能,请在页面加载时创建wp\\U编辑器的隐藏实例。这会处理好所有必要的东西。例如:

echo "<div class=\'remove-afterwards\' style=\'display: none;\'>";
       wp_editor(\'\',\'content\');
echo "</div>";
在文档上。准备好了,如果您认为这个节点“丑化”了您的标记,您可以安全地删除它。你不再需要它了。我们只需要js设置作为参考(请继续阅读)。

Next two steps:

首先:Ajax调用/函数应该执行一个普通的wp\\U编辑器并返回标记。请注意,wp\\U编辑器总是回显其输出,您可以使用php对象缓冲区来防止这种情况,但这取决于您。

追加响应响应响应。wp\\U编辑器为您的页面创建了标记。

第二步,我可以告诉你从哪里开始:

将标记插入页面后,您必须找到textarea的ID,它与wp\\U编辑器功能使用的ID相同,但为了保持动态,您可以执行以下操作

newid = $(\'##container##\').find(\'textarea\').attr(\'id\');
此textarea将由类的div包装。wp editor wrap,我们需要此conatainer节点。像这样的方法应该会奏效:

parent = $(\'#\'+id).closest(\'.wp-editor-wrap\');
这可能发生在添加标记后的ajax成功回调中。现在需要创建一个函数来添加tinymce实例,我将复制我使用的函数。这有点过时,在我对所有这类事情都不太了解的时候,我应该修改它,但它很有效:

    // handles dynamic creation of TinyMCE instances
    tinymce : function(newid, parent) 
    {
        // get settings from native WP Editor 
        var settings = tinyMCEPreInit.mceInit[\'content\'];

        // overwrite new editor id to settings
        settings[\'elements\'] = newid;

        // add changed settings object to tinyMCEPreInit Object
        tinyMCEPreInit.mceInit[newid] = settings;

        // doesn\'t wok without, but don\'t really know what this does
        qtsettings = {
            \'buttons\' : \'\', 
            \'disabled_buttons\' : \'\', 
            \'id\' : newid
        };

        // add qt settings for the new instance as well
        tinyMCEPreInit.qtInit[newid] = qtsettings;

        // create new instance
        var ed = new tinymce.Editor(newid, settings);

        // render new instance
        ed.render();

        // add quicktags
        var qt = new QTags(qtsettings);

        // hackish..set a short delay to reset the new editor to visual mode and hide qt buttons
        // this is necessary :/
        setTimeout( function() {
            $(parent).removeClass(\'html-active\').addClass(\'tmce-active\');
            QTags._buttonsInit(); 
        }, 
        750);
    }
此函数是较大对象的一部分,因此您必须根据需要调整它。

就这样,或者说,这只是一个开始。从来没有从前端尝试过这个。也许在这个前端案例中还有更多的事情要做,或者我在上面的解释中犯了一个错误。如果您不需要Quicktags,可以去掉qt部件。。。诸如此类,你将不得不玩它。然而,它应该给你一个开始游戏的想法:)

结束