V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Khlieb
V2EX  ›  分享发现

分享几款 Web 文本编辑器

  •  2
     
  •   Khlieb · 2015-04-18 18:17:56 +08:00 · 3039 次点击
    这是一个创建于 3537 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这些编辑器可以在浏览器上打字,有的甚至可以撸代码,也可以博客、论坛、新闻站之类的网站上面插入输入框,如果支持某些像 font-variantfont-feature-settings 这样的高级文字排版特性的话,那么还可以用来测试字体。

    FCKeditor
    据说这是最出名的一个 HTML 编辑器,能在网页上面做出电脑编辑软件的特性。能提供完整的 ASP、ASP.NET、PHP、Java、Perl、Phyton 等语言的集成包。支持皮肤、拼写检查、高亮等。

    NicEdit
    这是一个能集成到任意网页上的 JS 脚本,能处理任何元素或者 div,或者把标准文本转换成富文本来编辑。

    TinyMCE
    这是一款 LGPL 许可的“所见即所得”(WYSIWYG)式的在线 HTML 编辑器,可以把文字区或者其他 HTML 元素转换成编辑以后的样子。

    WMD: The Wysiwym Markdown Editor
    简单、轻量的 HTML 编辑器,专门为博客、论坛优化。

    Free Text Box
    最常用的适合 ASP.NET 的 HTML 编辑器。

    WYMeditor
    这是一款基于 web 的 XHTML 编辑器,用来生成结构严谨、遵守 W3C XHTML 规范的 XHTML 代码。

    BlueShoes Wysiwyg Editor
    这是基于 DHTML 和 Javascript 的编辑器,有很多有意思的特性,比如能改变尺寸、选择特殊符号、用取色工具取色。

    markItUp
    这是建立在 jQuery 库基础上的 JavaScript 插件,这个体积小,定制性不错。

    KindEditor
    这是一款国产的基于 web 的 XHTML 编辑器,定制性也很强。

    4 条回复    2016-02-18 13:19:13 +08:00
    Khlieb
        1
    Khlieb  
    OP
       2015-04-18 19:19:04 +08:00
    至于上面所提的高级文字排版特性,我在这里用代码举几个例子,你把这些粘贴到那些那些编辑器的文本框测试就能见分晓了,可能须要安装某些字体(如代码所示)如果需要的话可以往里面加 font-size 来调大字号:

    <p style="font-family: FreeSerif; font-feature-settings: 'smcp'; -webkit-font-feature-settings: 'smcp';">Hello, World!</p><!-- 小型大写字母 -->
    <p style="font-family: FreeSerif, 'Linux Libertine', 'EB Garamond 12'; font-feature-settings: 'liga' 1;">fish</p><!-- 把 f 和 i 拼在一起 -->
    <p style="font-family: 'Linux Libertine', FreeSerif; font-feature-settings: 'hlig'; -webkit-font-feature-settings: 'hlig';">Questo è strano assai!</p><!-- 旧式连字,两个字母用弧线相连 -->
    <p style="font-family: 'Linux Libertine'; font-feature-settings: 'onum'; -webkit-font-feature-settings: 'onum';">1234567890</p><!-- 不齐线数字 -->
    <p lang="sr" style="font-family: FreeSerif, 'Linux Libertine'; font-feature-settings: 'locl'; -webkit-font-feature-settings: 'locl';">Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p><!-- 塞尔维亚文西里尔字母变体 -->
    <p lang="de" style="font-family: FreeSerif, 'Linux Libertine'; font-feature-settings: 'locl', 'dlig'; -webkit-font-feature-settings: 'locl', 'dlig';">Bersarinplatz</p><!-- 德文 tz 连字 -->

    有些字体会用版式标签(tag)来呈现出某些特殊的排版特性,这些都要通过 4 个字符串的代码切换出来。这些标签在微软网站上面有明示,你可以这个帖子找到:
    https://v2ex.com/t/180133
    Khlieb
        2
    Khlieb  
    OP
       2015-04-18 19:28:58 +08:00
    再做一个实例让大家往这些编辑器里面测试:
    <p style="font-family: 'Linux Libertine', 'Linux Libertine O', 'Linux Libertine G'; font-feature-settings: 'smcp', 'ss05'; -webkit-font-feature-settings: 'smcp', 'ss05'; font-size:3em">WikipediA</p>
    Khlieb
        3
    Khlieb  
    OP
       2015-04-21 21:35:45 +08:00
    大家还可以把下面这段代码复制到这些编辑器里面,看看哪个表现的好:

    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
    <semantics>
    <mtable displaystyle="true" columnspacing="0em" columnalign="right left right left right left right left right left">
    <mtr>
    <mtd>
    <mi>V</mi>
    <mo stretchy="false">(</mo>
    <mi>R</mi>
    <mo stretchy="false">)</mo>
    </mtd>
    <mtd>
    <mo>=</mo>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mi>&phi;</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mrow>
    <mn>2</mn>
    <mi>&pi;</mi>
    </mrow>
    </msubsup>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mi>&theta;</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mi>&pi;</mi>
    </msubsup>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mi>r</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mi>R</mi>
    </msubsup>
    <msup>
    <mi>r</mi>
    <mn>2</mn>
    </msup>
    <mo rspace="0em" lspace="0em">sin</mo>
    <mo stretchy="false">(</mo>
    <mi>&theta;</mi>
    <mo stretchy="false">)</mo>
    <mi>d</mi>
    <mi>r</mi>
    <mi>d</mi>
    <mi>&theta;</mi>
    <mi>d</mi>
    <mi>&phi;</mi>
    </mtd>
    </mtr>
    <mtr>
    <mtd/>
    <mtd>
    <mo>=</mo>
    <mrow>
    <mo>(</mo>
    <mrow>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mi>&phi;</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mrow>
    <mn>2</mn>
    <mi>&pi;</mi>
    </mrow>
    </msubsup>
    <mi>d</mi>
    <mi>&phi;</mi>
    </mrow>
    <mo>)</mo>
    </mrow>
    <mrow>
    <mo>(</mo>
    <mrow>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mi>&theta;</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mi>&pi;</mi>
    </msubsup>
    <mo rspace="0em" lspace="0em">sin</mo>
    <mo stretchy="false">(</mo>
    <mi>&theta;</mi>
    <mo stretchy="false">)</mo>
    <mi>d</mi>
    <mi>&theta;</mi>
    </mrow>
    <mo>)</mo>
    </mrow>
    <mrow>
    <mo>(</mo>
    <mrow>
    <msubsup>
    <mo>&int;</mo>
    <mrow>
    <mi>r</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mi>R</mi>
    </msubsup>
    <msup>
    <mi>r</mi>
    <mn>2</mn>
    </msup>
    <mi>d</mi>
    <mi>r</mi>
    </mrow>
    <mo>)</mo>
    </mrow>
    </mtd>
    </mtr>
    <mtr>
    <mtd/>
    <mtd>
    <mo>=</mo>
    <msubsup>
    <mrow>
    <mo>[</mo>
    <mi>&phi;</mi>
    <mo>]</mo>
    </mrow>
    <mrow>
    <mi>&phi;</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mrow>
    <mn>2</mn>
    <mi>&pi;</mi>
    </mrow>
    </msubsup>
    <msubsup>
    <mrow>
    <mo>[</mo>
    <mrow>
    <mo>-</mo>
    <mo rspace="0em" lspace="0em">cos</mo>
    <mo stretchy="false">(</mo>
    <mi>&theta;</mi>
    <mo stretchy="false">)</mo>
    </mrow>
    <mo>]</mo>
    </mrow>
    <mrow>
    <mi>&theta;</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mi>&pi;</mi>
    </msubsup>
    <msubsup>
    <mrow>
    <mo>[</mo>
    <mfrac>
    <msup>
    <mi>r</mi>
    <mn>3</mn>
    </msup>
    <mn>3</mn>
    </mfrac>
    <mo>]</mo>
    </mrow>
    <mrow>
    <mi>r</mi>
    <mo>=</mo>
    <mn>0</mn>
    </mrow>
    <mi>R</mi>
    </msubsup>
    </mtd>
    </mtr>
    <mtr>
    <mtd/>
    <mtd>
    <mo>=</mo>
    <mfrac>
    <mn>4</mn>
    <mn>3</mn>
    </mfrac>
    <mi>&pi;</mi>
    <msup>
    <mi>R</mi>
    <mn>3</mn>
    </msup>
    </mtd>
    </mtr>
    </mtable>
    <annotation encoding="TeX">\begin{aligned} V(R) &amp;= \int_{\varphi=0}^{2 \pi} \int_{\theta=0}^{\pi} \int_{r=0}^{R} r^2 \sin(\theta) dr d\theta d\varphi \\ &amp;= \left( \int_{\varphi=0}^{2 \pi} d\varphi \right) \left( \int_{\theta=0}^{\pi} \sin(\theta) d\theta \right) \left( \int_{r=0}^{R} r^2 dr \right) \\ &amp;= \left[ \varphi \right]_{\varphi=0}^{2 \pi} \left[ -\cos(\theta) \right]_{\theta=0}^{\pi} \left[ \frac{r^3}{3} \right]_{r=0}^{R} \\ &amp;= \frac{4}{3} \pi R^3 \end{aligned}</annotation>
    </semantics>
    </math>
    jackyzhai
        4
    jackyzhai  
       2016-02-18 13:19:13 +08:00
    有比较方便的在 react 上能用的吗?我希望自己能够控制数据。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4708 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:37 · PVG 13:37 · LAX 21:37 · JFK 00:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.