摘要：強(qiáng)大勞動(dòng)要求讓人深深體會(huì)了最喜歡的維基百科等站點(diǎn)背后凝結(jié)了多少編輯者的汗水。語言的不友好，也使得維基百科的新用戶助手率與編輯者比例已經(jīng)迎來了死亡交叉，簡(jiǎn)單說就是看的人多，寫的人少。

許多新用戶不會(huì)著手大幅度修改，而只是做些細(xì)節(jié)調(diào)整，不過僅僅閱讀源代碼就必須學(xué)標(biāo)記語言了。當(dāng)我們的用戶在演示操作時(shí)，這把他們嚇走了。早在 2004 年，社群開始一再認(rèn)識(shí)到必須采用更好的編輯方式。因?yàn)槿藗兊恼?qǐng)求，更重要的是他們的需要，所以我們開發(fā)了可視化編輯器。Wiki 標(biāo)記語言讓新人害怕，這種程度會(huì)隨著其他站點(diǎn)的遷離而加劇。如果我們不開發(fā)可視化編輯器，那么圖表的走勢(shì)會(huì)在接下來五年中變得更加糟糕。
                                                                      —MediaWiki.org

近日鄙人搭建了Mediawiki站點(diǎn)，苦于沒有好的wiki編輯器，默認(rèn)自帶的居然只有加粗、link、字體等幾個(gè)再簡(jiǎn)單不過的功能。強(qiáng)大勞動(dòng)要求讓人深深體會(huì)了最喜歡的維基百科等wiki站點(diǎn)背后凝結(jié)了多少編輯者的汗水。wiki語言的不友好，也使得維基百科的新用戶助手率與編輯者比例已經(jīng)迎來了死亡交叉，簡(jiǎn)單說就是看的人多，寫的人少。維基基金會(huì)官方也意識(shí)到了這一點(diǎn)，于是乎2013年開始VisualEditor項(xiàng)目應(yīng)運(yùn)而生，較好得解決了這方面需求，降低了編輯Wiki頁面的入門門檻。
VisualEdirot的原理，簡(jiǎn)單來說就是通過后臺(tái)Parsoid 的程序來承擔(dān)把wiki標(biāo)記轉(zhuǎn)化成html的任務(wù)，同時(shí)VisualEditor以插件的形式在MediaWiki中運(yùn)行，用戶可以在原來的編輯界面直接使用，編輯者角度上幾乎無學(xué)習(xí)成本。
通過幾天的研究，實(shí)現(xiàn)了插件的成功安裝，過程較為繁復(fù)（開源都這鳥樣，沒辦法），故簡(jiǎn)述一下安裝流程，供日后備忘。

可視化編輯

所見即所得

安裝復(fù)雜

編輯時(shí)頁面加載時(shí)間較長(zhǎng)

默認(rèn)僅能運(yùn)用在Namespace 0 （main page）

當(dāng)前為測(cè)試版本，不知道有什么坑

不再贅述MediaWiki的安裝步驟了，僅說明VisualEditor的安裝方法。
VisualEditor需要2個(gè)安裝步驟：
第一，是安裝Parsoid服務(wù)，務(wù)必注意此處為Parsoid服務(wù)而不是Parsoid插件，僅安裝插件是無效的，VisualEditor是不能使用的（能打開，但是不能保存頁面）。
第二，是安裝VisualEditor插件，配置與Parsoid服務(wù)的關(guān)聯(lián)后啟用。

|產(chǎn)品|版本|
|-|-|
|RHEL|7update3|
|MediaWiki|1.28.0|
|PHP|5.6.28 (apache2handler)|
|MySQL|5.6.34|
|ICU|52.1|
建議環(huán)境使用bitnami的包安裝，相關(guān)環(huán)境和基礎(chǔ)包都已經(jīng)打包，非常方便。
為了減少麻煩，關(guān)閉了防火墻和SElinux，不贅述開啟相關(guān)端口、防火墻、布爾值等。

cd /tmp
wget https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
rpm -ivh epel-release-latest-7.noarch.rpm
yum clean all
yum list

yum install  -y nodejs npm  git policycoreutils-python

npm install -g cnpm --registry=https://registry.npm.taobao.org

