百度编辑器的初步使用

商品发布中 需要使用到编辑器 在这里记录一下 问题和使用方法

附上百度编辑器的下载和说明文档的链接地址 戳这里

我下载了源码，所有版本都包括

在这里 主要跟着 examples来  里面有一个完整demo页面 completeDemo.html

在需要使用的界面中，引入相关资源（这几个资源是 demo的资源）

　　 编辑器配置　　
 　　<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
　　 是资源相对目录的配置 ，也可以直接引入 不用配置 
　　 <script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>　　

接下来看一下编辑器的配置ueditor.config.js

功能按钮介绍：

toolbars: [
[
'source', //源代码
'cleardoc', //清空文档
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'customstyle', //自定义标题
'|',
'simpleupload', //单图上传
'insertimage', //多图上传
'attachment', //附件
'emotion', //表情
'time', //时间
'date', //日期
'map', //Baidu地图
'edittip ', //编辑提示
'autotypeset', //自动排版
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'insertvideo', //视频
'|',
'anchor', //锚点
'undo', //撤销
'redo', //重做
'pagebreak', //分页
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'link', //超链接
'horizontal', //分隔线
'removeformat', //清除格式
'unlink', //取消链接
'|',
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'insertparagraphbeforetable', //"表格前插入行"
'edittable', //表格属性
'edittd', //单元格属性
'spechars', //特殊字符
'searchreplace', //查询替换
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'imagecenter', //居中
'lineheight', //行间距
'inserttable', //插入表格
'charts', // 图表
'preview', //预览
]
]

 

几个使用过程中 可能会遇到的bug:　　

1.一个是火狐浏览器，上传图片失败的问题  原博客链接

在image.js中 搜索：uploadComplete  将这个方法 加一个pre标签的过滤

var me = this;  
               try{  
                r=r.replace("<pre>", "").replace("</pre>", "");  
                   var json = eval('('+r+')');  
                   Base.callback(me.editor, me.dialog, json.url, json.state);  
               }catch (e){  
                   var lang = me.editor.getLang('image');  
                   Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');  
               }  

2.umeditor编辑器插件图片尺寸太大问题解决  原博客链接

这个问题是 原图片特别大 导致 编辑器内展现不下的问题，用这个方法解决完了以后 原图大小还是不会减小，只是在编辑层面可以正常看，在展示界面没有做到按比例缩小  这个我暂时还没想到解决办法 只是在展示界面 进行了超出隐藏

3.其他博客对于视频的一些bug解决办法 放在这里  方便以后查用