2008-12-23

在fckeditor for wordpress样式菜单中使用wp-syntax插件

wp-syntax是wp的语法高亮插件,支持包括了c、python、sql、shell、diff等等在内的大多数程序语法格式,它使用特殊的xml语句对字符串进行对应程序语言的格式化。可以在这里下载。

fckeditor for wordpress是在wordpress上使用的类微软office界面的所见即所得编辑器插件,同时可以通过修改代码定制自己的工具栏。可以在这里下载。


第一步:通过修改fckeditor的样式表文件,加入wp-syntax支持的语法格式。


wp-content/plugins/fckeditor-for-wordpress-plugin/fckeditor/fckstyles.xml


--- fckeditor-for-wordpress-plugin/fckeditor/fckstyles.xml 2008-04-24 09:54:16.000000000 +0800
+++ /var/www/wordpress/wp-content/plugins/fckeditor-for-wordpress-plugin/fckeditor/fckstyles.xml 2008-12-23 00:40:59.000000000 +0800
@@ -60,6 +60,74 @@
<Style name="Subscript" element="sub" />

<Style name="Superscript" element="sup" />

-->

+ <Style name="Computer Code" element="div">

+ <Attribute name="class" value="cuscode" />

+ </Style>

+

+ <Style name="C" element="pre">

+ <Attribute name="lang" value="cpp" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="shell" element="pre">

+ <Attribute name="lang" value="bash" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="diff" element="pre">

+ <Attribute name="lang" value="diff" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="python" element="pre">

+ <Attribute name="lang" value="python" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="perl" element="pre">

+ <Attribute name="lang" value="perl" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="php" element="pre">

+ <Attribute name="lang" value="php" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="xml" element="pre">

+ <Attribute name="lang" value="xml" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="javascript" element="pre">

+ <Attribute name="lang" value="javascript" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="css" element="pre">

+ <Attribute name="lang" value="css" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="sql" element="pre">

+ <Attribute name="lang" value="sql" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="java" element="pre">

+ <Attribute name="lang" value="java" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="ruby" element="pre">

+ <Attribute name="lang" value="ruby" />

+ <Attribute name="line" value="1" />

+ </Style>

+

+ <Style name="php" element="pre">

+ <Attribute name="lang" value="php" />

+ <Attribute name="line" value="1" />

+ </Style>



<Style name="Marker: Yellow" element="span">

<Style name="background-color" value="Yellow" />

@@ -72,7 +140,8 @@
<Style name="Small" element="small" />

<Style name="Typewriter" element="tt" />



- <Style name="Computer Code" element="code" />

+ <!-- <Style name="Computer Code" element="code" />-->

+

<Style name="Keyboard Phrase" element="kbd" />

<Style name="Sample Text" element="samp" />

<Style name="Variable" element="var" />

第二步、由于fckeditor默认把html的特殊字符进行了转义,而wp-syntax不处理这些转义过的html转义符。所以需要把转义符还原为原始的字符串:


wp-content/plugins/wp-syntax/wp-syntax.php


--- wp-syntax/wp-syntax.php 2008-08-24 19:22:16.000000000 +0800
+++ /var/www/wordpress/wp-content/plugins/wp-syntax/wp-syntax.php 2008-12-27 01:05:12.000000000 +0800
@@ -68,6 +68,15 @@
{
global $wp_syntax_token, $wp_syntax_matches;

+ //replace the escape character to origin, which has been replaced
+ //by fckeditor, added by mjxian
+ $match = str_replace("&", "&", $match);
+ $match = str_replace("<", "<", $match); + $match = str_replace(">", ">", $match);
+ $match = str_replace(""", "\"", $match);
+ $match = str_replace(">", ">", $match);
+
+
$i = count($wp_syntax_matches);
$wp_syntax_matches[$i] = $match;

效果图:




TODO:可能还需要在syntax.php的wp_syntax_after_filter函数中重新把没有按语法格式化的特殊字符替换转义符,但没作也没发现什么问题,估计这块wordpress会自动替换,就不作这个工作了。

没有评论: