目前网站想要加入makdown编辑器,求推荐。

赵小龙
  • 48

1、segmentsfault 的编辑器超棒,有没有类似开源或商业的编辑器?
2、页面展示时markdown是如何解析的呢?有没有解析出来排版很漂亮的类库?

万分感谢

回复
阅读 3k
5 个回答

我一直用的是这个marked
这个解析器最大的特点就是,渲染器是可以自定义的,自由度比较高。

自己之前写过一个,题主可以看看满不满足你的要求:地址在这,markdown解析库用的Segment开源的HyperDown.js

mditor快速上手,简单,可见官网,我的个人博客文章的解析就用到了ywen.info

目前大多数相关项目实现的都是服务器端的Markdown语法解析,解析后将HTML代码返回给客户端,比如这个C#的项目: markdownsharp

我感觉这么轻量的格式没必要浪费服务器运算及带宽资源,还是通过Javascript实现客户端解析的方法最为实用,而且客户端解析的方式还能实现实时的所见即所得对照编辑,非常方便。

多番寻找和尝试,最终选定了 markdown-js

首先从这里下载其浏览器版:

https://github.com/evilstreak...

image thumb 实现网页客户端实时自动解析Markdown为HTML内容
解压缩后在其js文件同目录下新建一个网页进行测试,代码如下:

<!DOCTYPE html>
<html>
<body>

<textarea id="text-input" oninput="this.editor.update()"
          rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.js"></script>
<script>
  function Editor(input, preview) {
    this.update = function () {
      preview.innerHTML = markdown.toHTML(input.value);
    };
    input.editor = this;
    this.update();
  }
  var $ = function (id) { return document.getElementById(id); };
  new Editor($("text-input"), $("preview"));
</script>

</body>
</html>
这样就轻松的实现了实时解析转换:

image thumb3 实现网页客户端实时自动解析Markdown为HTML内容
转换后得到的只是最基础的HTML,可以用CSS美化一下,随手将Bootstarp的CSS引用过来看看:

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.bootcss.com/bootst... rel="stylesheet">
</head>
<body style="padding:30px">

<textarea id="text-input" oninput="this.editor.update()"
          rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.js"></script>
<script>
  function Editor(input, preview) {
    this.update = function () {
      preview.innerHTML = markdown.toHTML(input.value);
    };
    input.editor = this;
    this.update();
  }
  var $ = function (id) { return document.getElementById(id); };
  new Editor($("text-input"), $("preview"));
</script>

</body>
</html>
image thumb4 实现网页客户端实时自动解析Markdown为HTML内容
这样看起来已经很不错了。

顺带来看一下转换后生成的HTML代码吧:

<div id="preview"><p>Type Markdown here.</p>

<h1>测试</h1>


<h3>开始</h3>

<blockquote><p>引用
12345</p></blockquote>

<ul><li>无序 </li><li>aa </li><li>assSDDS</li><li>331222cccccccccccc</li></ul>

<p>126邮箱</p>

<pre>代码块11111111111111111113
1111111111111111111111111111112222<>C<OC)(#838132@#!#*!$$
</pre></div>
将此技术应用在博客或是CMS平台上会非常实用,也可以作为公告系统或私信系统使用。

这种方式的缺点在于SEO方面:搜索引擎可能无法了解页面内容的格式,像本该着重的标题的可能只会被当做普通内容一并处理,甚至还可能认为此内容是乱打的(那么多多余的符号~)。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