這篇文章于2018年的1月份發(fā)布于本人的網(wǎng)站，當(dāng)時偷懶，有部分內(nèi)容沒有寫完整。直到最近重新安裝可視化編輯器才發(fā)現(xiàn)：安裝過程并不是太過復(fù)雜，基本上只要你的Parsoid安裝成功并且能夠運(yùn)行，那么離成功也就不遠(yuǎn)了，而所缺的就是幾個檢測結(jié)果和圖片。另外被restbase給迷惑了，其實(shí)并不是必須的。

---

MediaWiki的可視化編輯器從2011年5月立項(xiàng)開始，發(fā)展到至今快6個年頭，而真正走入大眾視野卻是在2017年的年中。目前維基百科的默認(rèn)編輯器就是VisualEditor，它的所見即所得的特性提高了用戶的體驗(yàn)，降低了入門門檻并提升了編輯維基的樂趣。
VisualEditor的原理，簡單來說就是通過后臺Parsoid 的程序來承擔(dān)把wiki標(biāo)記轉(zhuǎn)化成html的任務(wù)，同時VisualEditor以插件的形式在MediaWiki中運(yùn)行，用戶可以在原來的編輯界面直接使用，編輯者角度上幾乎無學(xué)習(xí)成本。
而它的安裝難度要大于其他擴(kuò)展程序，主要也就在于需要Parsoid服務(wù)（它是一個基于Nodejs的解析器服務(wù)。 它被許多MediaWiki擴(kuò)展使用，包括VisualEditor，Flow，內(nèi)容翻譯和其他應(yīng)用程序）的支持。而官方文檔上除了有Ubuntu和Debian的安裝方法外（基本上屬于自動安裝），沒有給出CentOS的安裝方法。
本文以指導(dǎo)如何在CentOS7下安裝VisualEditor。

提示：

• 在安裝VisualEditor前請先確保你的MediaWiki已正確安裝，并能編輯頁面。
• 文中的MeidaWiki版本為1.30（部分后補(bǔ)圖片為1.34版的），皮膚為Vector（VisualEditor目前已知兼容的皮膚為：Vector、MonoBook、Apex和Minerva）

一、安裝Parsoid

這是為在沒有安裝Parsoid的情況下，系統(tǒng)提示的錯誤信息。你雖然能夠看到一個可視化編輯器的樣式卻無法使用。

1、安裝依賴關(guān)系

要安裝Parsoid服務(wù)并配置VisualEditor，我們需要在系統(tǒng)上安裝一些CentOS軟件包。 具體來說，我們將安裝Nodejs，npm，vim和git。
使用下面的yum命令安裝所有需要的軟件包。

yum -y install nodejs npm vim-enhanced git

一定要確保所有的軟件包和依賴項(xiàng)已經(jīng)安裝（如果你使用寶塔面板，那么在軟件商店中安裝PM2管理器，并且選擇你的Node版本）。

2、安裝并配置Parsoid

Parsoid可以安裝在單獨(dú)的MediaWiki服務(wù)器上。 但是對于本教程，我們默認(rèn)是將MediaWiki和Parsoid安裝在同一個CentOS 7服務(wù)器。
現(xiàn)在，由于我們使用的是CentOS 7服務(wù)器，因此我們需要手動安裝Parsoid服務(wù)，因?yàn)楣俜杰浖鼉H適用于基于Ubuntu / Debian的操作系統(tǒng)。
因此，首先創(chuàng)建一個新的/ opt / parsoid目錄，并使用git命令克隆最新的parsoid，如下所示。

mkdir -p /opt/parsoid git clone https://gerrit.wikimedia.org/r/mediawiki/services/parsoid /opt/parsoid

本截圖采用的git地址比較老，在上面的代碼中已更新為官方新的地址

現(xiàn)在進(jìn)入“/ opt / parsoid”目錄，使用下面的npm命令安裝Parsoid服務(wù)。

cd /opt/parsoid npm install

安裝完成后，您將得到如下結(jié)果。

接下來，通過編輯相應(yīng)的配置文件來配置Parsoid服務(wù)。
將示例配置“l(fā)ocalsettings.example.js”復(fù)制到“l(fā)ocalsettings.js”，然后使用vim編輯該文件。

cp localsettings.example.js localsettings.js vim localsettings.js

取消注釋“parsoidConfig.setMwApi”行，并使用MediaWiki API URL更改“uri”值，如下所示。

