集成标记所见即所得文本编辑器

在为 Markdown 代码寻找一个直观的所见即所得编辑器时，我没有找到与 CkEditor、 TinyMCE 等类似的用户界面。

具体来说，经常被推荐的 Markdown“所见即所得”编辑器(比如像 这个这样的文章)并不是纯粹的所见即所得编辑器，因为用户要么仍然写原始 Markdown (MarkItUp) ，要么走向另一个极端，即在没有标准控件(你好)的情况下进行行内编辑。

我需要介于两者之间的东西。

我正在寻找一个 Markdown 编辑器，它看起来和功能像一个精简的 CkEditor 文本框，并接受和输出 Markdown。应该有一个具有最少格式设置选项(B，I，U，列表等)的工具栏，并且文本输入区域应该显示转换后的 Markdown，而不是原始代码。应该有一个 Source 按钮，允许用户编辑原始 Markdown，但即使这样也是可选的。例如:

enter image description here

我知道 Markdown/wiki 的原因-它提供的安全性。我不介意像在 SE 这样输入原始代码，但是我的用户不是极客，并且不觉得这有趣。他们不希望看到 * * * _ _ _ 和空格与他们的文本混在一起。他们习惯于“ Word”样式的编辑，并且在该环境中最具生产力。

那么，是否有一个真正集成的所见即所得的 Markdown 编辑器？我是用 PHP 编写的，所以我可以用类来调用的东西是完美的。

2015年9月23日更新

CKEditor 现在有一个 降价 Addon来完成这个工作。插件项目是 托管在 Github 上。

截图:

markdown WYSIWYG

markdown source

2015年4月13日更新
有人自称开发 CKEditor 说，共同标志的出现是一个游戏规则的改变者，我们可能会看到一个合适的 CKEditor 的标记接口(阅读完整故事的评论)。

2015年2月6日更新

CKEditor 现在提供了一个输出(并接受作为输入) BBCode 的插件。

演示: http://ckeditor.com/demo#bbcode

41828 次浏览
小开
最佳答案

I was researching in this subject the other day and I haven't found any decent WYSIWYG editor with Markdown output. In fact, first you have to have to create a WYSIWG Markdown editor is WYSIWG HTML editor and there are just few of them that are usable on the market.

There's a chance that you'll be able to create dataProcessor for CKEditor that will change HTML editor into Markdown editor. We've got a plugin for BBCode that works like this (check out http://nightly-v4.ckeditor.com/3737/samples/bbcode.html).

All you have to do is implement this interface http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor. If you check BBCode plugin's code you'll see some hacks and tricks, because unfortunately current CKEditor's architecture isn't ready (yet) to create such a data processor. However, I believe that if you want to provide only few styling options you should be able to implement Markdown support pretty quickly.

小开

I am also looking for a markdown editor that is described at the top of this thread

Have you seen "markdown tools": http://md-wysiwyg.sourceforge.net/

Demo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

That seems pretty close to what we are looking for, it does a reasonable job of taking your WYSIWYG rich text and outputting markdown. However it failed on an encoding exception when I pasted in some rich text from a google doc.

小开

Pen is a new (active as of 2014) WYSIWYG editor that outputs Markdown.
It's not perfect—I've had issues with pasting HTML there—but it works.

Edit: Sorry! It doesn't output Markdown. Walery Strauch pointed out in the comments that the Markdown formatting signs I saw were actually CSS pseudo element rules:

Still, I'll leave it here as an option since some people upvoted this answer and it may have been of use to somebody.

小开

EDIT Sept 23, 2015

CKEditor now has a Markdown addon that does this exact thing. The addon project is hosted on github.

Screenshots:

markdown WYSIWYG

markdown source

As posted in my Feb 6, 2015 update, CKEditor now includes plugins that allow BBCode input and output.

A demo is available here: http://ckeditor.com/demo#bbcode

EDIT Apr 13, 2015:
Someone professing to develop CKEditor says that the appearance of CommonMark is a game changer, and we could possibly see a proper markup interface for CKEditor (read comments for the full story).

小开

SimpleMDE, a newcomer, may be the answer. I've been searching for something just like this for a month now. I'm surprised that this does not show up higher in search results. I had to go through a notice on lepture/editor to find this.

enter image description here

小开

I implemented a very simple editor that allows the contents of a <textarea> that contains Markdown to be edited in a WYSIWYG fashion.

I used Hallo. I don't think its web site makes it obvious that it is not itself a Markdown WYSIWYG editor but the demo does forge the path to one.

Hallo allows WYSIWYG editing of the HTML inside a <div>. I used javascript to hide any <textarea> blocks that have a specific wysiwyg CSS class, replacing it with a <div> and copying the contents of the <textarea> into the <div>. The copying runs through Showdown which produces HTML from Markdown.

Another Javascript routine reacts every time the <div> contents change. It copies the contents back into the (now hidden) <textarea>. The content is run through to-markdown to convert from HTML to Markdown.

If the <textarea> is a field in a <form>, then the edited Markdown will be sent to the server when that form is submitted.

The inspiration for this comes from the Hallo Markdown Example, specifically the editor.js file. I used that as a basis for my own script along with hallo.js, showdown.js and to-markdown.js.

My script, wysiwyg.js is a derivative of editor.js from the Hallo Markdown Example. Some points to note:

  • I use this in a Rails application (not that that matters)
  • It runs on ready and also on page:load, the latter because Rails uses Turbolinks
  • It runs on ajaxComplete because I use Ajax for form error reports
  • There are other dependencies: JQueryUI and Rangy (Rails users can avail of the gems jquery-ui-rails and rangy-rails).
  • Also Font Awesome is used for the tool bar icons. The version of hallo.js used by the demo is out of date (it uses an old version of Font Awesome) - use hallo.js from GitHub instead.

You only need to add CSS class='wysiwyg' to any <textarea> to enable WYSIWYG on it. The <textarea> should conain Markdown formatted text.

I would expect that wysiwyg.js could be easily adapted to use another editor if you don't like Hallo as long as it works on the HTML in a <div>. There are quite a few to choose from but not all are as lightweight as Hallo.

A smilar piece of work that I found is markdown-html-form. It uses the same Showdown and to-markdown.

小开

I found two which currently seem to be quite popular, active and free but haven't been mentioned yet.

The first one is Toast UI Editor. It supports both modes (WYSIWYG and raw). It has official react and vuejs wrappers.

Toast UI

The second one is ProseMirror which calls itself "a toolkit for building rich-text editors on the web" and it seems to be very flexible and extensive. It also supports both modes.

I'm pretty sure solid unofficial react / vue / angular wrappers for it can be found as well.

ProseMirror


提交答案