Ueditor默认字体、字号、行间距的修改:
ueditor默认字号是16号,默认字体为sans-serif,默认行间距为5px,如下图所示: 首先,修改ueditor.all.js文件中如上图红框中对应的字体、字号、行间距的值;
其次,ueditor.all.min.js文件为ueditor.all.js的压缩版,需要一并修改其中对应的字体、字号、行间距的值,如下图所示:
字体种类的添加:
ueditor编辑器默认只提供了11中字体,而实际的应用中,这些字体还是太少,无法满足各种需求,所以需要进行字体种类的添加,
具体需要同步修改三个文件:ueditor.config.js、zh-cn.js、en.js,在fontfamily处添加需要的字体类型即可,操作如下: 项目需求,要求在Ueditor中,不勾选任何样式编辑的情况下,存入数据库中的是微软雅黑的字体,目前问题是存入数据库的只有
标签。
经过上网查看,很多都说是修改ue的配置文件 ueditor.all.js 大概第6904行:
这么设置确实在ue的编辑页面,显示成为默认的字体了,但是提交后台保存时,并没有将改样式保存至数据库中,经过对比发现,点击编辑区域更改后的字体样式,是直接在
中标注标签(如下图1),而我们设置好的字体,是写在样式表中的(如下图2),ue在提交后台保存时,只提交了 标签,样式信息被过滤。 图1: 图2: 怎么解决呢?当然还是api靠谱啦! 只需要在编辑器初始化的时候加几句话就好了: var editor=UE.getEditor('editor'); editor.ready(function(){ editor.execCommand('fontfamily','微软雅黑'); //字体 editor.execCommand('lineheight', 2); //行间距 editor.execCommand('fontsize', '14px'); //字号 }); ueditor使用小结 一、简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 为了方便开发学习,我们下载它的完整版和.net版。 ueditor_release_ueditor1_4_3_1-src.zip ueditor_release_ueditor1_4_3_1-gbk-net.zip 二、如何引入ueditor编辑器 下载包的index.html是编辑器示例,主要几处代码如下:
……
……
三、如何调整ueditor工具栏
ueditor功能强大,但是有些功能我们是用不到的,可以在ueditor.config.js中配置。搜索"toolbars"找到工具栏配置项,删掉不必要的功能就可以了。
,toolbars: [[
'undo', 'redo' , '|',
'bold', 'forecolor' , 'removeformat', 'autotypeset', 'pasteplain' , '|', '|',
'justifyleft', 'justifycenter' , '|',
'link', 'unlink' , '|',
'insertimage', 'insertvideo' , '|',
'wordimage', '|' ,
'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1','mydialog1'
]]
四、如何修改ueditor默认样式
如果想修改编辑器默认的字体等,可以找打开ueditor.all.js,搜索editor.js中的"render:"方法,修改以下部分:
var html = ( ie && browser.version < 9 ? '' : '') +
'
' +'' +
( options.iframeCssUrl ? '' : '' ) +
(options.initialStyle ? '' : '') +
'
' +'';
五、ueditor上传图片插入正文后如何默认居中
修改\dialogs\image\image.js文件的initAlign()和setAlign方法。
六、ueditor如何自定义工具栏按钮
如果现有的功能不能满足需求,我们想在工具栏上新增一个自定义按钮,该如何实现呢?
1.首先修改ueditor.config.js,为toolbars添加’mybtn1’;
,toolbars: [[
'undo', 'redo' , '|',
'bold', 'forecolor' , 'removeformat', 'autotypeset', 'pasteplain' , '|', '|',
'justifyleft', 'justifycenter' , '|',
'link', 'unlink' , '|',
'insertimage', 'insertvideo' , '|',
'wordimage', '|' ,
'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1'
]]
2.然后修改ueditor.all.js,找到变量btnCmds,添加’mybtn1’;
var btnCmds = ['undo' , 'redo', 'formatmatch',
'bold', 'italic' , 'underline', 'fontborder', 'touppercase' , 'tolowercase',
'strikethrough', 'subscript' , 'superscript', 'source', 'indent' , 'outdent',
'blockquote', 'pasteplain' , 'pagebreak',
'selectall', 'print' ,'horizontal', 'removeformat', 'time' , 'date', 'unlink',
'insertparagraphbeforetable', 'insertrow' , 'insertcol', 'mergeright', 'mergedown' , 'deleterow',
'deletecol', 'splittorows' , 'splittocols', 'splittocells', 'mergecells' , 'deletetable', 'drafts', 'mybtn1' ];
3.最后在ueditor.all.js,新增mybtn1命令执行的代码:
UE.commands['mybtn1'] = {
execCommand: function (cmdName, align) {
var range = this .selection.getRange();
this.execCommand('inserthtml' , '
click mybtn1
');return true ;
}
};
这样就完成了对工具栏功能的扩展。
七 ueditor如何自动抓取远程图片
如果想实现粘贴网页时,直接将其中的图片上传到自己的图片服务器,该怎么做呢?这其中主要用到的js是plugins/catchremoteimage.js。
首先设置编辑器选项:catchRemoteImageEnable:true。这样便开启了自动抓取图片的功能。
如果想自定义图片上传方式,而不用ueditor默认的图片上传地址,那么需要修改catchremoteimage.js这里:
把这里的url改成自定义的ashx文件地址即可。
八 ueditor上传图片窗口,如何实现选择图片后自动上传
上传图片窗口操作需要先选择图片,点击“开始上传”,然后插入图片。操作过程略显繁琐,其实可以去掉“开始上传”,在选中图片后自动上传。
首先找到dialogs/image/image.html,隐藏image.html的“开始上传”按钮。 然后修改dialogs/image/image.js文件,找到addFile方法,然后在方法结尾添加以下代码:
function addFile(file) {
……
//自动上传
clickUpload = function () {
$upload.click();
}
setTimeout("clickUpload()", 200);
}
Ueditor设置默认字体
其实很简单,只需要将ueditor.all.js 以及 ueditor.all.min.js 两个文件中的字体改掉即可
修改方法:
在ueditor.all.js中搜索:设置默认字体和字号;
在ueditor.all.min.js中直接搜索:body{margin:8px;font-family:sans-serif;font-size:16px;}
修改对应项即可完成修改;
我用的版本可能与你的不同,但是肯定是改这两行的参数;改掉即可;
ueditor 设置默认字体、大小和颜色;回车事件捕获
简单记录下,最近工作中要用到一个富文本框,采用之前同事用的ueditor,百度的开源软件。http://ueditor.baidu.com/doc/
他们的API不好看,好辛苦,百度搜了好久也没什么太多资料,最后还是去看源码,找到了比较好的修改方法:ueditor用iframe实现编辑框,设置body的样式即可,
//default font and color
UE.dom.domUtils.setStyles(self.ue.body, {
'color': '#868686','font-family' : "'Microsoft Yahei','Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif", 'font-size' : '14px'
});
看网上有人直接改ueditor.all.js文件我觉得太粗暴了,用我这种配置的方式会更好些,且在不同的实例中可以设置不同的样式,这样更好。
顺便说一句:修改配置文件ueditor.config.js只是修改可选项,不能修改默认值,所以实例的时候给options,或者editor.setOpt(Object)这些都没用。
################ 下面是我的代码片段,我还实现了回车即发送的功能,希望对其他朋友有所帮助
#### code begin ############
//实例化编辑器
var self = this;
self.ue = UE.getEditor('editor',{toolbars: []});
self.ue.ready(function(){
self.isloadedUE = true;
//set Global.ueditor
Global.ueditor = self.ue;
self.ue.setDisabled();
//default font and color
UE.dom.domUtils.setStyles(self.ue.body, {
'color': '#868686','font-family' : "'Microsoft Yahei','Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif", 'font-size' : '14px'
});
//回车发送
UE.dom.domUtils.on(self.ue.body, 'keyup', function(event){
if(event.keyCode == 13){
console.log('enter ok');
event.preventDefault();
event.stopPropagation();
self.sendMsg();
}
});
});
################ code end ############