资讯频道 → Web前端
阅读更多

3顶
3踩

Web前端

转载新闻 5 款免费实用的富文本编辑器

2013-11-25 10:27 by 见习编辑 tuhaihe 评论(6) 有24993人浏览
yui yahoo tinymce 编辑器
Web 应用经常会用到富文本编辑器功能，当然如果是 JavaScript 大牛，重复造轮子也是可以的，如果想省时省力，可以关注下下面 5 款免费的文本编辑器框架。

1.  widgEditor

widgEditor 体积小，只有 33.4 KB，简洁实用，支持 HTML 编码。

主要优点：朴素，代码小，易用；
缺点：功能不足，不易扩展，缺乏第三方支持。



使用方式：将源文件下载到本地磁盘，在适当的地方用下面代码进行引用 

<link rel="stylesheet" href="widgEditor/css/widgEditor.css" />
<script src="widgEditor/scripts/widgEditor.js"></script>

2.  TinyMCE

优点：独立，易用；
缺点：代码量大



使用方式： 

<textarea id="TypeHere">Type some text here.</textarea>
<textarea id="NoTinyMCE">This is a text area.</textarea>

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="application/x-javascript">
tinymce.init({selector:'#TypeHere'});
</script>

3.  MarkItUp

MarkItUp 基于jQuery ，是一款 jQuery 插件，非常灵活，轻量，下载页有许多扩展，插件，皮肤，解析器和其它功能，MarkItUp 学习曲线比较陡峭，特别是把一些功能组合使用的时候。



使用方式： 

<textarea id="markItUp" cols="80" rows="20">
Some Sample Text
</textarea>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="MarkItUp/markitup/jquery.markitup.js"></script>
<script src="MarkItUp/markitup/sets/default/set.js"></script>

<link rel="stylesheet" href="MarkItUp/markitup/skins/simple/style.css" />
<link rel="stylesheet" href="MarkItUp/markitup/sets/default/style.css" />

<script>
$(document).ready(function() {
$('#markItUp').markItUp(mySettings);
});
</script>

4.  NicEdit

NicEdit 简便快捷，包含很全的格式化功能，支持各种元素类型。



使用方式： 

<textarea id="NicEdit" cols="80" rows="5">Some Sample Text</textarea>
<textarea id="NotNicEdit" cols="80" rows="5">Some Sample Text</textarea>
<div id="NicEdit2">Some Sample Text</div>

<script src="http://js.nicedit.com/nicEdit-latest.js"></script>

<script>
bkLib.onDomLoaded(function()
{
new nicEditor().panelInstance('NicEdit');
new nicEditor().panelInstance('NicEdit2');
});
</script>

5.  YUI 2

YUI2是一个极简的富文本编辑器。




使用方式： 
<textarea id="RichTextEdit" cols="100" rows="5">Some Sample Text</textarea>

<body class="yui-skin-sam">

<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css" />

<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js"></script>

<script>
(function()
{
new YAHOO.widget.SimpleEditor('RichTextEdit').render();
})();
</script>
  • 大小: 41.5 KB
  • 大小: 9.4 KB
  • 大小: 35.1 KB
  • 大小: 27.9 KB
  • 大小: 18.9 KB
  • 大小: 13.2 KB
来自: ODeveloper
3
顶
3
踩
评论 共 6 条 请登录后发表评论
6 楼 fly_宇光十色 2014-01-13 14:51
mfkvfn 写道
为什么没有KindEditor?

kindEditor挺好用的 
5 楼 ad6543210 2013-11-28 08:14
tuhaihe 写道
mfkvfn 写道
为什么没有KindEditor?

KindEditor和UEditor是对中文支持比较好的，这里的介绍没有涉及，可以在以后进行专门的总结，你还有其他推荐的吗？

CKeditor

還有為啥前兩個有講到優缺點，後三個都沒有
4 楼 yixiandave 2013-11-26 16:31
fishnobone 写道
我觉得UEditor很不错，百度的，虽说英文能力对开发是有需求的，但是，能有中文API，为什么不支持呢？

UEditor确实不错
3 楼 tuhaihe 2013-11-26 15:24
mfkvfn 写道
为什么没有KindEditor?

