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