ueditor 編輯器 簡單使用

首頁到官網下載相應版本：http://ueditor.baidu.com/website/download.html#ueditor

 

下載後保持文件目錄結構不要改動

 

引用

<!--編輯器-->
<script type="text/javascript" charset="utf-8" src="Lib/ueditor1_4_3_3-utf8-net/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="Lib/ueditor1_4_3_3-utf8-net/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="Lib/ueditor1_4_3_3-utf8-net/lang/zh-cn/zh-cn.js"></script>

 

演示一個頁面多個編輯器

html

簡介：

   <script id="editor_synopsis" type="text/plain" style="width:900px;height:300px;overflow:">
            </script>


原理：
   <script id="editor_principle" type="text/plain" style="width:900px;height:300px;">
            </script>


說明：
  <script id="editor_illustrate" type="text/plain" style="width:900px;height:300px;">
            </script>

 

 

 

js初始化編輯器

  //實驗簡介
            var editor_synopsis;
            //實驗原理
            var editor_principle;
            //操做說明
            var editor_illustrate;

            //工具欄圖標
            var _toolbars = [
    [
        //'anchor', //錨點
        'undo', //撤銷
        'redo', //重作
        'bold', //加粗
        'indent', //首行縮進
        //'snapscreen', //截圖
        'italic', //斜體
        'underline', //下劃線
        'strikethrough', //刪除線
        'subscript', //下標
        'fontborder', //字符邊框
        'superscript', //上標
        'formatmatch', //格式刷
        'source', //源代碼
        'blockquote', //引用
        'pasteplain', //純文本粘貼模式
        'selectall', //全選
        //'print', //打印
        //'preview', //預覽
        'horizontal', //分隔線
        'removeformat', //清除格式
        'time', //時間
        'date', //日期
        'link', //超連接
        'unlink', //取消連接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合併單元格
        'mergedown', //下合併單元格
        'deleterow', //刪除行
        'deletecol', //刪除列
        'splittorows', //拆分紅行
        'splittocols', //拆分紅列
        'splittocells', //徹底拆分單元格
        'deletecaption', //刪除表格標題
        'inserttitle', //插入標題
        'mergecells', //合併多個單元格
        'deletetable', //刪除表格
        'cleardoc', //清空文檔
        'insertparagraphbeforetable', //"表格前插入行"
        //'insertcode', //代碼語言
        'fontfamily', //字體
        'fontsize', //字號
        'paragraph', //段落格式
        'simpleupload', //單圖上傳
        'insertimage', //多圖上傳
        'edittable', //表格屬性
        'edittd', //單元格屬性
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查詢替換
        'map', //Baidu地圖
        //'gmap', //Google地圖
        //'insertvideo', //視頻
        'help', //幫助
        'justifyleft', //居左對齊
        'justifyright', //居右對齊
        'justifycenter', //居中對齊
        'justifyjustify', //兩端對齊
        'forecolor', //字體顏色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //無序列表
        'fullscreen', //全屏
        //'directionalityltr', //從左向右輸入
        //'directionalityrtl', //從右向左輸入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段後距
        //'pagebreak', //分頁
        //'insertframe', //插入Iframe
        'imagenone', //默認
        'imageleft', //左浮動
        'imageright', //右浮動
        //'attachment', //附件
        'imagecenter', //居中
        //'wordimage', //圖片轉存
        'lineheight', //行間距
        'edittip ', //編輯提示
        'customstyle', //自定義標題
        'autotypeset', //自動排版
        //'webapp', //百度應用
        'touppercase', //字母大寫
        'tolowercase', //字母小寫
        'background', //背景
        'template', //模板
        //'scrawl', //塗鴉
        //'music', //音樂
        'inserttable', //插入表格
        'drafts', // 從草稿箱加載
        'charts', // 圖表
    ]
            ];

            //編輯器配置參數
            var _ue_opt = {
                maximumWords: 2000, //容許的最大字符數
                elementPathEnabled: false, //是否啓用元素路徑，默認是顯示
                initialFrameWidth: 900, //初始化編輯器寬度，默認1000
                initialFrameHeight: 300, //初始化編輯器高度，默認320
                scaleEnabled: true, //是否能夠拉伸長高，默認true(當開啓時，自動長高失效)
                readonly: true,//編輯器初始化結束後，編輯區域是不是隻讀的，默認是false
                toolbars: _toolbars, //工具欄圖標
            };

            var ue_editor_synopsis = UE.getEditor('editor_synopsis', _ue_opt);
            

            var ue_editor_principle = UE.getEditor('editor_principle', _ue_opt);
            

            var ue_editor_illustrate = UE.getEditor('editor_illustrate', _ue_opt);

 

 

js初始化編輯內容

                    ue_editor_synopsis.ready(function () {

                        ue_editor_synopsis.setContent(jsonData.ExperimentRemark);

                    });

                    ue_editor_principle.ready(function () {

                        ue_editor_principle.setContent(jsonData.ExperimentTheory);

                    });

                    ue_editor_illustrate.ready(function () {

                        ue_editor_illustrate.setContent(jsonData.OperationInstruction);

                    });

 

 

js

           //判斷編輯器裏是否有內容
                if (!ue_editor_synopsis.hasContents()) {
                    objPopupMsg.Alert("請輸入實驗簡介");
                    return false;
                }

                //判斷編輯內容字符長度 純文本內容
                if (ue_editor_synopsis.getContentTxt().length > 2000)
                {
                    objPopupMsg.Alert("實驗簡介字數超過限定值");
                    return false;
                }

//獲取編輯器html內容
ue_editor_synopsis.execCommand("getlocaldata"),//實驗簡介

 

 

 

上傳圖片會改動一點配置json文件

這裏有一些簡要說明：http://fex.baidu.com/ueditor/#server-path

在 Lib\ueditor1_4_3_3-utf8-net\net\config.json 文件裏的 imageUrlPrefix 和 imageManagerUrlPrefix

 

上傳到服務器後的上傳圖片錯誤

App_Code文件也要上傳到服務器

參考：http://fex.baidu.com/ueditor/#server-net