MediaWiki扩展：所见即所得编辑器

页面分类: 待翻译文章 | MediaWiki | MediaWiki tools | MediaWiki extensions | MediaWiki技术文档

天下维客，你可以修改的网络知识库

本文取自元维基，欢迎共同翻译、整理与大家共享，促进中文wiki发展^_^

For the more technically inclined, 维客语法是一个比较简单编辑页面的方法，因为这方法可行，几年来一直都这样做。可是，不熟悉的用者are put off by what looks to them -- rightly -- to be code of any sort. These users are adjusted to publishing and editing in a more visually straightforward WYSIWYG (What You See Is What You Get) environment.

The metaphor WYSIWYG is most often used, but in case of mediawiki false, you can never get exactly what you see, since what you get depends on your browser, screen resolution, fonts, your mediawiki skin and so on. WYSIWYM (What You See Is What You Mean) is actually the correct term that should be used.

Rationale

在MediaWiki所见即所得 could be greatly beneficial for当前用户与未来注册的用户。目前的编辑工具使用HTML语法，可以either the fallback for those with older/text-based browsers or the default for users that prefer the fine level of control of wiki markup. The question of technical feasibility to adding a WYSIWYG option could be a blockade to coding it, and here is an introductory look at the technical side of things --

Modern GUI browsers, including Internet Explorer and Mozilla Firefox, have built-in functionality to use WYSIWYG editing features; however, the means of implementing that functionality varies per browser. Surmounting this obstacle might be greatly aided by any of several impressive open source, cross-browser WYSIWYG editors.

Technical feasability aside, letting users edit in a WYSIWYG input system has a number of advantages:

• The many would-be MediaWiki users who get scared off by complicated Wiki markup -- not to mention hairy HTML markup -- will have a familiar, word-processor-style interface to work with instead.
• You can see what an article will look like without previewing it. This will save round-trips to the server.
• We can use existing spell checkers (although there's a promising native wiki src spell checker (test wiki) with wiktionary- integration in development by archivist)
  • There are two other options for server side spell-checking
    • linuxquestions.org has released their spell checker
    • Another free one is available at spell checker
• Offline editing (possibly with something similar to Zope External Editor) is much easier
• It allows easy import for other open source texts and (potentially, with an appropriate script) images with copy&paste.

设计

Conceptual

As noted above, HTML TEXTAREAS could be a fallback for older browsers or those that prefer this for fine control. The WYSIWYG editor could also be limited to reflect only existing wiki markup, with its democratically decided simplicities and compromises for complexities -- adding nothing to the wiki markup, only providing a more visually straightforward means of changing the markup....

Implementation

There are a few options for making a WYSIWYG editor that works in the browser.

1. Pure DHTML/Javascript. Capture mouse input, buttons, keystrokes, etc., and actually edit the HTML of the current document. It's not trivial, but possible. Epoz 1.0 is an example for this approach. Epoz and HTMLArea, the most prominent ones, are cross-browser - they iron out the subtle differences in the editing API between IE/Moz. This leaves all browsers not based on MSIE or Gecko (most notably Opera and KHTML (backend used by Konqueror and Apple's Safari browser)) as non-supported.
2. Create a custom browser plug-in, Java applet, ActiveX control. This would probably be workable, but would take quite a bit of hackery, and may or may not work. Requiring users to install any sort of plugin is very undesirable.
3. Both Mozilla and Internet Explorer include a way to make sections of a page editable. IE has the MSHTML Editing Platform, and Mozilla has its Rich Text Editing API. Both technologies allow Web developers to make parts of a page editable -- in slightly different ways, of course.

Most current in-browser WYSIWYG editors use the third option.

Proof of concept: Two WYSIWYG Editors

FCKeditor

An experimental implementation of FCKeditor into MediaWiki 1.6.2 is described here. A version based on 1.5.3 can be downloaded from here.

Another implementation using HTML::WikiConverter is described at FCKeditor and HTML::WikiConverter.

TinyMCE

You can also download the following patch: http://www.logicsupply.com/pub/wysiwyg.patch.zip. This patch integrates TinyMCE into MediaWiki version 1.5.2. The TinyMCE source is included in the patch. I've added an option to the user preferences to enable or disable the editor on a per user basis. All HTML is converted to appropriate wiki markup before previewing/saving.

Limitations include:

• Links and images must still be specified using wiki markup
• Preformatted text (lines starting with whitespace) doesn't survive the trip to and from HTML
• Some features, like underline and strikethrough, have no effect.

If someone wants to hack TinyMCE to make these features work, they're more than welcome.

For details on implementing TinyMCE see the article on TinyMCE.

其他使用所见即所得编辑的维客

wikispaces.com is enough proof of concept that it is possible ;)

wiki所见即所得编辑工具查看

Internal Links and 图像

Epoz 0.74 features a great tool box to insert internal links and images. It's based on a search box, images are displayed with thumbnails and can be inserted with a single click. Inserting different image sizes is easy to do by customizing the tool box template. More documentation and screenshots (in german)

HTML维客标记

Leveraging the power of existing html editing/spell checking tools makes it necessary to convert the produced html/xhtml to wiki markup.

If we manage to create a python or php script that converts simplified tidy output (xhtml) to wiki-code, this would be easy to do with epoz. Epoz 0.74 feeds the html through tidy on the server via xml-rpc when switching to source view and on save. This works great, it's Plone's standard editor- I used it to write the Squid document for example. Our conversion script can hook in after tidy, the source visible in 'source view' and submitted to the server would be wiki markup. All without reloading the surrounding page. Creating the conversion script is a challenge, but operating on tidy-cleaned xhtml should simplify matters. Epoz only allows structural markup (no font tags etc), so this is mainly a str_replace(). With the appropriate configuration tidy will strip the complex things first.

