Ueditor设置默认字体、字号、行间距，添加字体种类

最新推荐文章于 2022-11-11 15:11:04 发布

风神.NET跨平台

最新推荐文章于 2022-11-11 15:11:04 发布

阅读量3k

点赞数

分类专栏： UEditor.js|Quill.js|Summernote

原文链接：https://blog.csdn.net/WuLex

版权

UEditor.js|Quill.js|Summernote 专栏收录该内容

18 篇文章 7 订阅

订阅专栏

`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中，不勾选任何样式编辑的情况下，存入数据库中的是微软雅黑的字体，目前问题是存入数据库的只有<p>标签。

经过上网查看，很多都说是修改ue的配置文件 ueditor.all.js 大概第6904行：

这么设置确实在ue的编辑页面，显示成为默认的字体了，但是提交后台保存时，并没有将改样式保存至数据库中，经过对比发现，点击编辑区域更改后的字体样式，是直接在<p>中标注<span>标签（如下图1），而我们设置好的字体，是写在样式表中的（如下图2），ue在提交后台保存时，只提交了<p>标签，样式信息被过滤。

图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是编辑器示例，主要几处代码如下：

<head>

   ……

<!--编辑器基本配置-->

<script type="text/javascript" charset="gbk" src="ueditor.config.js"></ script>

<!--编辑器完整代码-->

<script type="text/javascript" charset="gbk" src="ueditor.all.js"> </script >

  ……

</head>

<body>

<div>

<script id="editor" type="text/plain"></ script>

</div>

<script type="text/javascript">

//实例化编辑器

var ue = UE.getEditor( 'editor', {

        autoHeightEnabled: true,

        autoFloatEnabled: true,

        initialFrameWidth: 690,

        initialFrameHeight:483

    });

</script>

三、如何调整`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  ? '' : '<!DOCTYPE html>') +

                    '<html xmlns=\'http://www.w3.org/1999/xhtml\' class=\'view\' ><head>' +

                    '<style type=\'text/css\'>' +

                    //设置四周的留边

                    '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +

                    //设置默认字体和字号

                    //font-family不能呢随便改，在safari下fillchar会有解析问题

                    'body{margin:8px;font-family:sans-serif;font-size:16px;}' +

                    //设置段落间距

                    'p{margin:5px 0;}</style>' +

                    ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +

                    (options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') +

                    '</head><body class=\'view\' ></body>' +

                    '<script type=\'text/javascript\' ' + (ie ? 'defer=\'defer\'' : '' ) +' id=\'_initialScript\'>' +

                    'setTimeout(function(){editor = window.parent.UE.instants[\'ueditorInstant' + me.uid + '\'];editor._setup(document);},0);' +

                    'var _tmpScript = document.getElementById(\'_initialScript\');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>';

五、`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' , '<p>click mybtn1</p>');

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 ############

风神.NET跨平台

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ueditor设置默认字体、字号、行间距，添加字体种类

Ueditor默认字体、字号、行间距的修改：ueditor默认字号是16号，默认字体为sans-serif，默认行间距为5px，如下图所示：首先，修改ueditor.all.js文件中如上图红框中对应的字体、字号、行间距的值；其次，ueditor.all.min.js文件为ueditor.all.js的压缩版，需要一并修改其中对应的字体、字号、行间距的值，如下图所示：字体种类的添加：u...
复制链接

扫一扫