`
xitong
  • 浏览: 6188330 次
文章分类
社区版块
存档分类
最新评论

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 '<textarea id="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包

<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函数

源程序:
function cdata($text) {
$this->doc .= $this->_xmlEntities($text);
}
替换程序:
function cdata($text) {
$this->doc.=$text;
}
替换原因是:因为以前是纯字符编辑器,会将一些特殊符号进行过滤,比如:<>等等.而替换之后的xheditor本身已经做了一次过滤了,再次过滤就会导致字符<变成&lt,因此去掉这段之后,就只过滤一次

2.3.5.添加js代码

$(function(){
$('#elm1').xheditor({
localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,
remoteImgSaveUrl:'<?php echo DOKU_BASE;?>lib/xheditor1-saveremoteimg.php?prefix=<?php echo DOKU_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($arrUrls as $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代码

同之前的上传整合起来:
新增程序:
<script type="text/javascript">
       var editor;
        jQuery(pageInit);
        function pageInit()
        {
            var allPlugin={
                Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
                    var _this=this;
                    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>';         
                    var jCode=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>');
                        _this.hidePanel();
                        return false;   
                    });
                    _this.saveBookmark();
                    _this.showDialog(jCode);
                }}
            };
            editor=jQuery('#elm1').xheditor({
                plugins:allPlugin,
                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',
                loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',
                localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,
                remoteImgSaveUrl:'lib/xheditor-1.1.14/demos/saveremoteimg.php?prefix=<?php echo DOKU_BASE;?>',
                upLinkUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",
                upLinkExt:"zip,rar,txt",
                upImgUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",
                upImgExt:"jpg,jpeg,gif,png",
                upFlashUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",
                upFlashExt:"swf",
                upMediaUrl:"<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/upload.php?immediate=1&prefix=<?php echo DOKU_BASE;?>",
                upMediaExt:"wmv,avi,wma,mp3,mid"
            });
        }
    </script>

3.2加入css和图片

3.2.1:css因为只有一句话,只是为了新增”插入代码”功能的一个小图标而来,因此,可以选择把这个css插入其他css里,而不必新建一个文件.我选择插入的css是:/lib/ style/screen.css:新增css:
.btnCode {
background:transparent url(../images/code.gif) no-repeat 16px 16px;
background-position:2px 2px;}


3.2.2:将小图标 按照css添加路径放入对应css同级目录下的images文件夹内,作为插件插入代码的小图标.

4:编辑器代码高亮功能


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

在/lib/tpl/dokuwiki/main.php里引入prettify.js和对应的css
<script type="text/javascript" src="<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/prettify/prettify.js"></script>
<link href="<?php echo DOKU_BASE;?>lib/xheditor-1.1.14/demos/prettify/prettify.css" type="text/css" rel="stylesheet">

4.2:调用prettify.js

这里需要注意,调用prettify.js需要放在xheditor编辑器textarea的后面,放前面会无效.
新增js代码:
<?php tpl_content() ?>
<script type="text/javascript">prettyPrint();</script>

4.3:修改css文件

引入代码高亮插件后,<pre>标签在dokuwiki下,会嵌套,导致样式会出现两个边框.
在prettify.css最后面,新增css
新增css文件:
pre pre{box-shadow:none;border:0px;margin:0;padding:0;}
span{font-style:normal;}

4.4:修改”/”符号出现

原本的dokuwiki里,文本会过滤掉/符号(这个我试过了,即便是最原始的安装好dokuwiki后,在编辑器里只要存在”/”符号,都会被过滤掉.根据wiki语法文档,/会被认为是字体斜体的标志)
而我们的代码里,经常会出现”//”代表注释,因此,需要修改dokuwiki代码.
修改文件/inc/parser/lexer.php:
源程序:
function split($subject, &$split) {
if (count($this->_patterns) == 0) {
return false;
}
if (! preg_match($this->_getCompoundedRegex(), $subject, $matches)) {
if(function_exists('preg_last_error')){
$err = preg_last_error();
switch($err){
case PREG_BACKTRACK_LIMIT_ERROR:
msg('A PCRE backtrack error occured. Try to increase the pcre.backtrack_limit in php.ini',-1);
break;
case PREG_RECURSION_LIMIT_ERROR:
msg('A PCRE recursion error occured. Try to increase the pcre.recursion_limit in php.ini',-1);
break;
case PREG_BAD_UTF8_ERROR:
msg('A PCRE UTF-8 error occured. This might be caused by a faulty plugin',-1);
break;
case PREG_INTERNAL_ERROR:
msg('A PCRE internal error occured. This might be caused by a faulty plugin',-1);
break;
}
}

$split = array($subject, "", "");
return false;
}

$idx = count($matches)-2;
list($pre, $post) = preg_split($this->_patterns[$idx].$this->_getPerlMatchingFlags(), $subject, 2);

$split = array($pre, $matches[0], $post);

return isset($this->_labels[$idx]) ? $this->_labels[$idx] : true;
}



替换程序:
function split($subject, &$split) {
if (count($this->_patterns) == 0) {
return false;
}
if (! preg_match($this->_getCompoundedRegex(), $subject, $matches)) {
if(function_exists('preg_last_error')){
$err = preg_last_error();
switch($err){
case PREG_BACKTRACK_LIMIT_ERROR:
msg('A PCRE backtrack error occured. Try to increase the pcre.backtrack_limit in php.ini',-1);
break;
case PREG_RECURSION_LIMIT_ERROR:
msg('A PCRE recursion error occured. Try to increase the pcre.recursion_limit in php.ini',-1);
break;
case PREG_BAD_UTF8_ERROR:
msg('A PCRE UTF-8 error occured. This might be caused by a faulty plugin',-1);
break;
case PREG_INTERNAL_ERROR:
msg('A PCRE internal error occured. This might be caused by a faulty plugin',-1);
break;
}
}

$split = array($subject, "", "");
return false;
}

$idx = count($matches)-2;
list($pre, $post) = preg_split($this->_patterns[$idx].$this->_getPerlMatchingFlags(), $subject, 2);
if(substr($this->_patterns[$idx].$this->_getPerlMatchingFlags(),0,5)=='(\/\/'){
$pre='//'.$pre;
}
$split = array($pre, $matches[0], $post);

return isset($this->_labels[$idx]) ? $this->_labels[$idx] : true;
}


这一步只是会把/不解析,但是仍然会转换为斜体,在修改文件/Inc/parser/xhtml.php:
源程序:
function emphasis_open() {
$this->doc .= '<em>';
}

function emphasis_close() {
$this->doc .= '</em>';
}


替换程序:
function emphasis_open() {
//$this->doc .= '<em>';
}
function emphasis_close() {
//$this->doc .= '</em>';
}


这个<em>标签就是斜体,会默认将/和/之间的字符都带上这个,把这个给注释掉.OK.解决

5:效果显示图:


4.1:插入代码:

4.1.1:插入界面

4.1.2:插入整体效果图



4.1.3:发布之后效果图

4.2:截图拷贝:

4.2.1:随意截图

4.2.2:发布效果

5:总结:


5.1:一款好的内容查询是多么的重要,因为有的时候是使用call_user_func,或者那个调用的函数就是一个变量,根本无法按ctrl+追踪,只能在调用那个方法的时候把这个变量输出,然后在用zend自带的内容查询遍历文件夹
5.2:编辑器中文界面是原本就有的,只需要选择对应语言包就可以了
5.3:遗憾的是,我感觉自己并没有很完美的修改它的程序,尽管我的确只是单单修改了斜体这个功能,而没有影响其他功能.但是我原本是想直接修改传入正则那段,因为去掉了匹配斜体那段正则,我觉得才是比较完美的作法.因为Doku_LexerParallelRegex类是比较独立的,正则都是传入的.但是当我打印正则时,实在是太庞大了,所以最终我还是放弃了这个思路.
5.3.1:图片插入那块,也是全靠编辑器的功劳,我至今也不理解他能把内存的图片拷贝到编辑器的原理(尽管官网说他是漏洞,庆亮说是一个对象操作,我查查资料研究下.

5.3.2:代码高亮那块是采用Google的prettify.js,那块实际上是用js来修改源代码,在一些关键字的地方加上一些标签和css属性,于是就产生了高亮,关于这块,我是比较担心兼容性问题的(单个页面不担心,但是wiki也引入一堆js,但是目前看来,我测试了几次,都没什么问题,那应该不会出现了)


6:完整版下载地址:http://download.csdn.net/detail/zouhao619/5014447

分享到：
| Nginx Upstream Keepalive 分析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【dokuwiki纯净修改版】可视化编辑器xheditor+代码高亮+截图直接拷贝

    【dokuwiki纯净修改版】可视化编辑器xheditor+代码高亮+截图直接拷贝 基于http://download.csdn.net/download/zouhao619/5014447 更新为dokuwiki版本为2017-02-19e，xheditor1.2.2 自用，若有问题，请m我，谢谢~！...

    dokuwiki编辑器修改版

    dokuwiki编辑器修改版 采用heditor编辑器,支持QQ截图直接拷贝到编辑器(这个功能只支持谷歌和火狐), wiki语法很蛋疼,有了这个可视化编辑器,就好了.创建页面同样可以使用wiki语法 同时还有提供代码高亮功能,骚年们,你...

    dokuwiki 支持editor.md编辑器编辑

    dokuwiki 支持editor.md编辑器编辑 使用MarkDown 编辑文档， 实时预览编辑内容 ， 支持复制粘贴图片，

    文档管理Markdown文件自动实时同步转换到dokuwiki的一种方法

    dokuwiki中编辑器并非所见即所得，编辑不方便； 离线的markdown使用typora等工具编辑方便 dokuwiki可以全局搜索和查看； 本地离线mk文档不能全局搜索 dokuwiki集中管理文档； 本地离线文档可能放在不同的多个目录

    DokuWiki v2018.04.22a "Greebo".rar

    内置的访问控制列表和认证连接器使DokuWiki 在企业环境下特别有用，由充满活力的社区贡献的众多插件则令它拥有比传统维基更广阔的应用范围。DokuWiki不需要数据库，直接采用文本文件直接存储。 支持超过 50 种语言 ...

    dokuwiki 插件.zip

    安装的dokuwiki需要的插件

    集成editor.md的dokuwiki（支持markdown）

    集成editor.md的dokuwiki（支持markdown）

    dokuwiki-master

    DokuWiki程序小巧而功能强大、灵活，适合中小团队和个人网站知识库的管理。 DokuWiki可以与多种CMS程序进行整合，例如WordPress、XOOPS、PostNuke等。由于这个原因，很多Blog作者对DokuWiki比较感兴趣。DokuWiki不...

    桌面Wiki编辑器metanomon.zip

    metanomon 是一个体验版的 DokuWiki 系统的桌面编辑器，可以你通过桌面软件编辑 Wiki。 标签：metanomon

    dokuwiki with editor.md

    修改 dokuwiki（适合开发类的最好的wiki） 支持 editor.md（国人做的最好的markdown）编辑

    dokuwiki.zip

    DokuWiki是一个开源wiki引擎程序，运行于PHP环境下。DokuWiki程序小巧而功能强大、灵活，适合中小团队和个人网站知识库的管理。

    dokuwiki-awindows安装说明

    dokuwiki-awindows安装说明，安装环境要求

    dokuwiki插件

    dokuwiki插件

    linux+dokuwiki搭建

    内含SSH+Ftp+Apache+Mysql+PHP+dokuwiki安装方法,文档和安装包都在里面了，Free的一塌糊涂，够全了吧，自已测过好用的。

    dokuwiki最新稳定版(20180312)

    dokuwiki最新的稳定版，可以在windows或者linux上面搭建，个人用或者公司用都可以，轻量、易安装、免费、便于管理

    Joomla!1.5与Dokuwiki的完全整合方案

    本教程主要是演示Joomla! 1.5.10与Dokuwiki版本之间的整合过程。

    dokuwiki安装包

    dokuwiki安装包

    php开源Wiki--dokuwiki下载

    内置的访问控制列表和认证连接器使 DokuWiki 在企业环境下特别有用，由充满活力的社区贡献的众多插件则令它拥有比传统维基更广阔的应用范围。 在选择Wiki软件时，Dokuwiki是一个受欢迎的选项，它比起同类软件有多个...

    dokuwiki.tgz

    docuwiki 轻量化的wiki管理，PHP系统， 小巧实用。 公司搭建知识库的首选

    dokuwiki2wikijs

    它将使用pandoc将所有当前页面转换为Markdown，并将它们存储在与dokuwiki安装相同的结构中。 该自述文件可能不是最新的，并且代码质量也不符合标准，因为这是我们自己使用的脚本。 （尽管欢迎您使用和修改它。） ...

Magicbox
Global site tag (gtag.js) - Google Analytics