V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
laobubu
V2EX  ›  分享创造

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

  •  2
     
  •   laobubu ·
    laobubu · 2016-02-05 14:04:00 +08:00 · 10662 次点击
    这是一个创建于 3214 天前的主题,其中的信息可能已经有所发展或是发生改变。

    好吧就是之前那个 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/

    25 条回复    2016-03-25 16:57:04 +08:00
    yuriko
        1
    yuriko  
       2016-02-05 14:41:10 +08:00
    感觉好棒,最近打算自己做博客,这个正好!
    nameryan
        2
    nameryan  
       2016-02-05 15:12:27 +08:00
    很赞!要是能被各种在线编辑器集成,大有空间。但 markdown 毕竟还是小众语法。
    gongjianhui
        3
    gongjianhui  
       2016-02-05 15:21:45 +08:00
    可是,怎么修改样式呢?
    比如说我想把
    ```
    **TEST**
    ```
    修改为
    ```
    ## TEST
    ```
    怎么处理?
    POPOEVER
        4
    POPOEVER  
       2016-02-05 15:24:50 +08:00
    强力给 star
    laobubu
        5
    laobubu  
    OP
       2016-02-05 15:28:13 +08:00
    @gongjianhui 目前没有修改样式的办法,等过后实现一个用 backspace 键删除样式的功能……
    laobubu
        6
    laobubu  
    OP
       2016-02-05 15:31:01 +08:00
    @nameryan 感觉 Markdown 的语法很简单,而且很直观,要学习起来应该不是问题。

    还有就是现在不知道怎么推广我这玩意儿,先放 V 站上盼有没有大佬路过了……
    imeoer
        7
    imeoer  
       2016-02-05 16:50:27 +08:00
    @laobubu 很酷,测试了下达到了可用状态,以后有适用场景会考虑集成。最近也正在写个相关的东西,个人感觉虽然实时预览看起来直观,但是违背了 markdown 本身就可读的原则,仅有纯文本与适时的高亮在视觉上会显得更加简洁工整,让写作者更好的关注于内容,这也是我个人更喜欢纯文本而不是富文本编辑的原因。

    ps. LZ 是成都人呢,以后好想回成都...
    lichao
        8
    lichao  
       2016-02-05 17:13:42 +08:00
    有个问题,如果 table 已经存在了,如何改变列数,如 3 列改成 4 列?
    manfay
        9
    manfay  
       2016-02-05 17:30:41 +08:00
    如果有一个纯文本与富文本切换键就完美了
    Slienc7
        10
    Slienc7  
       2016-02-05 21:36:42 +08:00
    Stared.
    竟然没有 :doge: ;
    这年头能用对 “地” 也是不容易了。
    Sequencer
        11
    Sequencer  
       2016-02-05 22:36:20 +08:00
    latex 有一点不是支持很好比如 mathrm 之类的语句
    laobubu
        12
    laobubu  
    OP
       2016-02-06 00:50:55 +08:00 via Android
    @imeoer 嘻嘻,如果喜欢的话可以和他人或者社区分享一个😊

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

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

    @Sequencer 公式目前使用的是 Google 的公式图生成服务,如果有更好的生成服务的话可以替换上去
    xcodebuild
        13
    xcodebuild  
       2016-02-06 10:52:32 +08:00
    非常酷!
    xcodebuild
        14
    xcodebuild  
       2016-02-06 10:55:11 +08:00
    表格编辑像极了 orgmode ,忍不住再赞一条
    Sequencer
        15
    Sequencer  
       2016-02-06 12:22:28 +08:00 via iPhone
    你看看這個可不可以用做渲染?
    http://latex.codecogs.com/eqneditor/editor.php
    或者用 wiki 的渲染是最好的。
    laobubu
        16
    laobubu  
    OP
       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
        17
    Sequencer  
       2016-02-06 19:41:36 +08:00 via iPhone
    @laobubu 👌 謝謝!
    Crazy4Anonymous
        18
    Crazy4Anonymous  
       2016-02-07 11:31:36 +08:00
    好棒!
    wsph123
        19
    wsph123  
       2016-02-11 03:06:41 +08:00 via iPhone
    好酷! star !
    qinfengyan
        20
    qinfengyan  
       2016-02-12 01:05:35 +08:00
    so cool and fast
    HustLiu
        21
    HustLiu  
       2016-02-15 10:53:45 +08:00
    感觉唯一的缺憾就是不可修改了。。但作为一个文本编辑器。。修改算是顶重要的吧=。=||楼主加油!看好你
    fyxsky
        22
    fyxsky  
       2016-02-22 17:43:29 +08:00
    加一个 markdown 编辑视图模式的切换按钮就行了。
    点一下这个按钮,就显示 Markdown 编辑模式,就可以修改了。
    参考 TextNut 。
    laobubu
        23
    laobubu  
    OP
       2016-03-25 10:51:14 +08:00 via Android
    @imeoer 已经实现对列的修改了,当光标在表头上时:
    1. 按下 insert 或者 shift + insert 可以在后面或者前面插入列。
    2. 所在表头单元格为空时,按下 delete 或者 backspace 可以删除列。
    imeoer
        24
    imeoer  
       2016-03-25 12:53:04 +08:00
    @laobubu 体验了下表格基本可用,就是似乎还有好些细节需要完善,不知道这些完善起来工作量大不大。
    laobubu
        25
    laobubu  
    OP
       2016-03-25 16:57:04 +08:00
    @imeoer 可以去 GitHub 上开一个 issue 说一下详细情况哦,也可以在这里说一说,
    万一能把这个帖子顶上去让大家看到呢 _(:з」∠)_ (逃
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2647 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:51 · PVG 19:51 · LAX 03:51 · JFK 06:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.