dokuwiki将编辑器修改为可视化,并支持代码高亮和QQ截图拷贝


		Dokuwiki编辑器问题
 
1:Dokuwiki环境搭建
1.1:Dokuwiki自带安装文件
安装文件入口:/install.php
界面安装很方便
1.2:Dokuwiki自带zh-cn包
2:直接拷贝图片到编辑器
2.1:自带编辑器介绍
       自带编辑器不支持所见所得,依靠一些标签来建立目录和页面排榜,尽管标签很强大,但是对于初学者或者不熟悉的人来说,比较麻烦.
2.2:更换流程及需求分析思考
思考:   要将编辑器改为所见所得,那么就两种方法,修改原先的编辑器或者更换编辑器.
流程:  
2.2.1:去网上插件模板找找,是否存在这样的编辑器
       2.2.2:更换为其他编辑器
       2.2.3:修改原先的编辑器
总结:
       我去网上找了,界面的插件倒确实不少,甚至有把FCK作为插件整合进来的,但是依然缺少一个功能就是将图片拷贝到编辑器里.
       如果是自己编写这样的编辑器,显然代价太高
       最终决定是更换编辑器
2.3:更换编辑器为xheditor
       2.3.1:将xheditor下载下来,并放入dokuwiki目录下的/lib文件夹下,新建一个目录叫xheditor-1.1.14(目前最新版本为1.1.14)
       2.3.2:替换/inc/form.php里的函数form_wikitext(attrs)
       源程序:
function form_wikitext($attrs) {
   // mandatory attributes
   unset($attrs['name']);
    unset($attrs['id']);
    return'<textarea name="wikitext"id="wiki__text" '
                 .buildAttributes($attrs,true).'>'.DOKU_LF
                 .formText($attrs['_text'])
                 .'</textarea>';
}
       替换程序:
function form_wikitext($attrs) {
   // mandatory attributes
   unset($attrs['name']);
    unset($attrs['id']);
    return'<textareaid="elm1" rows="15" cols="80"style="width:100%" name="wikitext">'.DOKU_LF
                 .formText($attrs['_text'])
                 .'</textarea>';
}
   即:采用xheditor编辑器.
2.3.3:在/lib/tpl/dokuwiki/main.php添加xheditor包
    <scripttype="text/javascript"src="<?phpecho DOKU_BASE;?>lib/xheditor-1.1.14/xheditor-1.1.14-zh-cn.min.js"></script>
2.3.4.在/inc/parser/xhtml.php里更改cdata函数
源程序:
    functioncdata($text) {
        $this->doc .= $this->_xmlEntities($text);
    }
替换程序:
    functioncdata($text) {
        $this->doc.=$text;
   }
替换原因是:因为以前是纯字符编辑器,会将一些特殊符号进行过滤,比如:<>等等.而替换之后的xheditor本身已经做了一次过滤了,再次过滤就会导致字符<变成&lt,因此去掉这段之后,就只过滤一次
2.3.5.添加js代码
$(function(){
       $('#elm1').xheditor({
              localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,
              remoteImgSaveUrl:'<?phpecho DOKU_BASE;?>lib/xheditor1-saveremoteimg.php?prefix=<?php echoDOKU_BASE;?>'
       });
});
配置php后台上传路径
2.3.6:配置php截图上传代码:
/lib/xheditor-1.1.14/demos/saveremoteimg.php.在文件底部修改代码:
源程序:
for($i=0;$i<$urlCount;$i++){
   $localUrl=saveRemoteImg($arrUrls[$i]);
   if($localUrl)$arrUrls[$i]=$localUrl;
}
echo implode('|',$arrUrls);
替换程序:  
for($i=0;$i<$urlCount;$i++){
   $localUrl=saveRemoteImg($arrUrls[$i]);
   if($localUrl)$arrUrls[$i]=$localUrl;
}
foreach($arrUrlsas $key=>$vo){
    $arrUrls[$key]=$_GET['prefix'].'lib/xheditor-1.1.14/demos/'.$vo;
}
echo implode('|',$arrUrls);
2.3.7:将上传的图片去掉多余的”符号
   图片上传,发布之后.在调用图片时,会多一个中文”符号,需要修改语言包/inc/lang/zh/lang.php
源程序:
$lang['doublequoteopening']    ='“';
$lang['doublequoteclosing']    ='”';
替换程序:
$lang['doublequoteopening']    ='';
$lang['doublequoteclosing']    ='';
3:编辑器新加插入代码功能
3.1:/lib/tpl/dokuwiki/main.php更新js代码
同之前的上传整合起来:
新增程序:
<scripttype="text/javascript">
       vareditor;
        jQuery(pageInit);
        functionpageInit()
        {
            var allPlugin={
                Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
                   var _this=this;
                   var htmlCode='<div><selectid="xheCodeType"><option value="html">HTML/XML</option><optionvalue="js">Javascript</option><optionvalue="css">CSS</option><optionvalue="php">PHP</option><optionvalue="java">Java</option><optionvalue="py">Python</option><optionvalue="pl">Perl</option><optionvalue="rb">Ruby</option><optionvalue="cs">C#</option><optionvalue="c">C++/C</option><optionvalue="vb">VB/ASP</option><option value="">其它</option></select></div><div><textareaid="xheCodeValue" wrap="soft" spellcheck="false"style="width:300px;height:100px;" /></div><divstyle="text-align:right;"><input type="button"id="xheSave" value="确定"/></div>';        
                    varjCode=jQuery(htmlCode),jType=jQuery('#xheCodeType',jCode),jValue=jQuery('#xheCodeValue',jCode),jSave=jQuery('#xheSave',jCode);
                    jSave.click(function(){
                       _this.loadBookmark();
                       _this.pasteHTML('<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');

补充：综合编程 , 其他综合 ,