您的数据结构看起来非常像列表。你遇到困难的原因是因为你试图修复一个修复,这从来都不是一件好事。相反,我建议你寻找其他解决问题的方法。
例如,相反,使用以下内容更符合逻辑:
<ul class="component">
<li>content 1</li>
<li>content 2</li>
</ul>
使用这种结构,您可以实现JQuery手风琴、选项卡、内容块等所有内容
.component {
margin:0;
padding:0;
list-style:none;
}
.component > li {
/* style each list element here
}
或者使用ol-even。然后
coupling this with editor styles to mark it out as different 从普通无序列表中。
要进一步区分它,请使用TinyMCE的额外按钮。
function add_component_button() {
if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') )
return;
if ( get_user_option(\'rich_editing\') == \'true\') {
add_filter(\'mce_external_plugins\', \'add_component_tinymce_plugin\');
add_filter(\'mce_buttons\', \'register_component_button\');
}
}
function register_component_button($buttons) {
array_push($buttons, "|", "componentlist");
return $buttons;
}
function add_component_tinymce_plugin($plugin_array) {
$plugin_array[\'componentlist\'] = get_bloginfo(\'template_url\').\'/custom/editor_plugin.js\';
return $plugin_array;
}
add_action(\'init\', \'add_component_button\');
function my_refresh_mce($ver) {
$ver += 3;
return $ver;
}
add_filter( \'tiny_mce_version\', \'my_refresh_mce\');
这里是editor\\u插件。js公司:
(function() {
tinymce.create(\'tinymce.plugins.componentul\', {
init : function(ed, url) {
ed.addButton(\'componentul\', {
title : \'componentul\',
image : url+\'/component.png\',
onclick : function() {
ed.execCommand(\'mceInsertContent\', false, \'<ul class="component"><li>Start typing here</li></ul>\');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "Component UL",
author : \'Tom J Nowell\',
authorurl : \'http://tomjn.com/\',
infourl : \'http://tomjn.com/\',
version : "1.0"
};
}
});
tinymce.PluginManager.add(\'componentul\', tinymce.plugins.componentul);
})();