DokuWiki安裝+集成markdown編輯器editor.md

安裝

  1. 官網(wǎng)下載安裝包https://www.dokuwiki.org/
  2. 安裝php和nginx yum install -y php70w php70w-gd php70w-xml php70w-fpm nginx
  3. 開機自啟動 systemctl enable nginx php-fpm
  4. 配置nginx
    server {
        listen       80;
        server_name  localhost;
        # Maximum file upload size is 4MB - change accordingly if needed
        client_max_body_size 4M;
        client_body_buffer_size 128k;

        root /dokuwiki;
        index doku.php;

        #Remember to comment the below out when you're installing, and uncomment it when done.
        location ~ /(conf/|bin/|inc/|install.php) { deny all; }

        #Support for X-Accel-Redirect
        location ~ ^/data/ { internal ; }

        location ~ ^/lib.*\.(js|css|gif|png|ico|jpg|jpeg)$ {
             expires 365d;
        }

        location / { try_files $uri $uri/ @dokuwiki; }

        location @dokuwiki {
            # rewrites "doku.php/" out of the URLs if you set the userwrite setting to .htaccess in dokuwiki config page
            rewrite ^/_media/(.*) /lib/exe/fetch.php?media=$1 last;
            rewrite ^/_detail/(.*) /lib/exe/detail.php?media=$1 last;
            rewrite ^/_export/([^/]+)/(.*) /doku.php?do=export_$1&id=$2 last;
            rewrite ^/(.*) /doku.php?id=$1&$args last;
        }

        location ~ \.php$ {
            try_files $uri $uri/ /doku.php;
            include fastcgi_params;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param REDIRECT_STATUS 200;
            fastcgi_pass 127.0.0.1:9000;
        }
    }
  1. 啟動nginx和php-fpm systemctl start php-fpm nginx
  2. 在網(wǎng)站一欄輸入:http://你的ip地址/install.php 在右上角選好語言宏赘,簡體中文zh昏名,按照提示安裝即可印荔。如果打開頁面保存平挑,請修改conf矾瘾、data赫悄、lib目前的權限寺酪。

安裝插件

  1. 新增頁面Add New Page插件

  2. Markdown插件Markdown Page Plugin

  3. 側邊欄

    • 安裝Indexmenu Plugin插件
    • 新建data\pages\sidebar.txt裸准,內(nèi)容如下:
        ===== 導航目錄 =====
        {{indexmenu>..|navbar}}
        ===== 添加新頁面 =====
        {{NEWPAGE}}
    

中文文件名亂碼

修改dokuwiki/conf/local.php在最后一行加上:

$conf['fnencode']='utf-8';

此處是centos系統(tǒng)(系統(tǒng)默認字符編碼utf-8)下修改亂碼梅尤,windows系統(tǒng)請參考文章末尾的原文地址柜思。

集成editor.md

  1. 下載editor.md
    https://github.com/pandao/editor.md/archive/v1.5.0.tar.gz
  2. 解壓到dokuwiki\lib\editor.md\
  3. 替換/inc/form.php里的函數(shù)form_wikitext($attrs),修改return結果
    function form_wikitext($attrs) {
        // mandatory attributes
        unset($attrs['name']);
        unset($attrs['id']);
        $text = str_replace("<markdown>\n",'',$attrs['_text']);
        $text = str_replace("\n</markdown>",'',$text);
        return '<div id="editormd" contenteditable="true"><textarea name="wikitext">'.DOKU_LF.formText($text).'</textarea></div>';
    }

代碼中id="editormd"是后面editor.md實例需要的id

  1. 在/inc/parser/xhtml.php里更改cdata函數(shù)
    function cdata($text) {
        //$this->doc .= $this->_xmlEntities($text);
        return $this->doc.=$text;
    }

替換原因是:因為以前是純字符編輯器,會將一些特殊符號進行過濾,比如:<>等等.而替換之后的xheditor本身已經(jīng)做了一次過濾了,再次過濾就會導致字符<變成&lt,因此去掉這段之后,就只過濾一次

  1. inc/Action/Save.php的
    saveWikiText($ID,con($PRE,$TEXT,$SUF,true),$SUM,$INPUT->bool('minor')); //use pretty mode for con
    替換成
    saveWikiText($ID,con($PRE,"<markdown>\n".$TEXT."\n</markdown>",$SUF,true),$SUM,$INPUT->bool('minor')); //use pretty mode for con
  1. lib/tpl/dokuwiki/main.php添加editor.md包
  • head節(jié)中添加