cd ~
git clone https://gerrit.wikimedia.org/r/p/mediawiki/services/parsoid

cp -rv ~/parsoid /opt/

cd /opt/parsoid/

此處使用淘寶鏡像的cnpm命令，加速包下載。原站點(diǎn)從國(guó)內(nèi)訪問的速度，真是無語了。

cnpm install

config.yaml 在/Parsoid目錄下，默認(rèn)是 config.example.yaml文件，自行復(fù)制一個(gè)。
修改

        mwApis:
        - # This is the only required parameter,
          # the URL of you MediaWiki API endpoint.
          uri: "http://站點(diǎn)IP/mediawiki/api.php"            
          # The "domain" is used for communication with Visual Editor
          # and RESTBase.  It defaults to the hostname portion of
          # the `uri` property below, but you can manually set it
          # to an arbitrary string.
          domain: "localhost"  # optional

node bin/server.js

Parsoid啟動(dòng)后，將自動(dòng)啟用http服務(wù)，可以通過幾種方式驗(yàn)證。
第一、主機(jī)端口驗(yàn)證

netstat -tunlp | grep 8000

第二、訪問http://站點(diǎn)IP:8000，正確配置的情況下可以見到以下頁面。

第一、手工新建parsoid服務(wù)環(huán)境配置文件
新建配置文件

touch /opt/parsoid/parsoid.env
vim /opt/parsoid/parsoid.env

按照一下文件添加內(nèi)容

PORT=8000
NODE_PATH=/opt/parsoid/node_modules

第二、手工新建parsoid.service服務(wù)
新建配置文件

touch /usr/lib/systemd/system/parsoid.servicevim /opt/parsoid/parsoid.env
vim /usr/lib/systemd/system/parsoid.service

按照以下文件添加內(nèi)容

[Unit]
Description=Mediawiki Parsoid web service on node.js
Documentation=http://www.mediawiki.org/wiki/Parsoid
Wants=local-fs.target network.target
After=local-fs.target network.target

[Install]
WantedBy=multi-user.target

[Service]
Type=simple
User=nobody
Group=nobody
WorkingDirectory=/opt/parsoid
EnvironmentFile=-/opt/parsoid/parsoid.env
ExecStart=/usr/local/bin/node /opt/parsoid/bin/server.js
KillMode=process
Restart=on-success
PrivateTmp=true
StandardOutput=syslog

第三、啟動(dòng)parsoid.service服務(wù)

systemctl start parsoid.service

第四、設(shè)置parsoid.service服務(wù)自啟動(dòng)

systemctl enable parsoid.service

cd /opt/mediawiki/mediawiki-1.28.0-0/apps/mediawiki/htdocs/extensions
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git

cd /opt/mediawiki/mediawiki-1.28.0-0/apps/mediawiki/htdocs
vim LocalSettings.php

在 LocalSettings.php的尾部追加以下配置

wfLoadExtension( "VisualEditor" );

// Enable by default for everybody
$wgDefaultUserOptions["visualeditor-enable"] = 1;

// Optional: Set VisualEditor as the default for anonymous users
// otherwise they will have to switch to VE
// $wgDefaultUserOptions["visualeditor-editor"] = "visualeditor";

// Don"t allow users to disable it
$wgHiddenPrefs[] = "visualeditor-enable";

// OPTIONAL: Enable VisualEditor"s experimental code features
#$wgDefaultUserOptions["visualeditor-enable-experimental"] = 1;

綜上安裝部分基本完成。
在原先的編輯頁面上，可以看到VirsualEditor標(biāo)簽條目了，且相關(guān)頁面均為所見即所得的形式。

VisualEditor測(cè)試頁面，來源于Mediawiki官網(wǎng)
https://www.mediawiki.org/w/i...
VisualEditor用戶指南，來源于Mediawiki官網(wǎng)
https://www.mediawiki.org/wik...
VisualEditor插件站點(diǎn)（含下載），來源于Mediawiki官網(wǎng)
https://www.mediawiki.org/wik...
Parsoid服務(wù)介紹
https://www.mediawiki.org/wik...
Parsoid服務(wù)（service）安裝指南
https://www.mediawiki.org/wik...