您的位置:知蚁博客 » Wordpress » Google Syntax Highlighter for WordPress 与 tinyMCE 兼容性问题

Google Syntax Highlighter for WordPress 与 tinyMCE 兼容性问题

作者: 发布时间:2011-04-04 分类:Wordpress 标签: 1,480人浏览

  Google Syntax Highlighter 与 WordPress tinyMCE 的兼容性问题,导致了代码无法高亮。当你在“可视化”和“HTML”两个编辑模式间切换时,你会发现<pre>的 name 属性消失了,这是因为 wordpress 的 tinyMCE 编辑器没有提供 pre 标签的name 属性,所以会被过滤掉。

HTML语言: 知蚁博客 程序设计
//”HTML”编辑模式下的代码
<PRE class=php name=“code”>
    code….
</PRE>

//由”HTML”编辑模式切换到”可视化”模式,然后再切换到”HTML”编辑模式下后的代码
<PRE class=php>
    code….
</PRE>

  解决的方法有两种,一是修改 wordpress 自身的代码,但是不建议这么做,升级的时候会很麻烦;二是修改 Google Syntax Highlighter for WordPress 插件。

1、修改 tinyMCE 的初始化部分代码,文件 wp-admin/includes/post.php

$initArray 变量是用来初始化 tinyMCE 的。我们只需要给其添加上一个变量 ‘extended_valid_elements’ => ‘pre[name|class]‘ ,这样 pre 的 name 属性不会被过滤掉, Syntax Highlighter 也就能正常工作了。

PHP语言: 知蚁博客 程序设计
$initArray = array (
    ‘mode’ => ‘specific_textareas’,
    ‘editor_selector’ => ‘theEditor’,
    ‘width’ => ’100%’,
    ‘theme’ => ‘advanced’,
    ‘skin’ => ‘wp_theme’,
    ‘theme_advanced_buttons1′ => “$mce_buttons”,
    ‘theme_advanced_buttons2′ => “$mce_buttons_2″,
    ‘theme_advanced_buttons3′ => “$mce_buttons_3″,
    ‘theme_advanced_buttons4′ => “$mce_buttons_4″,
    ‘language’ => “$mce_locale”,
    ‘spellchecker_languages’ => “$mce_spellchecker_languages”,
    ‘theme_advanced_toolbar_location’ => ‘top’,
    ‘theme_advanced_toolbar_align’ => ‘left’,
    ‘theme_advanced_statusbar_location’ => ‘bottom’,
    ‘theme_advanced_resizing’ => true,
    ‘theme_advanced_resize_horizontal’ => false,
    ‘dialog_type’ => ‘modal’,
    ‘relative_urls’ => false,
    ‘remove_script_host’ => false,
    ‘convert_urls’ => false,
    ‘apply_source_formatting’ => false,
    ‘remove_linebreaks’ => true,
    ‘gecko_spellcheck’ => true,
    ‘entities’ => ’38,amp,60,lt,62,gt’,
    ‘accessibility_focus’ => true,
    ‘tabfocus_elements’ => ‘major-publishing-actions’,
    ‘media_strict’ => false,
    ‘paste_remove_styles’ => true,
    ‘paste_remove_spans’ => true,
    ‘paste_strip_class_attributes’ => ‘all’,
    ‘wpeditimage_disable_captions’ => $no_captions,
    ‘plugins’ => “$plugins”,
    ‘extended_valid_elements’ => ‘pre[name|class]‘  //这里是加上去的代码
);

2、修改 Google Syntax Highlighter for WordPress 插件,文件:wp-content/plugins/google-syntax-highlighter/Scripts/shCore.js

找到以下代码,将第4行的“name”更改为“title”,pre 的 title 属性不会被过滤,但今后我们就要通过 <pre title=”code”> 这样的方式来实现代码高亮了。

JavaScript语言: 知蚁博客 程序设计
function FindTagsByName(_70,_71,_72){
    var _73=document.getElementsByTagName(_72);
    for(var i=0;i<_73.length;i++){
        if(_73[i].getAttribute(“title”)==_71){
        _70.push(_73[i]);
        }
    }
}

原创文章请注明转载于知蚁博客,本文地址:http://www.letuknowit.com/archives/40

相关文章

访客评论被关闭!

无觅相关文章插件,快速提升流量