分享几款 Web 文本编辑器

2015-04-18 18:17:56 +08:00
 Khlieb

这些编辑器可以在浏览器上打字,有的甚至可以撸代码,也可以博客、论坛、新闻站之类的网站上面插入输入框,如果支持某些像 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 编辑器,定制性也很强。

3028 次点击
所在节点    分享发现
4 条回复
Khlieb
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
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
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
2016-02-18 13:19:13 +08:00
有比较方便的在 react 上能用的吗?我希望自己能够控制数据。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/184590

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX