龙空技术网

IT人推荐 | WEB 富文本编辑器 iceEditor

大叔爱文学 153

前言:

今天你们对“富文本编辑器使用”可能比较关注,各位老铁们都需要剖析一些“富文本编辑器使用”的相关知识。那么小编也在网络上搜集了一些对于“富文本编辑器使用””的相关资讯,希望我们能喜欢,咱们一起来了解一下吧!

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

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

iceEditor.js的引用禁止放在head标签内,请尽量放在body中或body后面!

使用

<div id="editor"> 欢迎使用iceEditor富文本编辑器 </div>
//第一步:创建实例化对象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!');

git地址:

标签: #富文本编辑器使用