商业源码 如何简化百度编辑器Ueditor功能按钮
本篇文章的主要内容是教大家如何在Html里插入百度富文本编辑器，感兴趣的朋友可以了解一下，希望能对你有所帮助。
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,假如你用百度富文本编辑器,首先需要下载好百度编辑器的demo，然后创建ueditorhtml文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>百度编辑器</title>
</head>
<body>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditorconfigjs"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditorallminjs"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cnjs"></script>
<script id="editor" type="text/plain" name="gdesc" style="width:100%;height:350px;"></script>
<script type="text/javascript">
//实例化编辑器
var ue = UEgetEditor('editor', {});
</script>
</body>
</html>到这里在浏览器打开上面的ueditorhtml文件就能看到如下图所示:
这是实例化后的初始编辑器,里面的功能有很多,其中有一部分可能是我们完全用不到的,想定制怎么办呢别捉急,百度提供了可以定制的功能,将上面实例化编辑器的js代码改为以下代码:
<script type="text/javascript">
//实例化编辑器
var ue = UEgetEditor('editor', {
toolbars: [
[
'undo', //撤销
'bold', //加粗
'underline', //下划线
'preview', //预览
'horizontal', //分隔线
'inserttitle', //插入标题
'cleardoc', //清空文档
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'attachment', //附件
'music', //音乐
'inserttable', //插入表格
'emotion', //表情
'insertvideo', //视频
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'fullscreen', //全屏
'edittip ', //编辑提示
'customstyle', //自定义标题
'template', //模板
]
]
});
</script>刷新ueditorhtml页面你就会看到变化了:
想定制什么功能,只需要参照上面下载的编辑器demo内的ueditorconfigjs文件中toolbars属性,将对应的字符串添加进去即可:
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help'
]]ueditorconfigjs文件可以定制编辑器的很多功能,只需要将对应属性前面的'//'去掉,true为开启,false为关闭进行设置即可比如:
//elementPathEnabled
//是否启用元素路径，默认是显示
,elementPathEnabled : false
//wordCount
,wordCount:false //是否开启字数统计
//,maximumWords:10000 //允许的最大字符数 // 是否自动长高,默认true
,autoHeightEnabled:false
按照上面代码修改完ueditorconfigjs文件,刷新页面你会看到不一样的地方:
下面的元素路径和字数统计都消失了,是不是更加美观了呢O(∩_∩)O~
实际应用时我们还有可能在一个域名下上传百度编辑器编辑的内容(例如:在www52lnampcom域名下上传了一张)，而需求不单单是要在这域名下展示,还需要可以在其它域名下展示,这时就会出现不存在的情况，
这是因为百度编辑器的配置文件中默认的上传路径是相对路径，也就是说上面上传的的地址是相对于当前的域名进行上传的,只有在你上传的域名下可以展示,其它域名是显示不出来的,
如果要在另外一个域名上展示的话只需要修改配置文件为绝对路径就可以了，打开上面下载的demo，找到php/configjson文件,打开后你会看到
其中imageUrlPrefix这个属性加上域名即可:"imageUrlPrefix": "http://wwwxxxcom", / 访问路径前缀 /
需要注意的是添加域名的时候必须带上http or https,只有这样写出来的才能正常显示,不加的话在你引用的时候会在前面重复加上一个域名,基本了解了这些足以应对日常的需求,有其它另类的需求可以参考百度编辑器文档,也欢迎补充互学
相关教程：javascript视频教程
百度Ueditor 开发的一个疏忽导致的， 因为很多正式环境对大小写敏感。
打开ueditor下的php/controllerphp，（其他环境选对应的文件夹）把时区设置按如下改个字母大小写，再打开该文件就正确返回json。然后，ueditor就不会报“后台配置项没有正常加载，上传插件将不能正常使用！”了
原来设置的是：
date_default_timezone_set("Asia/chongqing");
把重庆的首字母改成大写，就可以了：
date_default_timezone_set("Asia/Chongqing");
两种形式：
一种是修改ueditorconfigjs里面的toolbars的内容，把里面不需要的删除就可以
二是在初始化编辑器的时候传入toolbars参数，效果一样
为WordPress更换百度Ueditor编辑器
先声明，我现在在使用的wp为39版本。Ueditor插件为130。
在网上找过很多富文本插件，感觉国产的这个用起来最强大，最舒服。而且还内置baidu地图，google地图。为什么不去用呢？
这个插件的几个重要问题如使用后contact-form-7失效，上传后被自动压缩的看不清。我都会告诉大家解决方案。
为什么要更换Ueditor编辑器？
先上一个原来的编辑器，超级简单吧。根本无法满足我的需要。
下载和安装方法。
自己在百度上搜索 ueditor wordpress插件吧。这里不提供了，百度审核不通过。
下载后解压，直接放在这个目录下，然后启动。
已有问题的解决
1、Ueditor为了安全考虑，转译了一些特殊标签和符号。也会在段落的地方加<p>标签。
不过这些都不影响使用，实在影响的自己可以写CSS样式控制。再或者只能改源码了。
改源码方式，我这里就不写了，我也没有用上。
我是通过CSS方式去处理的。
但有个最大的问题，就是使用ueditor后，concact-form-7无法使用，会出现404。把这个插件禁用后，就会没有问题。所以我想和在HTML格式下加p标签和特殊符号转译有关。
所以我这里的解决方法很笨。也很简单。就是我们在使用concact-form-7时，基本都是用在单页面上的。所以我们在要用时，就把ueditor停用一下。把短码打后发布后再启用就是了。
2、失真，被自动压缩。我在网上看到几个网友有这样的问题，也没有解决，这里发出来给大家参考下。
这个问题是概览事件，上传几次后，就会不再被压缩得很小。不过我还是找了下配置文件。改后确实不再有这个问题了。
上图这个是配置文件位置，打开编辑
把compressSide:1前的//去掉，
设置为1
然后自己更改合适的压缩比例。maxImageSideLength
我这里是 700px
意思就是上传最大宽度700px,以宽度为准，如果宽度大于700，就缩放到700px高度自适应。
而我们原来的设计只有一个maxImageSideLength：900；而compressSide默认值为0
也就是说，如果以最长边为准。
例子：长9000PX，宽900px上传。会把高9000等比缩放为900，而宽自然被缩放为90所以就出现失真问题！
注意事项
请下载上面给出的地址下载。
maxImageSideLength和compressSide要设置，用默认基本是要出问题的。
0条评论