是否可以为自定义帖子类型使用多个所见即所得的编辑器?例如,如果我有一个2列的布局,我想为一个列使用一个编辑器,而对另一列使用另一个编辑器。
是否可以为自定义帖子类型使用多个所见即所得的编辑器?例如,如果我有一个2列的布局,我想为一个列使用一个编辑器,而对另一列使用另一个编辑器。
Answers:
假设您的自定义帖子类型称为Properties
,您将使用类似于以下代码的方式添加一个框以容纳您的其他tinyMCE编辑器:
function register_meta_boxen() {
add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
"properties", "normal", "high");
}
add_action('admin_menu', 'register_meta_boxen');
wysiwyg-editor-2
是meta框将要应用到它的ID,是meta框将具有Second Column
的标题,second_column_box
是将打印出meta框的HTML的函数,properties
是我们的自定义帖子类型,normal
是meta框的位置,并high
指定应在页面中尽可能高地显示它。(通常在默认的tinyMCE编辑器下面)。
然后,以这作为最基本的示例,您必须将tinyMCE编辑器附加到文本区域。我们仍然必须定义second_column_box
函数,该函数将为meta框打印HTML,因此这和任何执行此操作的地方一样好:
function second_column_box() {
echo <<<EOT
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tinymce").addClass("mceEditor");
if ( typeof( tinyMCE ) == "object" &&
typeof( tinyMCE.execCommand ) == "function" ) {
tinyMCE.execCommand("mceAddControl", false, "tinymce");
}
});
</script>
<textarea id="tinymce" name="tinymce"></textarea>
EOT;
}
我不确定要解决哪些问题。tinyMCE编辑器将嵌套在一个metabox中,这可能不是理想的选择,并且它不具有在HTML和Visual编辑模式之间切换以及普通后期编辑器具有的媒体插入命令的功能。切换模式似乎被定义为第一个参数是ID的函数,但它似乎也已编码到wp-tinymce脚本中。可以使用内置的tinyMCE函数来执行此操作,但这会在完整的tinyMCE和基本文本区域之间更改文本区域,而无需任何WP HTML插入按钮。
首先:非常感谢给@Thomas麦当劳为他的答案 ; 我需要弄清楚@Paul Sheldrake提出的相同问题,Thomas的代码使我朝着正确的方向开始。
不幸的是,然后我陷入了困境,因为我需要在侧边的metabox中使用TinyMCE,因此需要将布局从默认布局更改为更简单,更小的布局。我几乎到处都在寻找解决方案,尤其是在MoxieCode TinyMCE Wiki和TinyMCE技巧与方法论坛上,却一无所获!1一切我发现解释了如何设置theme
,width
,height
等使用tinyMCE.init({...})
但显然你不能使用,当您使用tinyMCE.execCommand("mceAddControl")
。
当我在汉密尔顿·蔡(Hamilton Chua)的一页上浏览多个TinyMCE 3实例的文章时,我感到很沮丧,他把它钉了!他的解决方案是tinyMCE.settings
在调用之前分配tinyMCE.execCommand("mceAddControl")
,例如:
<?php
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#{$id}").addClass("mceEditor");
if ( typeof( tinyMCE ) == "object" &&
typeof( tinyMCE.execCommand ) == "function" ) {
tinyMCE.settings = {
theme : "advanced",
mode : "none",
language : "en",
height:"200",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""
};
tinyMCE.execCommand("mceAddControl", true, "{$id}");
}
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;
可悲的是,这确实并不难,但是我找不到其他任何地方的文档。几乎没有其他人遇到此问题,这真是令人惊讶。
所以无论如何,以上代码以我的客户所需的格式/布局生成了以下第二个TinyMCE:
(来源:mikeschinkel.com)
因此,如果您使用上面的@Thomas McDonald代码,则发现您有任何需要修改布局的内容,请务必查看Hamilton Chua的精彩文章(感谢Ham!):
PS:如果您做某事甚至略有错误,TinyMCE可能根本不会显示。例如,在我的情况下,我theme: "simple"
起初使用时一无所获,我花了一个多小时才意识到我需要使用theme: "advanced"
。因此,如果您发现TinyMCE无法正常工作,请务必尝试进行更改,这可能是类似的问题。(顺便说一句,我没有尝试过其他主题,也没有探索其他可用主题;如果您发现其他有用的主题,请在下面发表评论。)
1:非常令人沮丧!在使用WordPress答案一个多月之后,我现在希望能以与此处相同的质量水平找到我所有问题的答案,而在其他地方,我通常会感到失望!
$script
追平比赛,而且您的Heredoc也没有结束。EOT;
。除了小错误,这是一个很好的工作示例。;)
我只是通过将“ theEditor”作为类属性添加到textarea来实现的:
<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>