This setup combines the advantages of both worlds by providing two views switchable back and forth without reloading the page:

• WYSIWYG view: 使用预设的css和html编辑
• 源代码view: 维客源代码

Possible problems

Things which need to be worked around include:

1. Displaying differences between italics and emphasis, bold and strong emphasis. Italics and bold are only used for articles on typesetting. (Technically mathematical formulae should use <var> but probably people are using <i> as it is shorter.)
2. Displaying formulae and potentially also music, maps, timelines, chess... allow editing?

   Perhaps MathML supporting browsers will be able to edit formulae

3. Displaying templates and allowing editing and inclusion of templates

   What about protected templates in a non-protected page? (Other similar combinations...)

   I have an idea. It would show up as a square box with the template name inside, and upon double-clicking a new tab would open (between the text box and formatting buttons) and allow editing of that template. This is a bit like handling of OLE objects in Microsoft Office.

4. Allow easy input other tags such as strikethrough, often used off the article namespace?
5. Displaying category links, interlanguage links?
6. Over-use of color, size, and other features. See MySpace.com profiles for examples of people with no design knowlege let loose.

Wikipedia-WYSIWYG-Editors not running inside the browser

• You can find a Wikipedia-WYSIWYG-extension for Emacs here: Wikipedia:Text_editor_support#Emacs

其他text-editors are covered in Wikipedia:Text_editor_support, too.

外部连结

• List of all WYSIWYG editors. Table info about almost all WYSIWYG editors on the net.
• widgEditor. New! Small (32Kb) WYSIWYG editor where HTML can be swapped for wiki markup. Promising.
• A WYSIWYG editor at an existing wiki, opened to a test page.
• another WYSIWYG editor at a commercial "wiki farm" (www.seedwiki.com), opened to an existing page. Uses unmodified FCKeditor - may be converting back to wikitext.
• Epoz 0.74 is a cross-browser WYSIWYG editor for Zope, with xhtml cleanup (tidy via xml-rpc), source view, works with IE5.5+ and Mozilla, falls back to textarea otherwise. Uses Rich Text Editing API on moz. Demo- switch to source view with the checkbox in the bottom left corner
• Epoz NG (1.0), (now called Kupu) - next generation based on a different concept, currently under heavy development. Features native xhtml, async saving, propably xslt...
• FCKeditor
• HTMLArea 3 - works with IE5.5+ and Mozilla, falls back to textarea otherwise.
• Alternate site) is a BSD-licensed, cross-browser WYSIWYG editor. There's a good demo. Also features a spell checker plugin potentially useful for Epoz (Demo).
• Wiki:WysiwygWiki has some more links and discussion.
• WysiwygEdit on WikiFeatures (one working htmlarea demo, no wiki src editing)
• Rich Text Editing API is Mozilla's built-in WYSIWYG editor, the equivalent of IE5.5+'s 'Rich Text Editor'. There's a demo. Most Editors are based on these two mostly compatible editing APIs.
• Richtext Editor. Has lot of tools like "Insert Special Characters". IE only. Demo. License: LGPL ← DEADLINK
• Mozile -- New-generation in-browser editor for Mozilla
• HTML Parser for PHP -- a good candidate for inclusion in MediaWiki for parsing WYSIWYG editor output back to Wiki markup
• HTML->MediaWiki converter -- demo of the HTML::WikiConverter perl module
• HtmlDiff solutions
• Diderot - Demo for integrated Wikipedia editor - Win only
• WackoWiki [ru] -- Wiki engine with built-in WYSIWYG editor
• OSCOM Kupu -- Open Source Content Management: Kupu WYSIWYG XHTML Editor, easy to integrate and extend, uses CSS, BSD source code license
• KOIVI TTW HTML Editor - cross browser, cross platform - some Safari/412 support!
• MoinMoin (written in Python) just implemented an EXCELLENT WYSIWYG wiki editor. It's in their 1.5 beta now.
• WIKIWIG --A lite WYSIWYG Wiki based on HtmlArea3. GPL, developped in PHP, so lite and easy to set up.
• JotSpot wiki (commercial) has an implementation of HTMLArea and is working to integrate the Dojo rich text editor
• Dojo Rich Text Editor The Dojo rich text editor supports inline editing as well as WYSIWYG
• AjaxWrite XUL based WYSIWIG editor, supports several file formats (RDF, PDF, MS-Word, etc); perhaps could be made to support WikiText

The HtmlArea 3.0 spell checker plugin:

原文参见： WYSIWYG editor

MediaWiki是全球最著名和最流行的开源wiki程序，运行于PHP+MySQL环境。MediaWiki从2002年2月25日被维基百科全书选用，并有大量其他应用实例。 MediaWiki功能齐备，中文支持良好，且学习资源丰富，是建立wiki网站的首选后台程序。目前国内的天下维客等站点都采用这套系统。 MediaWiki的开发得到维基媒体基金会的支持，一直保值着持续更新。目前最新版本为1.12.x。

mediawiki知识 mediawiki 编辑入门 MediaWiki站点 改进设想 wiki空间服务商 MW论坛交流

mediawiki建站 建站综述 软件安装 本地化设置 界面修改 站点美化 插件扩展 常见问题解答 anti-spam 网站迁移

mediawiki资源 3680101群 天下维客 中文维基百科 MW官方站(英) 元维基(英) 国外站需代理访问

→　更多mediawiki资料　　相关资源：wiki知识 wiki文摘　　QQ群：22134343 / 3680101-wiki建站与应用 5903157-电脑使用