2020国产成人精品视频,性做久久久久久久久,亚洲国产成人久久综合一区,亚洲影院天堂中文av色

搜索
分享

dokuwiki將編輯器修改為可視化,并支持代碼高亮和QQ截圖拷貝

 icecity1306 2015-07-18


1:Dokuwiki環(huán)境搭建


1.1:Dokuwiki自帶安裝文件

安裝文件入口:/install.php
界面安裝很方便

1.2:Dokuwiki自帶zh-cn包

2:直接拷貝圖片到編輯器


2.1:自帶編輯器介紹

自帶編輯器不支持所見所得,依靠一些標簽來建立目錄和頁面排榜,盡管標簽很強大,但是對于初學(xué)者或者不熟悉的人來說,比較麻煩.

2.2:更換流程及需求分析思考

思考: 要將編輯器改為所見所得,那么就兩種方法,修改原先的編輯器或者更換編輯器.
流程:
2.2.1:去網(wǎng)上插件模板找找,是否存在這樣的編輯器
2.2.2:更換為其他編輯器
2.2.3:修改原先的編輯器
總結(jié):
我去網(wǎng)上找了,界面的插件倒確實不少,甚至有把FCK作為插件整合進來的,但是依然缺少一個功能就是將圖片拷貝到編輯器里.
如果是自己編寫這樣的編輯器,顯然代價太高最終決定是更換編輯器

2.3:更換編輯器為xheditor

2.3.1:將xheditor下載下來,并放入dokuwiki目錄下的/lib文件夾下,新建一個目錄叫xheditor-1.1.14(目前最新版本為1.1.14)
2.3.2:替換/inc/form.php里的函數(shù)form_wikitext(attrs)

源程序:

  1. <span style="font-size:14px;">function form_wikitext($attrs) {  
  2. // mandatory attributes  
  3. unset($attrs['name']);  
  4. unset($attrs['id']);  
  5. return '<textarea name="wikitext" id="wiki__text" '  
  6. .buildAttributes($attrs,true).'>'.DOKU_LF  
  7. .formText($attrs['_text'])  
  8. .'</textarea>';  
  9. }</span>  


替換程序:

  1. function form_wikitext($attrs) {  
  2. // mandatory attributes  
  3. unset($attrs['name']);  
  4. unset($attrs['id']);  
  5. return '<textarea id="elm1" rows="15" cols="80" style="width:100%" name="wikitext">'.DOKU_LF  
  6. .formText($attrs['_text'])  
  7. .'</textarea>';  
  8. }  


即:采用xheditor編輯器.

2.3.3:在/lib/tpl/dokuwiki/main.php添加xheditor包

  1. <script type="text/javascript" src="<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/xheditor-1.1.14-zh-cn.min.js"></script>  

2.3.4.在/inc/parser/xhtml.php里更改cdata函數(shù)

源程序:
  1. function cdata($text) {  
  2. $this->doc .= $this->_xmlEntities($text);  
  3. }  
替換程序:
  1. function cdata($text) {  
  2. $this->doc.=$text;  
  3. }  
替換原因是:因為以前是純字符編輯器,會將一些特殊符號進行過濾,比如:<>等等.而替換之后的xheditor本身已經(jīng)做了一次過濾了,再次過濾就會導(dǎo)致字符<變成&lt,因此去掉這段之后,就只過濾一次

2.3.5.添加js代碼

  1. $(function(){  
  2. $('#elm1').xheditor({  
  3. localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,  
  4. remoteImgSaveUrl:'<?php echo DOKU_BASE;?>lib/xheditor1-saveremoteimg.php?prefix=<?php echo DOKU_BASE;?>'  
  5. });  
  6. });  


配置php后臺上傳路徑

2.3.6:配置php截圖上傳代碼:

/lib/xheditor-1.1.14/demos/saveremoteimg.php.在文件底部修改代碼:
源程序:
  1. for($i=0;$i<$urlCount;$i++){  
  2. $localUrl=saveRemoteImg($arrUrls[$i]);  
  3. if($localUrl)$arrUrls[$i]=$localUrl;  
  4. }  
  5. echo implode('|',$arrUrls);  


替換程序:
  1. for($i=0;$i<$urlCount;$i++){  
  2. $localUrl=saveRemoteImg($arrUrls[$i]);  
  3. if($localUrl)$arrUrls[$i]=$localUrl;  
  4. }  
  5. foreach($arrUrls as $key=>$vo){  
  6. $arrUrls[$key]=$_GET['prefix'].'lib/xheditor-1.1.14/demos/'.$vo;  
  7. }  
  8. echo implode('|',$arrUrls);  

2.3.7:將上傳的圖片去掉多余的”符號

圖片上傳,發(fā)布之后.在調(diào)用圖片時,會多一個中文”符號,需要修改語言包/inc/lang/zh/lang.php
源程序:
  1. $lang['doublequoteopening'] = '“';  
  2. $lang['doublequoteclosing'] = '”';  


替換程序:
  1. $lang['doublequoteopening'] = '';  
  2. $lang['doublequoteclosing'] = '';  


