Private MediaWiki에서 VisualEditor 사용하기

주어진 요구조건은 아래와 같다
  • MediaWiki 페이지를 VisualEditor를 사용해서 WYSWYG 상태로 편집하고 싶다.
  • ID/Password로 편집권한을 제한한다.
  • ID/Password를 사용해 로그인한 사용자에게만 모든 페이지가 보이고
  • 로그인하지 않은 사용자는 모두 로그인 페이지로 Redirect 한다.
  • MediaWiki는 AWS EC2 인스턴스에서 동작한다.
설정에 있어 까다로운 부분

사실 MediaWiki 설정은 너무 간단해서 기록으로도 남길 필요가 없다. 그러나 문제는 VisualEditor를 동작시키는 주요 컴포넌트 가운데 하나인 restbase 패키지 때문에 쉽지 않다.  MediaWiki는 공개를 기본으로 삼고있고 각 콤포넌트도 공개된 정책을 따른다는 가정하에 우선 설계되기 때문에 사용자가 로그인 했다는 상태를 restbase가 알지 못하는 상태가 생겨서 권한에 따라 페이지를 보여줄지 말지를 결정하는게 문제가 된다. 

 

AWS EC2에도 까로로운 부분이 있다

AWS EC2 인스턴스는 인터넷으로 연결되는 외부 IP와 인스턴스 내부 IP 네트워크가 서로 다르다.

 

Wiki에서 ID/Password 접근제한을 걸어버리면 restbase 데몬이 요청하는 페이지를 처리할 수 없게된다. Cookie 전달 방법도 시도해봤으나 소용없다. NetworkAuth1https://www.mediawiki.org/wiki/Extension:NetworkAuth 확장팩을 써보았으나 이것도 신뢰하기 힘들다. 결국 만만한 REMOTE_ADDR을 참조하는 방법으로 마무리 했다. 


##########################################################################################
# 시작:VisualEditor
wfLoadExtension( 'VisualEditor' );

// 모두가 VE를 사용하도록 설정
$wgDefaultUserOptions['visualeditor-enable'] = 1;

// 사용자 설정에서 VE를 '사용불가'로 설정하지 못하게 함
$wgHiddenPrefs[] = 'visualeditor-enable';

// 링크와 표만들기 기능도 넣어줌. 사용자가 환경설정에서 변경가능.
$wgDefaultUserOptions['usebetatoolbar-cgd'] = 1;

// 위키 텍스트 소스모드를 VisualEditor 내부에서 진행
// 이 옵션을 true로 설정하면 Source/Visual 두 경우에서  WikiEditor를 쓰지 못하게 된다
$wgVisualEditorEnableWikitext = false;
$wgHiddenPrefs[] = 'visualeditor-newwikitext';
$wgDefaultUserOptions['visualeditor-newwikitext'] = 0;
$wgDefaultUserOptions['visualeditor-enable-experimental'] = 0; // 실험적인 기능 사용: 코드 에디팅

// 편집 탭을 하나만 사용하여, 기존 VisualEditor 편집 탭으로 앞뒤로 전환.
$wgVisualEditorUseSingleEditTab = false;
$wgDefaultUserOptions['visualeditor-editor'] = "visualeditor";

//  edit source 위치
$VisualEditorTabPosition = "after";

// 사파리에서 로딩이 안되는 경우가 있는데 해결하기 위해 켜둡니다.
$wgDefaultUserOptions['visualeditor-enable-experimental'] = 1;

// 기본적으로 "Main", "User", "File", "Category" 네임스페이스에서 VE 사용하도록 설정되어 있고, 추가설정 가능
$wgVisualEditorAvailableNamespaces = [
  "File" => true
];

$wgVisualEditorParsoidURL = 'http://localhost:8142'; # trailing slash(/)를 붙이지 말아야 함
$wgVisualEditorParsoidForwardCookies = true;
$wgSessionsInObjectCache = true;
//$wgVisualEditorParsoidPrefix = 'localhost';
//$wgVisualEditorRestbaseURL = "http://andrwj.com/wiki.localhost/localhost/v1/page/html/";
//$wgVisualEditorFullRestbaseURL = "http://andrwj.com/wiki.localhost/localhost/";
$wgVirtualRestConfig['modules']['parsoid'] = array(
        'url' => 'http://localhost:8142',
        'domain' => 'wiki.andrwj.net');
$wgVirtualRestConfig['modules']['parsoid']['forwardCookies'] = true;
$wgVirtualRestConfig['modules']['restbase'] = array(
  'url' => 'http://localhost:7231',
  'domain' => 'wiki.andrwj.net',
  'forwardCookies' => true,
  'parsoidCompat' => false );

    #for VisualEditor/parsoid/restbase
    $wgGroupPermissions['*']['read'] = true;
    $wgGroupPermissions['*']['edit'] = true;
    $wgGroupPermissions['*']['createpage'] = false;
    $wgGroupPermissions['*']['createaccount'] = false;
    $wgGroupPermissions['sysop']['*'] = true;

    #require_once "$IP/extensions/NetworkAuth/NetworkAuth.php";
    $wgNetworkAuthUsers[] = [
        'iprange' => [ '127.0.0.1',  '172.31.24.226' ],
        'user'    => 'A.J'
    ];
    if (    !isset($_SERVER['REMOTE_ADDR']) OR
        ($_SERVER['REMOTE_ADDR'] == '172.31.24.226') OR
        ($_SERVER['REMOTE_ADDR'] == '127.0.0.1')
    ) {
        $wgGroupPermissions['*']['read'] = true;
        $wgGroupPermissions['*']['edit'] = true;
    }

