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部件。。。诸如此类,你将不得不玩它。然而,它应该给你一个开始游戏的想法:)