VisualEditor安裝筆記

簡述

許多新用戶不會着手大幅度修改，而只是作些細節調整，不過僅僅閱讀源代碼就必須學標記語言了。當咱們的用戶在演示操做時，這把他們嚇走了。早在 2004 年，社羣開始一再認識到必須採用更好的編輯方式。由於人們的請求，更重要的是他們的須要，因此咱們開發了可視化編輯器。Wiki 標記語言讓新人懼怕，這種程度會隨着其餘站點的遷離而加重。若是咱們不開發可視化編輯器，那麼圖表的走勢會在接下來五年中變得更加糟糕。

—MediaWiki.org

近日鄙人搭建了Mediawiki站點，苦於沒有好的wiki編輯器，默認自帶的竟然只有加粗、link、字體等幾個再簡單不過的功能。強大勞動要求讓人深深體會了最喜歡的維基百科等wiki站點背後凝結了多少編輯者的汗水。wiki語言的不友好，也使得維基百科的新用戶助手率與編輯者比例已經迎來了死亡交叉，簡單說就是看的人多，寫的人少。維基基金會官方也意識到了這一點，因而乎2013年開始VisualEditor項目應運而生，較好得解決了這方面需求，下降了編輯Wiki頁面的入門門檻。
VisualEdirot的原理，簡單來講就是經過後臺Parsoid 的程序來承擔把wiki標記轉化成html的任務，同時VisualEditor以插件的形式在MediaWiki中運行，用戶能夠在原來的編輯界面直接使用，編輯者角度上幾乎無學習成本。
經過幾天的研究，實現了插件的成功安裝，過程較爲繁複（開源都這鳥樣，沒辦法），故簡述一下安裝流程，供往後備忘。

優勢

1. 可視化編輯

2. 所見即所得

缺點

1. 安裝複雜

2. 編輯時頁面加載時間較長

3. 默認僅能運用在Namespace 0 （main page）

4. 當前爲測試版本，不知道有什麼坑

安裝步驟

再也不贅述MediaWiki的安裝步驟了，僅說明VisualEditor的安裝方法。
VisualEditor須要2個安裝步驟：
第一，是安裝Parsoid服務，務必注意此處爲Parsoid服務而不是Parsoid插件，僅安裝插件是無效的，VisualEditor是不能使用的（能打開，可是不能保存頁面）。
第二，是安裝VisualEditor插件，配置與Parsoid服務的關聯後啓用。

基本環境

|產品|版本|
|-|-|
|RHEL|7update3|
|MediaWiki|1.28.0|
|PHP|5.6.28 (apache2handler)|
|MySQL|5.6.34|
|ICU|52.1|
建議環境使用bitnami的包安裝，相關環境和基礎包都已經打包，很是方便。
爲了減小麻煩，關閉了防火牆和SElinux，不贅述開啓相關端口、防火牆、布爾值等。

安裝Parsoid

1.配置EPEL源

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

2.安裝基礎包Nodejs、NPM等基礎包

yum install  -y nodejs npm  git policycoreutils-python

3.配置淘寶NPM鏡像源

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

4.從Git倉庫下載Parsoid最新版本

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

5.複製到/opt目錄下

cp -rv ~/parsoid /opt/

6.進入/opt/parsoid目錄

cd /opt/parsoid/

7.安裝Parsoid使用的Node.js包

此處使用淘寶鏡像的cnpm命令，加速包下載。原站點從國內訪問的速度，真是無語了。

cnpm install

8. 修改config.yaml配置

config.yaml 在/Parsoid目錄下，默認是 config.example.yaml文件，自行復制一個。
修改

mwApis:
        - # This is the only required parameter,
          # the URL of you MediaWiki API endpoint.
          uri: 'http://站點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

9. 啓動服務

node bin/server.js

10. 測試驗證

Parsoid啓動後，將自動啓用http服務，能夠經過幾種方式驗證。
第1、主機端口驗證

netstat -tunlp | grep 8000

第2、訪問http://站點IP:8000，正確配置的狀況下能夠見到如下頁面。

11. 設置Parsoid服務自啓動

第1、手工新建parsoid服務環境配置文件
新建配置文件

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

按照一下文件添加內容

PORT=8000
NODE_PATH=/opt/parsoid/node_modules

第2、手工新建parsoid.service服務
新建配置文件

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

按照如下文件添加內容

[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

第3、啓動parsoid.service服務

systemctl start parsoid.service

第4、設置parsoid.service服務自啓動

systemctl enable parsoid.service

安裝VisualEditor

1. 從Git倉庫下載VisualEditor最新版本

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

2. 修改LocalSettings.php配置

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標籤條目了，且相關頁面均爲所見即所得的形式。

參考資料

VisualEditor測試頁面，來源於Mediawiki官網
https://www.mediawiki.org/w/i...
VisualEditor用戶指南，來源於Mediawiki官網
https://www.mediawiki.org/wik...
VisualEditor插件站點（含下載），來源於Mediawiki官網
https://www.mediawiki.org/wik...
Parsoid服務介紹
https://www.mediawiki.org/wik...
Parsoid服務（service）安裝指南
https://www.mediawiki.org/wik...