# 끝:VisualEditor
##########################################################################################

물론 Parsoid, Restbase 설정이 위의 LocalSettings.php 설정과 맞아야 한다.

 

Closing

난 사실 Table 편집할 때 외에는 VisualEditor를 사용하지 않으려한다. 섹션 만 수정하고 싶은데 페이지 전체를 로딩하기 때문이다.  혼자 사용하는 위키에서는 별 문제 안되겠지만 다수가 편집하는 상황이라면 VisualEditor는 문제의 근원이 될듯. 또한 아무리 ‘쉽다’ 해도 위키문법을 배우려는 사람이 적고 설령 배운다해도 하기싫어서 대충대충 문서를 만들어 두기 때문에 문서로써 가치를 쌓아가기 힘들다.  남들이 뭐라고해도 나는 기록을 남기는게 중요하다 믿는다. 그렇기 때문에 좀 더 나은 방법을 찾고 더 나은 포맷과 더 나은 내용을 채우기 위해 고심한다.

다만 다음에 다른 회사에서 일하게 된다면, 난 절대 위키를 입밖에도 꺼내지도 않을거다.

 

References   [ + ]

1. https://www.mediawiki.org/wiki/Extension:NetworkAuth

MediaWiki + WordPress

WordPress에서 글을 쓸 때 HTML raw coding 없이 글을 쓰고 싶어서 잘 굴러가는 Markdown 플러그인을 오랬동안 이것저것 써보며 슬쩍 고쳐도 봤다. 맘에 들지 않아 Markdown 에디터는 나오는 족족, 귀에 들리는대로 사용해봤다.  근데 내게있어 최종 승자는 로컬에 설치한 MediaWiki 인데 그 이유가 제대로 동작하는 VisualEditor 기능1https://www.mediawiki.org/w/index.php?title=VisualEditor:Test&action=edit 덕분이더라.

 

영양가 없어 보이는 글도 공부할 때 정리하는 두서없는 글도 쌓이고 다음어지고 모아지면서 마침내 정리된 내 지식이 되는 듯 해서 좋다.  IT 노역꾼이라 상기시켜주던 테이블 과 코드도 어느 수준의 WYSIWYG 기능이 동작하고, Clipboard에 있는 이미지를 그대로 갖다 붙이는 것도 가능해지니 닥치는대로 MediaWiki에서 작성하게 되더만. 문서내 한글검색을 위해 발품팔아 빌드한 플러그인 넣고 Elastic Search를 달아줬더니 Phabricator Wiki는 이제 빠이빠이. (애는 원래가 소스관리/공유가 목적이라 글쓰는 도구로써는 도저히 가망이 없다) 

WikiEditor2https://www.mediawiki.org/wiki/Extension:WikiEditor, CodeEditor3https://www.mediawiki.org/wiki/Extension:CodeEditor, CodeMirror4https://www.mediawiki.org/wiki/Extension:CodeMirror, VisualEditor5https://www.mediawiki.org/wiki/Extension:VisualEditor …,, 이렇게 떼거지로 덤벼도 Confluence Wiki Editor에 대적하기 힘들겠지만 각각이 제몫을 해내면서 빠르고 이쁘고?  목적에 충실한 글쓰기 툴이 된다.  Template, Gadget, Widget,  MediaWiki JavaScript 프레임웍, Semantic MediaWik Plugin .. 그리고 할수만 있으면 입맛에 맞춰지는 테마까지.. 비록 산만하게 널려져 있어 제대로 쓰려면 시간과 노력이 필요했지만, 엄한 번지수에서 헤매면서 배송날짜 기다리는 프로불편러 마냥 WordPress에서 마크다운 기능을 기대하는 짓은 이제 그만한다. 어차피 WordPress  Blocks 개념/플러그인6https://wordpress.org/plugins/blocks/ 때문에 이전 방식을 버릴 때가 온 것도 한 몫한다.

 

그러나 집안에서는 자유롭게 입고 뒹굴다가 집밖을 나갈 때는 나름 꾸미고 나가듯, MediaWiki 글을 보여줄 때는 좀 화장할 필요도 있다. 이런 목적에 적합한 WP 플러그인이 RDP Wiki Embed7https://wordpress.org/plugins/rdp-wiki-embed/. TOC, 섹션헤더, 편집툴, 링크등 조절해야할 것들을 모두 선택가능하게 해주는 고마운 플러그인. 비록 CSS에 신경써줘야 했지만 MediaWiki글의 화장품으로써 충분하다.  

섹션 조각이 모여 글을 만들어주는 Scrivener8https://www.literatureandlatte.com/scrivener/overview 기능은  MediaWiki Subpage + ElectronPdfService9https://www.mediawiki.org/wiki/Extension:ElectronPdfService 으로도 구현가능함을 이미 검증했다. 

 

 

MediaWiki 에서 끌어온 NodeJS 페이지

 

이제 Spacemacs10http://spacemacs.org/에서 Org 모드11https://orgmode.org/로 쓴 글을 두 플랫폼을 연결하는 것이 남겨진 과제다.

References   [ + ]