首页 文章

集成Markdown WYSIWYG文本编辑器

提问于
浏览 次
97

在为Markdown代码寻找简单的WYSIWYG编辑器时，我找不到与CkEditor，TinyMCE等相比较的UI .

具体来说，经常推荐的Markdown "WYSIWYG"编辑器（例如像this这样的帖子）并不是纯粹的WYSIWYG编辑器，因为用户仍然可以编写原始Markdown（MarkItUp）或者在没有标准控件的情况下进行内联编辑的另一个极端（Hallo） .

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

我正在寻找一个Markdown编辑器，其外观和功能类似于一个精简的CkEditor文本框，并接受并输出Markdown . 应该有一个工具栏，其中包含最少的格式化选项（B，I，U，列表等），文本输入区域应显示转换的Markdown，而不是原始代码 . 应该有一个Source按钮，允许用户编辑原始Markdown，但即使这是可选的 . 例如：

enter image description here

我得到Markdown / wiki等的理由 - 它提供的安全性 . 我不介意在SE输入原始代码，但我的用户不是极客，也不觉得这很有趣 . 他们不希望看到* * * ___和与其文本混合的空格 . 它们用于“Word”样式编辑，并且在该环境中效率最高 .

那么 - Markdown是否有真正集成的WYSIWYG编辑器？我正在用PHP编写，所以我可以用类调用的东西是完美的 .

Sept 23, 2015 Update

CKEditor现在有一个 Markdown addon，可以做到这一点 . 插件项目是hosted on github .

截图：

markdown WYSIWYG

markdown source

Apr 13, 2015 Update
一个自称开发CKEditor的人说CommonMark的出现是改变游戏规则的，我们可能会看到一个合适的markup interface for CKEditor（阅读全文的评论） .

Feb 6, 2015 Update

CKEditor现在附带一个输出（并接受输入）BBCode的插件 .

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

ckeditor richtextbox markdown wysiwyg

6 回答

  • 9

    前几天我正在研究这个主题，我还没有找到任何具有Markdown输出的体面的WYSIWYG编辑器 . 事实上，首先你必须创建一个WYSIWG Markdown编辑器是WYSIWG HTML编辑器，其中只有少数可以在市场上使用 .

    有's a chance that you' ll能够为CKEditor创建 dataProcessor ，它将HTML编辑器更改为Markdown编辑器 . 我们有一个BBCode的插件，就像这样工作（查看http://nightly-v4.ckeditor.com/3737/samples/bbcode.html） .

    您所要做的就是实现此接口http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . 如果你查看BBCode插件's code you' ll会看到一些黑客和技巧，因为遗憾的是当前的CKEditor准备好了（尚未）创建这样的数据处理器 . 但是，我相信如果您只想提供几个样式选项，您应该能够很快实现Markdown支持 .

    回复于
  • 8

    SimpleMDE，一个新人，可能就是答案 . 我感到惊讶的是，搜索结果中没有显示出更高的值 . 我必须通过lepture/editor的通知才能找到这个 .

    enter image description here

    回复于
  • 28

    EDIT Sept 23, 2015

    CKEditor现在有一个 Markdown addon这样做的确如此 . 插件项目是hosted on github .

    截图：

    markdown WYSIWYG

    markdown source

    正如我在2015年2月6日发布的更新中所述，CKEditor现在包含允许BBCode输入和输出的插件 .

    这里有一个演示：http://ckeditor.com/demo#bbcode

    EDIT Apr 13, 2015:
    一个自称开发CKEditor的人说，CommonMark的出现是一个游戏规则改变者，我们可能会看到一个正确的markup interface for CKEditor（阅读全文的评论） .

    回复于
  • 12

    Pen 是一个新的（自2014年起生效）WYSIWYG编辑器，输出Markdown .
    它有's not perfect—I'已经存在粘贴HTML的问题 - 但它的工作原理 .

    编辑：对不起！它不输出Markdown . Walery Strauch在评论中指出，我看到的Markdown格式化标志实际上是CSS伪元素规则：不过，我会留在这里作为一个选项，因为有些人赞成这个答案，它可能对某人有用 .

    回复于
  • 4

    我实现了一个非常简单的编辑器，它允许以WYSIWYG方式编辑包含Markdown的 <textarea> 的内容 .

    我用Hallo . 我不认为它的网站显然它本身不是Markdown WYSIWYG编辑器，但demo确实打造了一条路径 .

    Hallo允许WYSIWYG编辑 <div> 内的HTML . 我使用javascript来隐藏任何具有特定 wysiwyg CSS类的 <textarea> 块，将其替换为 <div> 并将 <textarea> 的内容复制到 <div> 中 . 复制贯穿始终Showdown从Markdown生成HTML .

    每次 <div> 内容更改时，另一个Javascript例程会做出反应 . 它将内容复制回（现在隐藏） <textarea> . 内容通过to-markdown运行，以便从HTML转换为Markdown .

    如果 <textarea> 是 <form >中的字段，则在提交该表单时，编辑的Markdown将被发送到服务器 .

    灵感来自Hallo Markdown Example，特别是editor.js文件 . 我使用它作为my own script的基础以及hallo.js，showdown.js和to-markdown.js .

    我的脚本wysiwyg.js是Hallo Markdown Example的衍生物editor.js . 有些要点需要注意：

    • 我在Rails应用程序中使用它（不重要）

    • 它在 ready 和 page:load 上运行，后者因为Rails使用Turbolinks

    • 它在 ajaxComplete 上运行，因为我使用Ajax进行表单错误报告

    • 还有其他依赖项：JQueryUI和Rangy（Rails用户可以使用宝石jquery-ui-rails和rangy-rails） .

    • 此外，Font Awesome用于工具栏图标 . demo使用的 hallo.js 版本已过期（它使用旧版本Font Awesome） - 请改用hallo.js from GitHub .

    您只需要将CSS class='wysiwyg' 添加到任何 <textarea> 以在其上启用WYSIWYG . <textarea> 应该具有Markdown格式的文本 .

    我希望wysiwyg.js可以很容易地适应使用另一个编辑器，如果你不喜欢Hallo，只要它适用于 <div> 中的HTML . 有很多可供选择，但并非所有都像_1543748一样轻量级 .

    我找到的一件微笑的工作是markdown-html-form . 它使用相同的Showdown和to-markdown .

    回复于
  • 3

    我也在寻找这个线程顶部描述的降价编辑器

    你见过"markdown tools"：http://md-wysiwyg.sourceforge.net/

    演示：http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

    这看起来非常接近我们正在寻找的东西，它可以合理地将您的WYSIWYG富文本输出并输出降价 . 但是当我粘贴来自谷歌文档的一些富文本时，它在编码异常时失败了 .

    回复于

相关问题