只有一個文件的開源富文本編輯器，麻雀雖小五臟俱全就是它了

許多開發者在頁面中使用文本編輯器時，有些時候要引入很多文件才能夠正常使用，讓開發者們多少感到有些麻煩。今天 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