<link rel="stylesheet" href="<?php echo DOKU_BASE;?>lib/editor.md/css/editormd.min.css" />
  • body節(jié)中添加
    <script src="<?php echo DOKU_BASE;?>lib/editor.md/editormd.js"></script>
    <script type="text/javascript">
    $ = jQuery
        var testEditor;
        $(function(md) {
        if (document.getElementById("editormd")) {
            testEditor = editormd("editormd", {
                width: "100%",
                height: 740,
                path: '<?php echo DOKU_BASE;?>lib/editor.md/lib/',
                syncScrolling : "single",
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "<?php echo DOKU_BASE;?>uploadimg.php",
                onload: function() {}
            });
        }
        });

        window.onload = function() {
            //document.getElementById("editormd").addEventListener('paste', function (event) {
            $("#editormd").on('paste', function(event) {
                //console.log(event);
                var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                for (var index in items) {
                    var item = items[index];
                    //console.log(item);
                    if (item.kind === 'file') {
                        var blob = item.getAsFile();                        
                        var reader = new FileReader();
                        reader.onload = function(event) {                            
                            var base64 = event.target.result;
                            console.log(base64);
                            //ajax上傳圖片
                            $.post("<?php echo DOKU_BASE;?>uploadimg.php", {
                                screenshots: base64
                            }, function(rets) {
                                ret = JSON.parse(rets);
                                //layer.msg(ret.msg);
                                console.log(ret);
                                if (ret.success === 1) {
                                    //新一行的圖片顯示
                                    testEditor.insertValue("\n![](" + ret.url + ")");
                                } else {
                                    alert("截圖上傳失敗:" + ret.message);
                                }
                            });
                        };
                        reader.readAsDataURL(blob);
                    }
                }
            });
        }
    </script>

  1. 圖片上傳支持
    將如下代碼保存到uploadimg.php文件巷燥,放到dokuwiki根目錄下
<?php
if(!defined('DOKU_INC')) define('DOKU_INC', dirname(__FILE__).'/');
require_once(DOKU_INC.'inc/init.php');

$INFO = pageinfo();
$hostpath=getBaseURL(false);
$attachDir='/data/media/editor/';//上傳文件保存路徑赡盘,結尾不要帶/
$maxAttachSize = 2*1024*1024;  //最大上傳大小,默認是2M

function upEditorImg(){
    global $hostpath, $attachDir, $maxAttachSize;
    //獲取文件的大小
    $file_size=$_FILES['editormd-image-file']['size'];
    //echo "$file_size $maxAttachSize";
    if($file_size > $maxAttachSize) {
        echo '{"success":0,"message":"不能上傳大于2M的文件"}';
        return false;
    }

    //獲取文件類型
    $file_type=$_FILES['editormd-image-file']['type'];
    if($file_type!="image/jpeg" && $file_type!='image/pjpeg' && $file_type!="image/png") {
        echo '{"success":0,"message":"圖片格式異常"}';
        return false;
    }

    //判斷是否上傳成功(是否使用post方式上傳)
    if(is_uploaded_file($_FILES['editormd-image-file']['tmp_name'])) {
        //把文件轉存到你希望的目錄(不要使用copy函數(shù))
        $uploaded_file=$_FILES['editormd-image-file']['tmp_name'];

        //我們給每個用戶動態(tài)的創(chuàng)建一個文件夾
        $save_path=$_SERVER['DOCUMENT_ROOT'].$hostpath.$attachDir;
        //判斷該用戶文件夾是否已經(jīng)有這個文件夾
        if(!file_exists($save_path)) {
            mkdir($save_path);
        }

        //$move_to_file=$save_path."/".$_FILES['editormd-image-file']['name'];
        $file_true_name=$_FILES['editormd-image-file']['name'];
        $move_file_name=time().rand(1,1000).substr($file_true_name,strrpos($file_true_name,"."));
        $move_to_file=$save_path.$move_file_name;
        //echo "$uploaded_file   $move_to_file";
        if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file))) {
            //echo $_FILES['editormd-image-file']['name']."上傳成功";
            //echo '{"success":1,"message":"上傳成功", "url":"'.$hostpath.$attachDir.$move_file_name.'"}';
            $result=array(
              'success'=> 1,
              'message'=>'上傳成功',
              'url'=>'editor:'.$move_file_name
            );
            echo json_encode($result);
        } else {
            //echo "上傳失敗";
            echo '{"success":0,"message":"服務器保存文件失敗"}';
        }
    } else {
        //echo "上傳失敗";
        echo '{"success":0,"message":"上傳失敗"}';
        return false;
    }
}

