商品发布中 需要使用到编辑器 在这里记录一下 问题和使用方法
附上百度编辑器的下载和说明文档的链接地址 戳这里
我下载了源码，所有版本都包括
在这里 主要跟着 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解决办法 放在这里 方便以后查用