只有一个文件的开源富文本编辑器，麻雀虽小五脏俱全就是它了

许多开发者在页面中使用文本编辑器时，有些时候要引入很多文件才能够正常使用，让开发者们多少感到有些麻烦。今天 Gitee 为大家推荐的这款编辑器就主打原生开发和轻量，对于很多开发者来说会是一个不错的选择。

项目名称：iceEditor

项目作者：冰优

开源许可协议：MIT

项目简介：iceEditor 是一款简约风格的富文本编辑器，体型十分娇小，无任何依赖，整个编辑器只有一个文件，功能却很不平凡！简约的唯美设计，简洁、极速、使用它的时候不需要引用 jQuery、font、css……等文件，因为整个编辑器只是一个 Js，支持上传图片、附件，支持添加音乐、视频！

纯原生开发，无任何依赖，冰清玉洁
响应式布局，适应任何分辨率的设备
整个编辑器只有一个文件，高效便捷
简约的唯美设计，简洁、极速

那么我们如何去使用这款编辑器呢？作者在 Readme 中也为大家说明了使用方法：

//第一步：创建实例化对象
var e = new ice.editor('content');//第二步：配置图片或附件上传提交表单的路径
e.uploadUrl="/iceEditor/src/upload.php";//第三步：配置菜单（默认加载全部，无需配置）
e.menu = ['backColor',                 //字体背景颜色'fontSize',                  //字体大小'foreColor',                 //字体颜色'bold',                      //粗体'italic',                    //斜体'underline',                 //下划线'strikeThrough',             //删除线'justifyLeft',               //左对齐'justifyCenter',             //居中对齐'justifyRight',              //右对齐'indent',                    //增加缩进'outdent',                   //减少缩进'insertOrderedList',         //有序列表'insertUnorderedList',       //无序列表'superscript',               //上标'subscript',                 //下标'createLink',                //创建连接'unlink',                    //取消连接'insertHorizontalRule',      //水平线'table',                     //表格'files',                     //附件'music',                     //音乐'video',                     //视频'insertImage',               //图片'removeFormat',              //格式化样式'code',                      //源码'line'                       //菜单分割线
];//第四步：创建
e.create(

设置编辑器尺寸

var e = new ice.editor('content');
e.width='700px';   //宽度
e.height='300px';  //高度
e.create();

禁用编辑器

var e = new ice.editor('content');
e.disabled=true;
e.create();

获取内容

var e = new ice.editor('content');
console.log(e.getHTML());  //获取HTML格式内容
console.log(e.getText());  //获取Text格式内容

设置内容

var e = new ice.editor('content');
e.setValue('hello world！');

追加内容

var e = new ice.editor('content');
e.addValue('hello world！');

如果你对这款编辑器有更多的兴趣，欢迎访问项目仓库地址：https://gitee.com/iceui/iceEditor，也可以加入 iceEditor 官方群：324415936 参与讨论。

Gitee 上还有更多文本编辑器开源项目，欢迎前往了解：https://gitee.com/explore/text-editor

只有一个文件的开源富文本编辑器，麻雀虽小五脏俱全就是它了相关推荐

tiptap - 基于 vue 的优雅流畅的开源富文本编辑器
一款专为 vue.js 打造,设计优雅,体验流畅舒服的现代富文本编辑器. 关于 Tiptap Tiptap 是一款专为 vue 打造的简洁明快的富文本编辑器,通过简单的设置能为用户提供多种优秀的文字编 ...
asp.net中使用开源富文本编辑器xhEditor
1.首先下载xhEditor源代码文件,这里附上两个不同版本的源代码文件.本教程使用1.1.14版本自行下载版本 2.在VS中新建解决方案,创建一个Web页面(MVC页面也可),新建两个文件夹.一个 ...
几款开源富文本编辑器优缺点比较
1.百度UEditor 优点:插件多,基本满足各种需求,类似贴吧中的回复界面. 缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速 ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
富文本编辑器-Ueditor
富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱.它的应用也 ...
富文本编辑器 java_HtmlBox富文本编辑器的使用
我们下面需要做的是在项目里面提供给用户一个富文本编辑区域. 一.什么是富文本编辑富文本编辑器,Multi-function Text Editor, 简称 MTE, 它提供类似于 Microsoft ...
【推荐】1657- 灵活可扩展，2023年值得尝试的13款富文本编辑器
作为前端开发人员,我们经常需要为网站和应用程序添加文本内容.与传统的文本编辑器不同,富文本编辑器可让您轻松创建各种类型的文本内容,包括加粗字体.斜体字.框架.列表.图片和视频等. 本文我将向大家推荐 ...
14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

只有一个文件的开源富文本编辑器，麻雀虽小五脏俱全就是它了

只有一个文件的开源富文本编辑器，麻雀虽小五脏俱全就是它了相关推荐

最新文章

热门文章