ueditor使用小结

一、简介

ueditor是百度编辑器，官网地址：http://ueditor.baidu.com/website/

完整的功能演示，可以参考：http://ueditor.baidu.com/website/onlinedemo.html

为了方便开发学习，我们下载它的完整版和.net版。

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);
            }

代码示例：https://github.com/cathychen00/ueditor1

解决UEditor将div标签换成p标签的问题

将设计排版好的页面html代码上传到数据库，再读取出来的时候发现所有的div都被替换成了p标签。

解决方法:

首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码，将true设置为false

var editorOptions = {

　　UEDITOR_HOME_URL: '/Content/plugins/ueditor/',//配置编辑器路径
　　iframeCssUrl: '/Content/plugins/ueditor/themes/iframe.css',//样式路径
　　initialContent: '',//初始化编辑器内容
　　autoHeightEnabled: false,//高度自动增长
　　minFrameHeight: 200,//最小高度
　　'allowDivTransToP': false,
}

http://fex-team.github.io/ueditor/

开发文档: http://fex-team.github.io/ueditor/

Ueditor自定义默认宽度高度

如题。

最近需要使用到网页后台富文本编辑器。经过同学推荐，最后决定使用百度家的Ueditor.

官方地址：http://ueditor.baidu.com/website/

贴吧地址：ueditor讨论吧

官方提供了网页上非常方便的自定义工具栏的功能。自定义之后直接下载对应的代码包并按照文档部署到项目中即可。其中主要的问题是路径的配置。

首先是将下载好的代码包发布到我们项目的根目录下面。然后在需要添加富文本编辑器的页面头部添加如下代码：

[javascript] view plain copy print ?

<script type="text/javascript" src="相对该文档的路径/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="相对该文档的路径/ueditor/ueditor.all.js"></script>
<script>
<span style="white-space:pre"> </span>window.UEDITOR_HOME_URL = "/项目相对网址池绝对路径/ueditor";
</script>

配置路径这一块是非常重要的。特别是下面的Ueditor的路径，是相对我们整个代码库的目录的。

配置完成之后，直接在我们网页中的<textarea>标签下面添加ueditor的初始化代码：

[javascript] view plain copy print ?

<script type="text/javascript">
var editor = new UE.ui.Editor({initialFrameHeight:100,initialFrameWidth:400 });
editor.render("actDescribe");
</script>

官方的文档并没有给出如何设置ueditor的宽度和高度的说明。这是我在网上网友那里找到的解决方法。在声明编辑器的变量的时候，在参数列表中添加对initialFrameHeight和initialFrameWidth的设置即可。注意，数值后面不需要添加px。

可是，这种方法有时候奏效有时候也不奏效，因为我碰过一种情况就是无论如何调整initialHeight和initialWidth的数值，编辑器的大小都还是不会改变。这个时候，我发现，可以通过调整editor所跟随的textarea的宽高来撑开editor的大小。这也是一种方法，各位同学在官方说明文档出来之前可以两种方法都尝试一下。

当然，好用的文本编辑器还是有很多的，例如kindeditor，之前准备使用这个的，而其文档方面也比较齐全，同时，整个编辑器的size也比较小，对网页的加载速度比较有利。百度的Ueditor还是有点庞大。加载时会有卡顿的速度。估计是我对底层代码的研究不够，多了很多不必要的内容。慢慢研究或许可以使得Ueditor变小。

posted on 2018-11-07 10:03 大西瓜3721 阅读(268) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2017-11-07 jquery.inputmask 输入框input输入内容格式限制插件
2016-11-07 jquery的jquery c.browser msie undefined的问题解决办法

大西瓜3721

ueditor使用小结

一、简介

二、如何引入ueditor编辑器

三、如何调整ueditor工具栏

四、如何修改ueditor默认样式

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

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

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

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

解决UEditor将div标签换成p标签的问题

Ueditor自定义默认宽度高度

导航

我的标签

随笔分类

随笔档案

评论排行榜

推荐排行榜

最新评论