//$_POST= [screenshots] => data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAACcCAYAAABC1CibAAAL6UlEQVR4Ae2dbUiU6RrH...
function upEditorScreenshots(){
    global $hostpath, $attachDir, $maxAttachSize;

    $content = $_POST['screenshots'];

    if (preg_match('/^data:image\/(\w+);base64,(\S+)/', $content, $result)) {
        $file_type = $result[1];
        $base64data = $result[2];

        //echo "$file_type $base64data";
        $save_path = $_SERVER['DOCUMENT_ROOT'].$hostpath.$attachDir;
        if (!is_dir($save_path)) {
            mkdir($save_path, 0777);
        }

        $filedata = base64_decode($base64data);
        $filename = time().rand(1,1000).".".$file_type;
        if (!file_put_contents($save_path . $filename, $filedata)) {
            echo '{"success":0,"message":"服務器保存文件失敗"}';
            return false;
        }
        unset($filedata);

        echo '{"success":1,"message":"上傳成功", "url":"editor:'.$move_file_name.$filename.'"}';
        return true;
    } else {
        echo '{"success":0,"message":"圖片格式異常"}';
        return false;
    }
}

//print_r($_POST);
//print_r($_FILES);

if(isset($_FILES['editormd-image-file'])){
    global $INFO;
    if($INFO['writable'] && !$INFO['locked']) {
        upEditorImg();
    } else {
    echo '{"success":0,"message":"沒有權限"}';
    }
    exit();
}

if(isset($_POST['screenshots'])){
    global $INFO;
    if($INFO['writable'] && !$INFO['locked']) {
        upEditorScreenshots();
    } else  {
    echo '{"success":0,"message":"缰揪,沒有權限"}';
    }
    exit();
}
?>

代碼中添加了權限校驗和兼容dokuwiki獲取圖片url

  1. 修改圖片加載地址
    修改lib/editor.md/lib/marked.min.js文件中img標簽生成的方法陨享,在
    var out='<img src="'+href+'" alt="'+text+'"';

代碼前添加

    if(href.indexOf(':')>0&&href.indexOf("/")<0){href='/lib/exe/fetch.php?cache=&media='+href;}

總結

  • 在原來參考文章基礎上添加了未登錄用戶不能通過editor上傳圖片
  • 針對Markdown Page Plugin插件,修改了圖片顯示問題(dokuwiki的圖片資源是統(tǒng)一通過lib/exe/fetch.php文件獲取的钝腺,需要傳入特殊的參數(shù)namespace:文件名稱)
  • markdown的插件會出現(xiàn)排版不正確問題
  • dokuwiki對中文分詞支持不太好抛姑,集成中文分詞見DokuWiki集成中文分詞SCWS

參考鏈接

dokuwiki安裝使用教程(支持中文、editor.md艳狐、粘貼上傳圖片)

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末定硝,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子毫目,更是在濱河造成了極大的恐慌蔬啡,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镀虐,死亡現(xiàn)場離奇詭異箱蟆,居然都是意外死亡,警方通過查閱死者的電腦和手機粉私,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門顽腾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人诺核,你說我怎么就攤上這事抄肖。” “怎么了窖杀?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵漓摩,是天一觀的道長。 經(jīng)常有香客問我入客,道長管毙,這世上最難降的妖魔是什么腿椎? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮夭咬,結果婚禮上啃炸,老公的妹妹穿的比我還像新娘。我一直安慰自己卓舵,他們只是感情好南用,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掏湾,像睡著了一般裹虫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上融击,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天筑公,我揣著相機與錄音,去河邊找鬼尊浪。 笑死匣屡,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的际长。 我是一名探鬼主播耸采,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼兴泥,長吁一口氣:“原來是場噩夢啊……” “哼工育!你這毒婦竟也來了?” 一聲冷哼從身側響起搓彻,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤如绸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后旭贬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體怔接,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年稀轨,在試婚紗的時候發(fā)現(xiàn)自己被綠了扼脐。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡奋刽,死狀恐怖瓦侮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情佣谐,我是刑警寧澤肚吏,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站狭魂,受9級特大地震影響罚攀,放射性物質發(fā)生泄漏党觅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一斋泄、第九天 我趴在偏房一處隱蔽的房頂上張望杯瞻。 院中可真熱鬧,春花似錦炫掐、人聲如沸又兵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沛厨。三九已至,卻和暖如春摔认,著一層夾襖步出監(jiān)牢的瞬間逆皮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工参袱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留电谣,地道東北人。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓抹蚀,卻偏偏與公主長得像剿牺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子环壤,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355