3:編輯器新加插入代碼功能


3.1:/lib/tpl/dokuwiki/main.php更新js代碼

同之前的上傳整合起來:
新增程序:
  1. <script type="text/javascript">  
  2.        var editor;  
  3.         jQuery(pageInit);  
  4.         function pageInit()  
  5.         {  
  6.             var allPlugin={  
  7.                 Code:{c:'btnCode',t:'插入代碼',h:1,e:function(){  
  8.                     var _this=this;  
  9.                     var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="確定" /></div>';           
  10.                     var jCode=jQuery(htmlCode),jType=jQuery('#xheCodeType',jCode),jValue=jQuery('#xheCodeValue',jCode),jSave=jQuery('#xheSave',jCode);  
  11.                     jSave.click(function(){  
  12.                         _this.loadBookmark();  
  13.                         _this.pasteHTML('<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');  
  14.                         _this.hidePanel();  
  15.                         return false;     
  16.                     });  
  17.                     _this.saveBookmark();  
  18.                     _this.showDialog(jCode);  
  19.                 }}  
  20.             };  
  21.             editor=jQuery('#elm1').xheditor({  
  22.                 plugins:allPlugin,  
  23.                 tools:'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Media,Hr,Emot,Table,|,Source,Print,Fullscreen,Code',  
  24.                 loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',  
  25.                 localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,  
  26.                 remoteImgSaveUrl:'lib/xheditor-1.1.14/demos/saveremoteimg.php?prefix=<?php echo DOKU_BASE;?>',  
  27.                 upLinkUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",  
  28.                 upLinkExt:"zip,rar,txt",  
  29.                 upImgUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",  
  30.                 upImgExt:"jpg,jpeg,gif,png",  
  31.                 upFlashUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",  
  32.                 upFlashExt:"swf",  
  33.                 upMediaUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",  
  34.                 upMediaExt:"wmv,avi,wma,mp3,mid"  
  35.             });  
  36.         }  
  37.     </script>  

3.2加入css和圖片

3.2.1:css因為只有一句話,只是為了新增”插入代碼”功能的一個小圖標而來,因此,可以選擇把這個css插入其他css里,而不必新建一個文件.我選擇插入的css是:/lib/ style/screen.css:新增css:
  1. .btnCode {  
  2. background:transparent url(../images/code.gif) no-repeat 16px 16px;  
  3. background-position:2px 2px;}  


3.2.2:將小圖標 按照css添加路徑放入對應(yīng)css同級目錄下的images文件夾內(nèi),作為插件插入代碼的小圖標.

4:編輯器代碼高亮功能


4.1:引入google插件prettify.js插件

在/lib/tpl/dokuwiki/main.php里引入prettify.js和對應(yīng)的css
  1. <script type="text/javascript" src="<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/prettify/prettify.js"></script>  
  2. <link href="<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/prettify/prettify.css" type="text/css" rel="stylesheet">  

4.2:調(diào)用prettify.js

這里需要注意,調(diào)用prettify.js需要放在xheditor編輯器textarea的后面,放前面會無效.
新增js代碼:
  1. <?php tpl_content() ?>  
  2. <script type="text/javascript">prettyPrint();</script>  

4.3:修改css文件

引入代碼高亮插件后,<pre>標簽在dokuwiki下,會嵌套,導(dǎo)致樣式會出現(xiàn)兩個邊框.
在prettify.css最后面,新增css
新增css文件:
  1. pre pre{box-shadow:none;border:0px;margin:0;padding:0;}  
  2. span{font-style:normal;}  

4.4:修改”/”符號出現(xiàn)

原本的dokuwiki里,文本會過濾掉/符號(這個我試過了,即便是最原始的安裝好dokuwiki后,在編輯器里只要存在”/”符號,都會被過濾掉.根據(jù)wiki語法文檔,/會被認為是字體斜體的標志)
而我們的代碼里,經(jīng)常會出現(xiàn)”//”代表注釋,因此,需要修改dokuwiki代碼.
修改文件/inc/parser/lexer.php:
源程序:
  1. function split($subject, &$split) {  
  2. if (count($this->_patterns) == 0) {  
  3. return false;  
  4. }  
  5. if (! preg_match($this->_getCompoundedRegex(), $subject, $matches)) {  
  6. if(function_exists('preg_last_error')){  
  7. $err = preg_last_error();  
  8. switch($err){  
  9. case PREG_BACKTRACK_LIMIT_ERROR:  
  10. msg('A PCRE backtrack error occured. Try to increase the pcre.backtrack_limit in php.ini',-1);  
  11. break;  
  12. case PREG_RECURSION_LIMIT_ERROR:  
  13. msg('A PCRE recursion error occured. Try to increase the pcre.recursion_limit in php.ini',-1);  
  14. break;  
  15. case PREG_BAD_UTF8_ERROR:  
  16. msg('A PCRE UTF-8 error occured. This might be caused by a faulty plugin',-1);  
  17. break;  
  18. case PREG_INTERNAL_ERROR:  
  19. msg('A PCRE internal error occured. This might be caused by a faulty plugin',-1);  
  20. break;  
  21. }  
  22. }  
  23.   
  24. $split = array($subject, "", "");  
  25. return false;  
  26. }  
  27.   
  28. $idx = count($matches)-2;  
  29. list($pre, $post) = preg_split($this->_patterns[$idx].$this->_getPerlMatchingFlags(), $subject, 2);  
  30.   
  31. $split = array($pre, $matches[0], $post);  
  32.   
  33. return isset($this->_labels[$idx]) ? $this->_labels[$idx] : true;  
  34. }  