exports.setup = function(parsoidConfig) {// Do something dynamic with `parsoidConfig` like,parsoidConfig.setMwApi({uri: 'http://wiki.mindseed.cn/api.php',});};

保存并退出。

注：此步驟非必須，而且默認(rèn)配置文件關(guān)閉了調(diào)用localsettings.js文件的功能的，除非你的Parsoid和MediaWiki不在同一個服務(wù)器上。

現(xiàn)在將'config.example.yaml'配置復(fù)制到'config.yaml'并用vim編輯器進(jìn)行編輯。

cp config.example.yaml config.yaml vim config.yaml

在“mwApis”行（第34行）上，使用MediaWiki API URL和“域”值更改“uri”值，并使用你自己的域名。

mwApis:- # This is the only required parameter,# the URL of you MediaWiki API endpoint.uri: 'http://wiki.mindseed.cn/api.php'# The "domain" is used for communication with Visual Editor# and RESTBase. It defaults to the hostname portion of# the `uri` property above, but you can manually set it# to an arbitrary string. It must match the "domain" set# in $wgVirtualRestConfig.domain: 'wiki.mindseed.cn' #optional

uri中的地址請復(fù)制到瀏覽器檢驗(yàn)一下，在我的網(wǎng)站中api.php文件是位于網(wǎng)站根目錄下的，如果你將MediaWiki安裝在網(wǎng)站的某個子目錄下（如Wiki），那么請將uri改為http://你的網(wǎng)站域名/wiki/api.php。當(dāng)然，Parsoid和Mediawiki安裝于同一個服務(wù)器的話，也可以直接用localhost代替域名。

保存并退出。
接下來，我們將Parsoid配置為一項(xiàng)服務(wù)。 為此，轉(zhuǎn)至“/ etc / systemd / system”目錄并創(chuàng)建一個名為“parsoid.service”的新服務(wù)文件

cd /etc/systemd/system/ vim parsoid.service

粘貼下面的Parsoid服務(wù)配置。

[Unit]Description=Mediawiki Parsoid web service on node.jsDocumentation=http://www.mediawiki.org/wiki/ParsoidWants=local-fs.target network.targetAfter=local-fs.target network.target[Install]WantedBy=multi-user.target[Service]Type=simpleUser=rootGroup=rootWorkingDirectory=/opt/parsoidExecStart=/usr/bin/node /opt/parsoid/bin/server.jsKillMode=processRestart=on-successPrivateTmp=trueStandardOutput=syslog

注意：如果你使用的是nvm方式安裝Node，那么ExecStart=/usr/bin/node這行需要修改成實(shí)際的地址（我的地址為/usr/local/n/versions/node/版本號/bin/node），否則你的parsoid是沒有辦法運(yùn)行起來的。至于用戶和用戶組可以根據(jù)自己的需要新建一個專用的。

systemctl daemon-reload

現(xiàn)在，啟動Parsoid服務(wù)，并使其在系統(tǒng)啟動時每次執(zhí)行。

systemctl start parsoid systemctl enable parsoid

Parsoid現(xiàn)在應(yīng)該在CentOS 7上作為一項(xiàng)服務(wù)運(yùn)行，使用8000端口。您可以通過以下方式使用netstat命令進(jìn)行檢查。

netstat -plntu

你應(yīng)該得到類似于以下的結(jié)果：

tcp6 0 0 :::8000 :::* LISTEN

語法安裝和配置已經(jīng)完成。注意：如果你使用云服務(wù)器的話，別忘了將安全組中的8000端口放行，否則還是會報(bào)錯。

好了，打開瀏覽器，輸入`你的域名:8000`，頁面如下：

注意：這里其實(shí)用的是http協(xié)議，所以瀏覽器會顯示不安全

3、安裝并配置可視化編輯器

安裝插件就簡單多了，打開配置文件LocalSettings.php，輸入：

## 啟用可視化編輯器 wfLoadExtension( 'VisualEditor' );$wgVirtualRestConfig['modules']['parsoid'] = array(// URL to the Parsoid instance// Use port 8142 if you use the Debian package'url' => 'http://wiki.mindseed.cn:8000',// Parsoid "domain", see below (optional)'domain' => 'wiki.mindseed.cn',// Parsoid "prefix", see below (optional)'prefix' => 'wiki.mindseed.cn');# 默認(rèn)對所有用戶啟用 $wgDefaultUserOptions['visualeditor-enable'] = 1;

試著編輯一下維基頁面吧。

問題

1、“編輯”標(biāo)簽和“編輯源代碼”標(biāo)簽共存

安裝完之后，每個頁面就會重復(fù)出現(xiàn)“編輯”和“編輯源代碼”的標(biāo)簽，而當(dāng)你點(diǎn)擊任何一個都會默認(rèn)進(jìn)入到可視化編輯器中。

MediaWiki官網(wǎng)的參數(shù)設(shè)置中有一個編輯模式的選項(xiàng)。

解決方法：在LocalSettings.php中加入如下代碼

$wgVisualEditorUseSingleEditTab = true; $wgDefaultUserOptions['visualeditor-editor'] = "visualeditor";

如果不希望在參數(shù)設(shè)置中顯示“編輯模式”的選項(xiàng)，可以在上述代碼中繼續(xù)加一行

$wgHiddenPrefs[] = 'visualeditor-tabs';

2、除了條目外，是否能將可視化編輯器用在模板和其他命名空間

除了主條目外，可視化編輯器也可以用于其他命名空間，比如你自己新建的命名空間，如下面的MYTEST。

# 在條目、模板、用戶中開啟VisualEditor $wgVisualEditorAvailableNamespaces = [NS_MAIN => true,NS_USER => true,NS_TEMPLATE => true,NS_MYTEST => true, ];

3、錯誤：apierror-visualeditor-docserver-http-error

在LocalSettings.php中$wgVirtualRestConfig['modules']['parsoid']那一段url如果你使用https則可能出現(xiàn)這樣的錯誤，你可以將https改為http試一下。

如果Parsoid和MediaWiki安裝在同一個服務(wù)器下，那么最根本的方法就是將網(wǎng)址改成localhost ：

$wgVirtualRestConfig['modules']['parsoid'] = array(// URL to the Parsoid instance// Use port 8142 if you use the Debian package'url' => 'localhost:8000',// Parsoid "domain", see below (optional)'domain' => 'wiki.mindseed.cn',// Parsoid "prefix", see below (optional)'prefix' => 'wiki.mindseed.cn');

參考文章：
《How to Install VisualEditor for MediaWiki on CentOS 7》
《如何在CentOS 7上安裝MediaWiki的VisualEditor》
《VisualEditor安裝筆記》

總結(jié)

以上是生活随笔為你收集整理的bin文件编辑_为MediaWiki安装可视化编辑器VisualEditor的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。