UMeditor強大的富文本編輯器，UEditor的Mini版本

時間 2019-11-08

標籤 umeditor 強大文本編輯器 ueditor mini 版本简体版

原文原文鏈接

UMeditor

UMeditor富文本編輯器

UMeditor，簡稱UM，是 ueditor 的簡版。是爲知足廣大門戶網站對於簡單發帖框和回覆框的需求，專門定製的在線富文本編輯器。咱們的目標不只是要提升在線編輯的編輯體驗，也但願能改變前端技術中關於富文本技術的門檻，讓你們再也不以爲這塊是個大坑。javascript

主要特色

輕量: 主文件的代碼量爲139k。
加載速度更快: 放棄了使用傳統的iframe模式，採用了div的加載方式，以達到更快的加載速度和零加載失敗率。
可定製: 配置項完善，可定製程度高。
可擴展: 代碼層次拆分清晰，功能以插件形式掛接，可靈活定製須要的功能。
多後臺支持: 支持php、asp、jsp、.net四種後臺部署代碼
功能豐富: 支持插入公式、粘貼QQ截屏、拖放上傳圖片、插入地圖、草稿箱功能

入門部署和體驗

第一步：下載編輯器

到官網下載 umeditor 最新版源碼版本，下載以後打開 _examples/index.html 就能夠看到演示例子。[下載頁面]php

第二步：部署編輯器到頁面

解壓下載的包，放到你的項目中。
在你的頁面要插入編輯器的位置，插入代碼：

<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
    這裏寫你的初始化內容
</script>

在<head></head>標籤最後，插入須要引用的文件和實例化編輯器的代碼(注意修改引用文件的路徑), 其中：UM 依賴 jquery 和 etpl , 注意引入文件的順序

<!-- 樣式文件 -->
<link rel="stylesheet" href="./umeditor/themes/default/css/umeditor.css">
<!-- 引用jquery -->
<script src="./umeditor/third-party/jquery.min.js"></script>
<!-- 引入 etpl -->
<script type="text/javascript" src="../third-party/template.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="./umeditor/umeditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="./umeditor/umeditor.js"></script>
<!-- 語言包文件 -->
<script type="text/javascript" src="./umeditor/lang/zh-cn/zh-cn.js"></script>
<!-- 實例化編輯器代碼 -->
<script type="text/javascript">
    $(function(){
        window.um = UM.getEditor('container', {
        	/* 傳入配置參數,可配參數列表看umeditor.config.js */
            toolbar: ['undo redo | bold italic underline']
        });
    });
</script>

這時候你再瀏覽器打開你的頁面，看到下面這樣的編輯器，說明你已部署成功。

第三步：獲取和設置編輯器的內容

/* 獲取編輯器內容 */
var html = um.getContent();
var txt = um.um.getContentTxt();

/* 設置編輯器內容 */
um.setContent('要設置的編輯器內容.');