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

快来打我* 2021-06-26 16:06 599阅读 0赞

## `Ueditor`默认字体、字号、行间距的修改： ##

`ueditor`默认字号是16号，默认字体为`sans-serif`，默认行间距为`5px`，如下图所示：  
![在这里插入图片描述][20190814233936853.png]首先，修改`ueditor.all.js`文件中如上图红框中对应的字体、字号、行间距的值；

其次，`ueditor.all.min.js`文件为`ueditor.all.js`的压缩版，需要一并修改其中对应的字体、字号、行间距的值，如下图所示：  
![在这里插入图片描述][20190814234019947.png]

## 字体种类的添加： ##

`ueditor`编辑器默认只提供了11中字体，而实际的应用中，这些字体还是太少，无法满足各种需求，所以需要进行字体种类的添加，

具体需要同步修改三个文件：`ueditor.config.js`、`zh-cn.js`、`en.js`，在`fontfamily`处添加需要的字体类型即可，操作如下：  
![在这里插入图片描述][20190814234143593.png]  
项目需求，要求在`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:`"方法，修改以下部分：

### 五、`ueditor`上传图片插入正文后如何默认居中 ###

修改`\dialogs\image\image.js`文件的`initAlign()`和`setAlign`方法。  
![在这里插入图片描述][20190817234810324.png]

### 六、`ueditor`如何自定义工具栏按钮 ###

如果现有的功能不能满足需求，我们想在工具栏上新增一个自定义按钮，该如何实现呢？

1.首先修改`ueditor.config.js`，为`toolbars`添加’`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 ;
    
        }
    
    };

这样就完成了对工具栏功能的扩展。  
![在这里插入图片描述][20190817235148334.png]

### 七 `ueditor`如何自动抓取远程图片 ###

如果想实现粘贴网页时，直接将其中的图片上传到自己的图片服务器，该怎么做呢？这其中主要用到的js是`plugins/catchremoteimage.js`。

首先设置编辑器选项：`catchRemoteImageEnable：true`。这样便开启了自动抓取图片的功能。

如果想自定义图片上传方式，而不用`ueditor`默认的图片上传地址，那么需要修改`catchremoteimage.js`这里：

![image][]把这里的`url`改成自定义的`ashx`文件地址即可。

### 八 `ueditor`上传图片窗口，如何实现选择图片后自动上传 ###

上传图片窗口操作需要先选择图片，点击“开始上传”，然后插入图片。操作过程略显繁琐，其实可以去掉“开始上传”，在选中图片后自动上传。

首先找到`dialogs/image/image.html`,隐藏`image.html`的“开始上传”按钮。  
![image][image 1]然后修改`dialogs/image/image.js`文件，找到`addFile`方法，然后在方法结尾添加以下代码：

function addFile(file) { 
    
    ……
                    //自动上传
                    clickUpload = function () { 
                        $upload.click();
                    }
                    setTimeout("clickUpload()", 200);
                }

![在这里插入图片描述][20190817235946544.png]

--------------------

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

[20190814233936853.png]: /images/20210626/7fc1618c44ec4228a1944bcbe46b3f5c.png
[20190814234019947.png]: /images/20210626/f00610dbdc0841869d67a3fbea0884fb.png
[20190814234143593.png]: /images/20210626/3639e92658d04836a827dc5c0334fe00.png
[20190817234810324.png]: /images/20210626/bf69a94971b14474a60c2a8a464accd7.png
[20190817235148334.png]: /images/20210626/34ab248cdeb340c7b7d3bc8bd3dbca7e.png
[image]: /images/20210626/adf51cf9dc0544a3a2a48b6489d3dda2.png
[image 1]: /images/20210626/5093a82c936743de8ca30799f1974ae1.png
[20190817235946544.png]: /images/20210626/7a47f7123f964c47b1fb798a4bcbad23.png