图片编辑器知乎

图片编辑器知乎

首先，Mathjax生成图片不是特别好的方式，因为图片生成速度慢，而且公式还不能改，就直接用css+js去实现，这样速度更快，减少和服务器的交互，还有一点，mathjax和ckeditor的Widget 结合去实现我认为是一个不错的方法。
现在我找到比较可行的有下面几个：
x，实现了latex，mathML等一些渲染，但它有一个特别大的缺点没人去实现他的编辑器，只能在页面显示的时候用。也能自己去实现，但没个一两年应该不会有什么成果。
ill，这个实现的比较单一，只实现了latex的渲染方法，而且功能还有的没实现，要是不追求特别强大的功能的话，可以看看JMEditor。
最后，你想问这个知乎的编辑器做法，不好意思，没看出来。
最最后，你可以看看wiris应该是你想要的东西，这个功能很强大，但是是收费的

知乎编辑器应该支持 Markdown 吗

找不到任何不去支持 Markdown 的理由，因为不用 Markdown 的人大可以不用啊，并不妨碍什麼。

Markdown 绝对不是什麼专供「专业人士」使用的工具，基本的文本样式层级是任何性质的文字都需要的。

不过不知道那些喜欢用全粗体的人一旦手里握有「＃」这个更恐怖的武器会怎样，有点怕怕。
------------------
针对 @廖雪峰 的答案我想说几句：
我个人是作翻译和图书出版的，跟 IT 毫无关系，完全不懂编程，或者什麼 web 开发。但是 Markdown 这东西我真的是花了几分钟时间看了一下介绍就开始用了，学习成本几乎为零。把用户设定为「小白」这没错，但别想的太简单，别忽略了小白的需求。现在知乎这样的简单版式，对表述是有妨碍的。当用户意识到丰富版面的需求，自然就会去瞭解。

请教前端达人，知乎的编辑器是怎样实现这个功能的

在线富文本编辑器里面，做以下操作：
选中一串文字，点击“ B ”把它加粗。
把游标移到这串文字的中间，再点“ B ”。
输入一些文字。
在大部分其他的编辑器里面，到第二步的时候，刚才加粗的所有文字都回复了正常状态:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
而知乎的编辑器的效果是这样：
step1: some bold text
step2: some bold text
step3: some inserted text bold text
从 HTML 上面看，它是把一个<b></b>节点拆成了三个节点：
<b>some</b>inserted text<b>bold text</b>.
问题是：在 contentEditable 上的编辑操作只能更新当前节点的文本内容，也就是说如果没有 js 干预，效果是这样：
<b>some inserted text bold text</b>
知乎的编辑器是怎样完成分拆动作的？
监听 keypress 事件？那输入中文怎样实现？
监听 change ？

知乎用的是什么富文本编辑器

原理实践

编辑

富文本编辑器，Multi-function Text Editor, 简称 MTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 API 基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。

在很多开发者看来，富文本编辑器的编写是一件很神秘或者复杂的事情。神秘倒没有，复杂的话，确实如此。但是它的基本原理并不复杂，入门也不难。今天我们的主题是讲述基本原理，并逐步演示一个简单富文本编辑器的产生。这是我在D2上的一个分享内容，在台上的演讲效果不佳，故写下来，希望能够对感兴趣的读者有所帮助。

基本原理

编辑

这个原理实在是太简单了！对于支持富文本编辑的浏览器来说，其实就是设置 document 的 designMode 属性为 on 后，再通过执行 mmand('commandName'[, UIFlag[, value]]) 即可。commandName 和 value 可以在MSDN 上和MDC 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 mmand('bold', false) 即可。很简单是吧？但是值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具体参考以上刚给出的两个链接。

为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 nt 获得）进行操作。

十分简单，是吧？下面我们来动手做一个。

简单编辑

编辑

这个例子使用了YUI. 即使你对它不是很熟悉也没有关系，我在这里只使用了它的 DOM 和 Event 的一些跨平台基本方法。

搭架

在此强调一下很久未曾提及的 unobtrusive. 我们的编辑器是对 textarea 元素的一个增强（enhencement），就是说，即使 JavaScript 被禁用了，用户还可以通过 textarea 编辑内容。

在这个例子中，我们将数也只有 textarea 一个。我们使用一个实例变量来保存工具条的各个项目。实例初始化放到一个叫 render 的方法中。这一步的页面和代码见第 1 步。

创建 iframe 并替换 textarea

搭好架子，正如我在前面所说，建立一个 iframe, 编辑器的所有操作都在 iframe 的 document 内执行。并且把 textarea 隐藏起来。从第 2 步中可以看到，我们已经有了一个 iframe, 但不能输入任何东西，很正常，我们没有打开它的 designMode 嘛。

开启 designMode

这一步涉及的东西挺多，也是关键。我们会创建获取 iframe 的 document 的方法，并通过程序的方式向 iframe 写入空页而非使用一个外接的 . 我们使用一个类属性 ntent 来保存空页的 html. 在准备好一切后，就可以开启 designMode 了。页面和代码详见第 3 步。看，我们已经可以在 iframe 里输入东西了。

构建工具条

我们需要操作的工具条！这样才可以控制 iframe 里的内容，才能称之为编辑器。在此我并不打算实现太多的功能，只是选择字形、加粗、斜体、下划线、居左、居中、居右、超链接和插图作为示例。对于跨平台，Mozilla Midas Specification是不错的参考。ok, 请看第 4 步，我们的工具条出来了，虽然很丑。我同时用 CSS 对 iframe 的宽度做出了一些调整。

给工具条加件

嗯，工具条出来了，编辑器看起来也“人模狗样”了，你兴奋的点啊点，没什么效果……意料中嘛。我们接着给工具条绑定一些事件，让编辑器内容能够响应工具条。在这一步，我们把 execCommand 再封一层，前面说过，我们上 UIFlag，让它永远是 false 好了。好，有代码就有真相，请看第 5 步。如果是正使用 IE, 请先暂时转移到其它浏览器。看到了吧，工具条生效了！

解决 IE 的问题

well, 如果你没有听我的劝告，依然使用 IE, 你会发现除了字型和字号其它的都不能用。为什么呢？你观察一下有发现，其它浏览器选择文本后，再点击工具条上的项目，被选中的文本是否依然选中的？而 IE 呢，在点击工具条时，选中的文本马上失去选中的状态，所以它们就失败了。所以，如果我们能够保证点击工具条文本保持选中状态，就可IE的问题了。

Microsoft 给 HTML 标签一个很奇怪的属性 unselectable, 只要设置为On不会转移到点击的元素上，从而保证文本的选中状态。

请看第 6 步。这也是解决 IE 头痛问题的关键所在。我曾经在这上面费了很大脑筋。

知乎所用的文本编辑器是什么？或者基于哪款编辑器开发的

文本编辑器是计算机软件中的一种。
主要用于用来编写和查看文本文件。有一些特殊的文本编辑器支持增加自有的格式来丰富文档的表现形式。操作系统或者集成开发环境通常会带有可以查看和编辑纯文本的编辑器，可增加格式的文本编辑器通常是个人用户或者公司在制作需要格式的文件中使用。因为程序和程序的配置文件通常是以纯文本形式储存，所以程序员也需要使用纯文本编辑器来编辑程序和配置文件。
常见系统下的文本编辑器：
常见的有Windows下的记事本，Mac OS X下的文本编辑，Linux下的vi、emacs、gedit、DOS下的edit等。