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