利用 Markdown 实现一个闪瞎眼的“最精简”富文本编辑器

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3247 天前的主题，其中的信息可能已经有所发展或是发生改变。

好吧就是之前那个 MarkdownIME ，当初版本是需要按回车才会转化的，后面经过了一大堆的修改，现在已经可以实时转化了！

在线 DEMO : http://laobubu.github.io/MarkdownIME/
源码 at 同性交友网 ： https://github.com/laobubu/MarkdownIME/

原来版本支持的 Markdown 语法是有些少，但是现在已经有了很大改善，包括但不限于：

原来就支持的 Markdown 语法
删除线（使用双波浪线~~括起来）
emoji 表情 :) （听说你们喜欢 :joy: 😂）
表格
Tex 数学公式（使用美元符号$括起来）

反正估计这玩意儿只会有几个人看，代码写得有点丑，目前是凑合能看的状况（ tabstop=4 ），有问题上 GitHub 发 issue 就是了，嗯。

再次求 star ： https://github.com/laobubu/MarkdownIME/

Markdown

语法

交友网

删除线

25 条回复 • 2016-03-25 16:57:04 +08:00

yuriko

2016-02-05 14:41:10 +08:00

感觉好棒，最近打算自己做博客，这个正好！

nameryan

2016-02-05 15:12:27 +08:00

很赞！要是能被各种在线编辑器集成，大有空间。但 markdown 毕竟还是小众语法。

gongjianhui

2016-02-05 15:21:45 +08:00

可是，怎么修改样式呢？
比如说我想把
```
**TEST**
```
修改为
```
## TEST
```
怎么处理？

POPOEVER

2016-02-05 15:24:50 +08:00

强力给 star

laobubu

2016-02-05 15:28:13 +08:00

@gongjianhui 目前没有修改样式的办法，等过后实现一个用 backspace 键删除样式的功能……

laobubu

2016-02-05 15:31:01 +08:00

@nameryan 感觉 Markdown 的语法很简单，而且很直观，要学习起来应该不是问题。

还有就是现在不知道怎么推广我这玩意儿，先放 V 站上盼有没有大佬路过了……

imeoer

2016-02-05 16:50:27 +08:00

@laobubu 很酷，测试了下达到了可用状态，以后有适用场景会考虑集成。最近也正在写个相关的东西，个人感觉虽然实时预览看起来直观，但是违背了 markdown 本身就可读的原则，仅有纯文本与适时的高亮在视觉上会显得更加简洁工整，让写作者更好的关注于内容，这也是我个人更喜欢纯文本而不是富文本编辑的原因。

ps. LZ 是成都人呢，以后好想回成都...

lichao

2016-02-05 17:13:42 +08:00

有个问题，如果 table 已经存在了，如何改变列数，如 3 列改成 4 列？

manfay

2016-02-05 17:30:41 +08:00

如果有一个纯文本与富文本切换键就完美了

Slienc7

2016-02-05 21:36:42 +08:00

Stared.
竟然没有 :doge: ；
这年头能用对 “地” 也是不容易了。

Sequencer

2016-02-05 22:36:20 +08:00

latex 有一点不是支持很好比如 mathrm 之类的语句

laobubu

2016-02-06 00:50:55 +08:00 via Android

@imeoer 嘻嘻，如果喜欢的话可以和他人或者社区分享一个😊

@lichao 目前对表格只是最基础的支持，还没有想好该怎么优雅的实现对列的编辑

@xgowex doge 不属于 emoji 诶～虽然可以通过写插件的方式实现这个功能的说…

@Sequencer 公式目前使用的是 Google 的公式图生成服务，如果有更好的生成服务的话可以替换上去

xcodebuild

2016-02-06 10:52:32 +08:00

非常酷！

xcodebuild

2016-02-06 10:55:11 +08:00

表格编辑像极了 orgmode ，忍不住再赞一条

Sequencer

2016-02-06 12:22:28 +08:00 via iPhone

你看看這個可不可以用做渲染？
http://latex.codecogs.com/eqneditor/editor.php
或者用 wiki 的渲染是最好的。

laobubu

2016-02-06 14:18:58 +08:00

@Sequencer 可以的，等过后的版本将其作为默认的渲染服务。

如果你是在你的 web 应用里使用 MarkdownIME ，那么其公式功能是需要“手动启用”的。将代码从原来的

MarkdownIME.Renderer.inlineRenderer.rules.unshift(new MarkdownIME.Addon.MathAddon())

修改为如下即可使用 codecogs.com 的公式服务：

var mathAddon = new MarkdownIME.Addon.MathAddon();
mathAddon.imgServer = 'http://latex.codecogs.com/gif.latex?';
MarkdownIME.Renderer.inlineRenderer.rules.unshift(mathAddon);

Sequencer

2016-02-06 19:41:36 +08:00 via iPhone

@laobubu 👌 謝謝！

Crazy4Anonymous

2016-02-07 11:31:36 +08:00

好棒！

wsph123

2016-02-11 03:06:41 +08:00 via iPhone

好酷！ star ！

qinfengyan

2016-02-12 01:05:35 +08:00

so cool and fast

HustLiu

2016-02-15 10:53:45 +08:00

感觉唯一的缺憾就是不可修改了。。但作为一个文本编辑器。。修改算是顶重要的吧=。=||楼主加油！看好你

fyxsky

2016-02-22 17:43:29 +08:00

加一个 markdown 编辑视图模式的切换按钮就行了。
点一下这个按钮，就显示 Markdown 编辑模式，就可以修改了。
参考 TextNut 。

laobubu

2016-03-25 10:51:14 +08:00 via Android

@imeoer 已经实现对列的修改了，当光标在表头上时：
1. 按下 insert 或者 shift + insert 可以在后面或者前面插入列。
2. 所在表头单元格为空时，按下 delete 或者 backspace 可以删除列。

imeoer

2016-03-25 12:53:04 +08:00

@laobubu 体验了下表格基本可用，就是似乎还有好些细节需要完善，不知道这些完善起来工作量大不大。

laobubu

2016-03-25 16:57:04 +08:00

@imeoer 可以去 GitHub 上开一个 issue 说一下详细情况哦，也可以在这里说一说，
万一能把这个帖子顶上去让大家看到呢 _(:з」∠)_ （逃