KindEditor和UEditor是对中文支持比较好的，这里的介绍没有涉及，可以在以后进行专门的总结，你还有其他推荐的吗？
2 楼 mfkvfn 2013-11-26 15:17
为什么没有KindEditor?
1 楼 fishnobone 2013-11-25 15:51
我觉得UEditor很不错，百度的，虽说英文能力对开发是有需求的，但是，能有中文API，为什么不支持呢？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • H5移动端，富文本编辑器 wangEditor

    移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台...

  • 免费JS富文本编辑器 总有一款会适合你

    什么是富文本编辑器? 概述: javascript Text Editor ​ 我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟...

  • WPF富文本编辑器,开源代码demo仿word

    基本的文本编辑，查看Html源码、打印、导出文本文件、插入图片、插入表格等，可作为参考使用

  • QT5.9.0实现的QWidget版富文本编辑器

    为啥最多才能收5分，这让我很无语，里面实现了很多功能，包括图片加载，上标下标之类

  • CSDN 富文本编辑器的优化建议（1）

    这是本系列的第一篇文章，我将谈谈我为什么喜欢用富文本编辑器，以及能否让 富文本编辑器也支持"内联代码片" 功能，字体功能的提议。 这些优化意见仅个人以 "用户" 角度提出的看法，需求不合理之处还请见谅，希望能...

  • 仿简书富文本编辑器

    仿简书富文本编辑器，完美重现

  • 移动端H5 富文本编辑器

    uniapp组件 可以打包成H5 地址 ：https://ext.dcloud.net.cn/plugin?id=8342

  • 移动端(html5)富文本编辑器,vue移动端中使用vue-html5-editor富文本编辑器详解

    富文本编辑器的应用常见于PC端的后台文章管理，但如果我们需求需要在手机端上使用富文本，我们要如何使用呢？vue-html5-editor富文本编辑器的出现，使手机端上对于富文本的操作更加便捷！本文简要介绍如何基础使用...

  • 前端Quill实现富文本编辑器

    常见的富文本编辑器有Quill、Draft.js、TinyMCE、wangEditor、ProseMirror、Tiptap、CKEditor5、Jodit、kindeditor等等。本文主要介绍通过 Quill 来实现富文本编辑器。Quill 是一个开源免费具有跨平台和跨浏览器支持...

  • 几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍

    富文本编辑器 　富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于...　作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开...

  • html实现富文本编辑器,前端程序员福利，6款轻量级富文本编辑器，轻松实现富文本编辑...

    1.国产富文本编辑wangEditor基于javascript跟css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费，样式可自定义typecho 富文本编辑器，菜单栏可以自定义配置。下载：使用：2.QuillQuill 是一个开源的富文本...

  • 9款 Vue 富文本编辑器

    Trumbowyg 是一个轻量，可...编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox。基于bootstrap,比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。

  • 富文本编辑器Ueditor实战（一）

    本文简单介绍Ueditor富文本编辑器的简单部署。在如今越来越丰富的富页面体验中，我们不仅仅满足于简单文本的编辑和展示。而可以由用户自定义的交互式制作模式，将极大的提高页面的交互性和灵活性，满足用户制作需求...

  • Android富文本编辑器源码

    富文本编辑器Android源码,对源码分析详见我的博客http://blog.csdn.net/codehxy/article/details/25641339

  • 推荐几款好用的富文本编辑器

    　作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开发上讲，每个富文本编辑器的用法都是有区别的。 　下面是我收集的一些业界...

  • 解决CSDN富文本编辑器回车换行间距过大

    在CSDN富文本编辑器中直接按回车（Enter）换行后文本间距会很大，解决方法是同时按住Shift+Enter,换行后间距就会很小！ 如下图所示：原理： Enter 产生硬回车，它在换行的同时也起着段落分隔的作用。 Shift + ...

  • tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、excel带格式粘贴

    tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、excel带格式粘贴。demo.html

  • 富文本编辑器开发系列-1-基础概念

    文章目录前言富文本编辑器的基本发展史1.0 时代 —— 原始时代，`contenteditable` 大法好2.0 时代 —— 现代化，视图与模型分离3.0 时代 —— 后现代， 抛弃 `contenteditable`基础概念编辑区选区拖蓝光标基本API`...

  • 使用PyQt5创建个简单富文本编辑器

    这是一个富文本编辑器，简单未完善版的。 功能： 1 字体设置 2 字号设置 3 字体颜色 4 字体底色 5 加粗 6 斜体 7 下滑线 8 对齐方式 缺陷，还没做图片功能。 使用方式: 实例化 obj = RichTextWindow() 只想要文字...

  • 整理15款实用javascript富文本编辑器

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码... 2bootstrap-wysiwyg 官方网址：...

Global site tag (gtag.js) - Google Analytics