Difference between revisions of "Visual editor"

From Freephile Wiki
Jump to navigation Jump to search
VisualWikitext
(Updated for 2023)
 
(42 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
The [http://www.mediawiki.org/wiki/VisualEditor Visual Editor] for MediaWiki relies on the '''[[mw:Extension:Parsoid|Parsoid]]''' extension <ref>[https://git.wikimedia.org/tree/mediawiki%2Fextensions%2FParsoid Parsoid extension]</ref> AND the Parsoid service.  The Parsoid service is a node.js server that interacts with the mediawiki API.
+
{{Feature
 +
|image=Visual Editor (linking).png
 +
|imgdesc=Direct editing
 +
|title=
 +
}}
 +
{{#set:feature description = A reliable rich-text editor for MediaWiki. Allows you to just "edit the page you see" while being aware of all the syntactically rich features of templates, extensions etc.}}
 +
{{#set:feature notes = The Visual Editor is available Here and on Wikipedia.}}
 +
{{#set:feature tests = [[Special:UserLogin|Login]] to the wiki, and make an edit in your [[Special:MyPage/Sandbox|personal sandbox]]. }}
 +
{{#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>
 
  
−
[http://xml.coverpages.org/ Robin Cover] would be proud. It round-trips wiki to HTML + RDFa and back.
+
[[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]
  
−
== Installation ==
+
== Back story ==
−
You'll need at least [http://www.mediawiki.org/wiki/Release_notes/1.23 MediaWiki v1.23].  I personally run the same [http://www.mediawiki.org/wiki/Special:Version version that they're running on mediawiki.org] (1.24wmf3 [[User:Freephile|greg.rundlett]] ([[User talk:Freephile|talk]]) 19:39, 9 May 2014 (UTC))
+
Wiki markup is a sort of shorthand for more complicated HTML markup designed to create nicely formatted web documents.  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 a tension between ease of use, and power.  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.
−
=== WebFaction ===
 
  
−
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 [http://docs.webfaction.com/software/custom.html installer in your webfaction panel] and associating a path with the app for a domain.  I chose to install 'node' (which is now it's own one-click install).  Once you do that you can [[https://freephile.org/node visit the path]] you configured for node and you should see the "hello world" app that the installer puts in place.  You'll need to stop that app, plus remove the cron job that respawns it.  Then, to reserve and associate a port for the service, you install another 'app'.  (I had to export the PORT, but this is no longer necessary if you configure it in localsettings.js.)  Depending on the resource constraints of your hosting package, you may need to limit the number of workers spawned by the Parsoid service.  It calculates a number based on the number of processors.  For a shared hosting account, this is guaranteed to exceed your limits, so specify the <code>--num-workers</code> option unless you're running on a dedicated host or VM.
+
Fast-forward to 2016 when VisualEditor was fully working as a Visual WYSIWYG interface for editing MediaWiki content, using a Node.js backend called 'Parsoid' which is a bidirectional runtime wiki parser. This caused a big software architectural problem: there were two parsers to maintain: the 'normal' (now 'legacy') core parser in PHP, and the Visual Editor parser (Parsoid) in JavaScript. So, by the end of 2019, Parsoid was ported to PHP, and distributed with MediaWiki 1.35 as part of the [mw:Parsoid/Parser_Unification|Parser Unification initiative]].
  
−
Follow the installation instructions, and remember to edit both LocalSettings.php and localsettings.js
+
== 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.
  
 +
The [http://www.mediawiki.org/wiki/VisualEditor Visual Editor] for 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
+
<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>
−
<source lang="bash">
 
−
export NODE_PATH="$HOME/webapps/node/lib/node_modules:$NODE_PATH"
 
−
echo 'export NODE_PATH="$HOME/webapps/node/lib/node_modules:$NODE_PATH"' >> $HOME/.bashrc
 
−
which npm
 
−
export PATH="$HOME/webapps/node/bin:$PATH"
 
−
echo 'export PATH="/$HOME/webapps/node/bin:$PATH"' >> $HOME/.bashrc
 
−
</source>
 
  
−
Once node (and npm) is available, you of course need to get the parsoid and visual_editor extensions.  A quick <code>npm install</code> in the parsoid directory sets up all the node machinery.
+
[http://xml.coverpages.org/ Robin Cover] would be proud.  It round-trips wiki to HTML + RDFa and back.
  
−
To have it run continuously, you might want to use the 'forever' module.
+
== Installation ==
−
<source lang="bash">
+
VisualEditor is included with MediaWiki. See https://www.mediawiki.org/wiki/Extension:VisualEditor
−
npm install -g forever
 
−
cd ~/webapps/wiki/extensions/Parsoid/
 
−
forever node api/server.js --num-workers=2 &
 
−
</source>
 
  
−
==== Info ====
 
−
* https://docs.webfaction.com/software/nodejs.html
 
  
 
== Extensions ==
 
== Extensions ==
 
# [[mw:Extension:VisualEditor]]
 
# [[mw:Extension:VisualEditor]]
 
# [[mw:Extension:Parsoid]]
 
# [[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 ==
 
== API / Developer Docs / DevOps ==
Line 47: Line 71:
 
* https://doc.wikimedia.org/VisualEditor/master/ powered by JSDuck
 
* https://doc.wikimedia.org/VisualEditor/master/ powered by JSDuck
 
* http://blog.gmane.org/gmane.science.linguistics.wikipedia.wikitext wikitext-l
 
* 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}}
 
{{References}}
  
 
[[Category:Wiki]]
 
[[Category:Wiki]]
 +
[[Category:JavaScript]]

Latest revision as of 22:35, 19 April 2023

Visual editor Dialog-information.svg
Direct editing
Image shows: Direct editing
Summary
Description: A reliable rich-text editor for MediaWiki. Allows you to just "edit the page you see" while being aware of all the syntactically rich features of templates, extensions etc.
More
Notes: The Visual Editor is available Here and on Wikipedia.
Test: Login to the wiki, and make an edit in your personal sandbox.




Visual Editor

Links[edit | edit source]

Back story[edit | edit source]

Wiki markup is a sort of shorthand for more complicated HTML markup designed to create nicely formatted web documents. 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 a tension between ease of use, and power. This tension was one of the primary factors that the Wikimedia Foundation cited as an impediment to new content collaborators for the Wikipedia. [1][2][3]. 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.

Fast-forward to 2016 when VisualEditor was fully working as a Visual WYSIWYG interface for editing MediaWiki content, using a Node.js backend called 'Parsoid' which is a bidirectional runtime wiki parser. This caused a big software architectural problem: there were two parsers to maintain: the 'normal' (now 'legacy') core parser in PHP, and the Visual Editor parser (Parsoid) in JavaScript. So, by the end of 2019, Parsoid was ported to PHP, and distributed with MediaWiki 1.35 as part of the [mw:Parsoid/Parser_Unification|Parser Unification initiative]].

Intro[edit | edit source]

  • VIDEO Wikimania 2013
  • 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.

The Visual Editor for MediaWiki relies on Parsoid

"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."

Robin Cover would be proud. It round-trips wiki to HTML + RDFa and back.

Installation[edit | edit source]

VisualEditor is included with MediaWiki. See https://www.mediawiki.org/wiki/Extension:VisualEditor


Extensions[edit | edit source]

  1. mw:Extension:VisualEditor
  2. mw:Extension:Parsoid

Extensions that hook into VE[edit | edit source]

Extension authors should register VisualEditorPluginModules

  1. https://www.mediawiki.org/wiki/Extension:Proofread_Page
  2. https://www.mediawiki.org/wiki/Extension:CodeMirror (syntax highlighting)
  3. https://www.mediawiki.org/wiki/Extension:Disambiguator
  4. https://www.mediawiki.org/wiki/Extension:Graph
  5. https://www.mediawiki.org/wiki/Extension:Kartographer (Open Street Maps)
  6. https://www.mediawiki.org/wiki/Extension:LanguageTool
  7. https://www.mediawiki.org/wiki/Extension:Math
  8. https://www.mediawiki.org/wiki/Extension:Score (LillyPond)
  9. https://www.mediawiki.org/wiki/Extension:SyntaxHighlight
  10. https://www.mediawiki.org/wiki/Extension:TemplateData
  11. https://www.mediawiki.org/wiki/Extension:WikiHiero


Customizing Visual Editor with custom menus, tools, commands[edit | edit source]


API / Developer Docs / DevOps[edit | edit source]

References[edit source]

  1. ↑ https://strategy.wikimedia.org/wiki/March_2011_Update
  2. ↑ http://strategy.wikimedia.org/wiki/Editor_Trends_Study
  3. ↑ See this October 2013 article in the MIT Technology Review http://www.technologyreview.com/featuredstory/520446/the-decline-of-wikipedia

HyperText Markup Language = structured text that uses logical links (hyperlinks) between nodes containing text.

PHP is the HyperText Preprocessor = the most popular programming language for the web

Visual Editor

Application Programming Interface

Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Visual_editor&oldid=10149"