我想在新帖子页面上为tinyMCE编辑器添加一个按钮。使用this toturial我设法让按钮完美运行,但有些东西我无法弄清楚。当您插入"更多"标签,图像将附加到html与适当的'背景图像'。见截图:
但是当你切换到&#39; Text&#39;模式有一个像这样的html评论:<!--more-->
。
我可以在html中添加图片,但在&#39; Text&#39;模式有一个img
标签。
我希望得到类似的内容:<!--my-custom-tag-->
wordpress如何设法做到这一点?或者我怎样才能在tinyMCE编辑器上附加自定义标签?
答案 0 :(得分:3)
我找到了答案。您需要在编辑器对象上添加BeforeSetContent
和PostProcess
个事件(正如我之前提到的,首先按照this toturial添加按钮):
tinymce.create('tinymce.plugins.MyPlugin', {
init: function(editor, url) {
// Code to add the button...
// Replace tag with image
editor.on( 'BeforeSetContent', function( e ) {
if ( e.content ) {
if ( e.content.indexOf( '<!--my-custom-tag-->' ) !== -1 ) {
e.content = e.content.replace( '<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />');
}
}
});
// Replace image with tag
editor.on( 'PostProcess', function( e ) {
if ( e.content ) {
if ( e.content.indexOf( '<!--my-custom-tag-->' ) !== -1 ) {
e.content = e.content.replace( '<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />';
}
}
});
}
});
答案 1 :(得分:0)
或者你可以制作一个短代码。我总是使用它你可以写你自己的代码让你理解它。很少甚至没有从tinymce写jQuery!
示例强>
function oex_toggle_ul($atts, $content = null){
extract(shortcode_atts(array(
),$atts));
return '<ul>'.do_shortcode( $content ).'</ul>';
}
function oex_toggle($atts, $content = null){
extract(shortcode_atts(array(
'titel' => '',
'open' => 'closed'
),$atts));
return '<li class="'.$open.'"><a href="#">'.$titel.'<span></span></a><ul class="'.$open.'">'.do_shortcode( $content ).'</ul></li>';
}
https://codex.wordpress.org/Function_Reference/add_shortcode