The [http{{Feature|image=Visual Editor (linking).png|imgdesc=Direct editing|title=}}{{#set://wwwfeature description = A reliable rich-text editor for MediaWiki.mediawiki Allows you to just "edit the page you see" while being aware of all the syntactically rich features of templates, extensions etc.org/wiki/VisualEditor }}{{#set:feature notes = The Visual Editor] for MediaWiki relies is available Here and on the '''Wikipedia.}}{{#set:feature tests = [[mw:ExtensionSpecial:ParsoidUserLogin|ParsoidLogin]]''' extension <ref>to the wiki, and make an edit in your [[httpsSpecial:MyPage//git.wikimedia.org/tree/mediawiki%2Fextensions%2FParsoid Parsoid extensionSandbox|personal sandbox]]</ref> AND the Parsoid service. The Parsoid service is a node.js server that interacts with the mediawiki API.}}{{#set:feature examples = }}
<blockquote>"Parsoid implements a bidirectional wikitext parser and interpreter. It converts and interprets wikitext into an annotated HTML DOM, which can then be edited with HTML editor tools such as the Visual Editor. It also provides the conversion of a (possibly modified) HTML DOM back to wikitext."</blockquote>
Robin Cover would be proud[[File:VisualEditor-logo.svg|alt=Visual Editor|frameless|641x641px|Visual Editor logo]]== Links ==* [https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide User Guide]* [https://www.mediawiki.org/wiki/Project:Sandbox Demo] (no account needed)* [https://www.mediawiki.org/wiki/VisualEditor/Portal/Help Portal to Help Content about VE] == Back story ==Wiki markup is a sort of shorthand for more complicated HTML markup designed to create nicely formatted web documents. It round-trips Although in the beginning wiki markup simplified the process of creating nicely formatted content, that shorthand can get increasingly complex in order to produce complicated layout and content. The extension of the markup system over time to include a template subsystem and macros inevitably leads to HTML a tension between ease of use, and backpower. This tension was one of the primary factors that the Wikimedia Foundation cited as an impediment to new content collaborators for the Wikipedia. <ref>https://strategy.wikimedia.org/wiki/March_2011_Update</ref><ref>http://strategy.wikimedia.org/wiki/Editor_Trends_Study</ref> <ref>See this October 2013 article in the MIT Technology Review http://www.technologyreview.com/featuredstory/520446/the-decline-of-wikipedia</ref>. A visual editor was deemed nearly impossible after many early attempts failed, but with the advent of Node.js technology, it became an idea that was plausible again.
== Installation ==YouFast-forward to 2016 when VisualEditor was fully working as a Visual WYSIWYG interface for editing MediaWiki content, using a Node.js backend called 'Parsoid'll need at least [http://www.mediawiki.org/which is a bidirectional runtime wiki/Release_notes/1.23 MediaWiki v1parser.23]. I personally run the same [httpThis caused a big software architectural problem://www.mediawiki.org/wiki/Specialthere were two parsers to maintain:Version version that theythe 'normal' (now 'legacy're running on mediawiki) core parser in PHP, and the Visual Editor parser (Parsoid) in JavaScript.org] (So, by the end of 2019, Parsoid was ported to PHP, and distributed with MediaWiki 1.24wmf3 [35 as part of the [Usermw:FreephileParsoid/Parser_Unification|greg.rundlettParser Unification initiative]] ([[User talk:Freephile|talk]]) 19:39, 9 May 2014 (UTC))=== WebFaction ===.
== Intro ==
* [https://commons.wikimedia.org/w/index.php?title=File%3AWikimania_2013_-_VisualEditor_-_The_present_and_future_of_editing_our_wikis.webm VIDEO] Wikimania 2013
* [https://www.youtube.com/watch?v=M_Ioi1aLAL8 VIDEO] (47 min.) with James Forrester - Product Manager and Roan Kattouw - Sr. Software Engineer presenting Jan 13, 2014 at Linux.conf.au on the contentEditable aspects of the system.
To install the visual editor extension in a webfaction account, you need to first have node installed and working. You can do this by using the The [http://docswww.webfactionmediawiki.comorg/softwarewiki/custom.html installer in your webfaction panelVisualEditor Visual Editor] and associating a path with the app for a domain.MediaWiki relies on [[mw:Parsoid|Parsoid]]
You'll want to set/update your $NODE_PATH and $PATH environment variables to locate the installed node modules, and to find the node and npm binaries<source lang="bash"blockquote>export NODE_PATH="$HOME/webapps/node/lib/node_modules:$NODE_PATH"echo 'export NODE_PATH="$HOME/webapps/node/lib/node_modules:$NODE_PATH"' >> $HOME/Parsoid implements a bidirectional wikitext parser and interpreter.bashrcIt converts and interprets wikitext into an annotated HTML DOM, which npmexport PATH="$HOME/webapps/node/bin:$PATH"echo 'export PATH="/$HOME/webapps/node/bin:$PATHcan then be edited with HTML editor tools such as the Visual Editor. It also provides the conversion of a (possibly modified) HTML DOM back to wikitext."' >> $HOME/.bashrc</sourceblockquote>
Once node (and npm) is available, you of course need [http://xml.coverpages.org/ Robin Cover] would be proud. It round-trips wiki to get the parsoid HTML + RDFa and visual_editor extensions. A quick <code>npm install</code> in the parsoid directory sets up all the node machineryback.
To have it run continuously, you might want to use the 'forever' module. <source lang="bash">= Installation ==npm install forever<VisualEditor is included with MediaWiki. See https://www.mediawiki.org/wiki/source>Extension:VisualEditor
# [[mw:Extension:VisualEditor]]
# [[mw:Extension:Parsoid]]
=== Extensions that hook into VE ===
* https://codesearch-beta.wmcloud.org/things/?q=ve.ui.commandRegistry.register&files=&excludeFiles=&repos=
* https://codesearch-beta.wmcloud.org/extensions/?q=VisualEditorPluginModules&i=nope&files=&repos=
Extension authors should register <code>VisualEditorPluginModules</code>
# https://www.mediawiki.org/wiki/Extension:Proofread_Page
# https://www.mediawiki.org/wiki/Extension:CodeMirror (syntax highlighting)
# https://www.mediawiki.org/wiki/Extension:Disambiguator
# https://www.mediawiki.org/wiki/Extension:Graph
# https://www.mediawiki.org/wiki/Extension:Kartographer (Open Street Maps)
# https://www.mediawiki.org/wiki/Extension:LanguageTool
# https://www.mediawiki.org/wiki/Extension:Math
# https://www.mediawiki.org/wiki/Extension:Score (LillyPond)
# https://www.mediawiki.org/wiki/Extension:SyntaxHighlight
# https://www.mediawiki.org/wiki/Extension:TemplateData
# https://www.mediawiki.org/wiki/Extension:WikiHiero
== Customizing Visual Editor with custom menus, tools, commands ==
* https://www.mediawiki.org/wiki/VisualEditor/Gadgets
* https://www.mediawiki.org/wiki/VisualEditor/Gadgets/Creating_a_custom_command
* https://www.mediawiki.org/wiki/VisualEditor/Gadgets/Add_a_tool
== API / Developer Docs / DevOps ==
* https://doc.wikimedia.org/VisualEditor/master/ powered by JSDuck
* http://blog.gmane.org/gmane.science.linguistics.wikipedia.wikitext wikitext-l
I [https://gerrit.wikimedia.org/r/#/c/132479/1/api/ParsoidService.js noticed a bug] and it was fixed about 5 minutes after I mentioned it! (Thanks C. Scott Ananian)
{{References}}
[[Category:Wiki]]
[[Category:JavaScript]]