替換程序:
  1. function split($subject, &$split) {  
  2. if (count($this->_patterns) == 0) {  
  3. return false;  
  4. }  
  5. if (! preg_match($this->_getCompoundedRegex(), $subject, $matches)) {  
  6. if(function_exists('preg_last_error')){  
  7. $err = preg_last_error();  
  8. switch($err){  
  9. case PREG_BACKTRACK_LIMIT_ERROR:  
  10. msg('A PCRE backtrack error occured. Try to increase the pcre.backtrack_limit in php.ini',-1);  
  11. break;  
  12. case PREG_RECURSION_LIMIT_ERROR:  
  13. msg('A PCRE recursion error occured. Try to increase the pcre.recursion_limit in php.ini',-1);  
  14. break;  
  15. case PREG_BAD_UTF8_ERROR:  
  16. msg('A PCRE UTF-8 error occured. This might be caused by a faulty plugin',-1);  
  17. break;  
  18. case PREG_INTERNAL_ERROR:  
  19. msg('A PCRE internal error occured. This might be caused by a faulty plugin',-1);  
  20. break;  
  21. }  
  22. }  
  23.   
  24. $split = array($subject, "", "");  
  25. return false;  
  26. }  
  27.   
  28. $idx = count($matches)-2;  
  29. list($pre, $post) = preg_split($this->_patterns[$idx].$this->_getPerlMatchingFlags(), $subject, 2);  
  30. if(substr($this->_patterns[$idx].$this->_getPerlMatchingFlags(),0,5)=='(\/\/'){  
  31. $pre='//'.$pre;  
  32. }  
  33. $split = array($pre, $matches[0], $post);  
  34.   
  35. return isset($this->_labels[$idx]) ? $this->_labels[$idx] : true;  
  36. }  


這一步只是會把/不解析,但是仍然會轉(zhuǎn)換為斜體,在修改文件/Inc/parser/xhtml.php:
源程序:
  1. function emphasis_open() {  
  2. $this->doc .= '<em>';  
  3. }  
  4.   
  5. function emphasis_close() {  
  6. $this->doc .= '</em>';  
  7. }  


替換程序:
  1. function emphasis_open() {  
  2. //$this->doc .= '<em>';  
  3. }  
  4. function emphasis_close() {  
  5. //$this->doc .= '</em>';  
  6. }  


這個<em>標簽就是斜體,會默認將/和/之間的字符都帶上這個,把這個給注釋掉.OK.解決

5:效果顯示圖:


4.1:插入代碼:

4.1.1:插入界面

4.1.2:插入整體效果圖



4.1.3:發(fā)布之后效果圖

4.2:截圖拷貝:

4.2.1:隨意截圖

4.2.2:發(fā)布效果

5:總結(jié):


5.1:一款好的內(nèi)容查詢是多么的重要,因為有的時候是使用call_user_func,或者那個調(diào)用的函數(shù)就是一個變量,根本無法按ctrl+追蹤,只能在調(diào)用那個方法的時候把這個變量輸出,然后在用zend自帶的內(nèi)容查詢遍歷文件夾
5.2:編輯器中文界面是原本就有的,只需要選擇對應(yīng)語言包就可以了
5.3:遺憾的是,我感覺自己并沒有很完美的修改它的程序,盡管我的確只是單單修改了斜體這個功能,而沒有影響其他功能.但是我原本是想直接修改傳入正則那段,因為去掉了匹配斜體那段正則,我覺得才是比較完美的作法.因為Doku_LexerParallelRegex類是比較獨立的,正則都是傳入的.但是當(dāng)我打印正則時,實在是太龐大了,所以最終我還是放棄了這個思路.
5.3.1:圖片插入那塊,也是全靠編輯器的功勞,我至今也不理解他能把內(nèi)存的圖片拷貝到編輯器的原理(盡管官網(wǎng)說他是漏洞,慶亮說是一個對象操作,我查查資料研究下.

5.3.2:代碼高亮那塊是采用Google的prettify.js,那塊實際上是用js來修改源代碼,在一些關(guān)鍵字的地方加上一些標簽和css屬性,于是就產(chǎn)生了高亮,關(guān)于這塊,我是比較擔(dān)心兼容性問題的(單個頁面不擔(dān)心,但是wiki也引入一堆js,但是目前看來,我測試了幾次,都沒什么問題,那應(yīng)該不會出現(xiàn)了)

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多