百度ueditor编辑器二次开发实例

 更新时间:2015-06-29 15:47:50   作者:佚名   我要评论(0)

ueditor是一款国产的编辑器了这款编辑器虽然适合中国人的习性了但是小编会发还是有许多的地方不好用了,下文整理了一不少的关于百度ueditor编辑器二次开发实例,具体的如下。

ueditor是一款国产的编辑器了这款编辑器虽然适合中国人的习性了但是小编会发还是有许多的地方不好用了,下文整理了一不少的关于百度ueditor编辑器二次开发实例,具体的如下。

最近在做一个后台的项目,项目中用到了复文本框,公司用的是UEditor,但是需求为了更方便编辑图片,特意提了如下功能:

1、上传图片时图片宽度固定为500,长度等比例进行缩放,但不限制单张图片长度;图片进行等比缩放后保持100%原画质;
2、长传图片是选中图片后点击确定自动上传,无需再选择一次“开始上传”。
3、图片上传完成后,在图片下方添加一个选填的文本输入框用以填写图注,如填写,图注使用默认字体居中显示。
针对上面的需求,我对 UEditor源码进行了研究和修改。看到网上有关UEditor上传图片默认居中和控制默认大小,也有不少帖子,但是都没有给出具体的解决办法,有些甚至用css控制。下面我把我的解决方法共享一下,希望对大家有所帮助。关于ueditor的使用,我之前的一篇文章ueditor使用过程的注意事项,有兴趣的可以看下!

ueditor 上传图片默认居中对齐 和控制上传图片的默认大小

如下图:

上传图片默认选择的是居中对齐!

enter image description here


网上有的介绍是修改config.json里面的 "imageInsertAlign": "center", 把none改成center。还有就是把

<div class="alignBar">
            <label class="algnLabel"><var id="lang_input_align"></var></label>
                    <span id="alignIcon">
                        <span id="noneAlign" class="none-align" data-align="none"></span>
                        <span id="leftAlign" class="left-align" data-align="left"></span>
                        <span id="rightAlign" class="right-align" data-align="right"></span>
                        <span id="centerAlign" class="center-align focus" data-align="center"></span>
                    </span>
            <input id="align" name="align" type="hidden" value="center"/>
        </div>
<div id="tabbody" class="tabbody">
class中的focus,默认给center-align 。

我这么修改了,但是没有反应!默认选择的还是none,还是第一个。实在没有办法,我就开始修改ueditor.all.js了。

看了它的源代码,我修改了image.js,修改了如下代码:

/* 初始化对其方式的点击事件 */
 function initAlign() {
        setAlign("center");//修改默认居中对齐
        /* 点击align图标 */
        domUtils.on($G("alignIcon"), 'click', function (e) {
            var target = e.target || e.srcElement;
            if (target.className && target.className.indexOf('-align') != -1) {
                setAlign(target.getAttribute('data-align'));
            }
        });
    }

/* 设置对齐方式 */
function setAlign(align) {
        align =  align || 'center';
        var aligns = $G("alignIcon").children;
        for (i = 0; i < aligns.length; i++) {
            if (aligns[i].getAttribute('data-align') == align) {
                domUtils.addClass(aligns[i], 'focus');
                $G("align").value = aligns[i].getAttribute('data-align');
            } else {
                domUtils.removeClasses(aligns[i], 'focus');
            }
        }
}
然后就默认用center方式对齐了!

上传图片默认给个宽度

主要是修改ueditor.all.js,找到UE.commands['insertimage'] ,然后找到

 (ci.width ? 'width="' + ci.width + '" ' : 'width="500"')


在单张上传和多张上传中都设置个宽度,然后上传图片就会默认有了一个宽度,如下图

enter image description here

长传图片是选中图片后点击确定自动上传,无需再选择一次“开始上传”

针对这个,我给“开始上传”做了一个点击事件。上传图片之后,自动对“开始上传”做一次点击。

在image.js中,找到addFile(file) 函数,function addFile(file) {}

在这个函数最后增加一个点击函数。延迟点击就可以了!

$li.insertBefore($filePickerBlock);
clickUpload = function () {
     $upload.click();
 }
 setTimeout("clickUpload()", 200);
图片上传完成后,在图片下方添加一个文本输入框

前面的两个问题很容易就解决了!这个问题就稍微有点费事!下面说一下吧!

(注:image.js有缓存,修改完js,记得清理缓存!)

效果如下图:

enter image description here

这里还是修改addfile()函数,里面增加如下方法:

 // 获取图片下面input的描述
getInputvalue = function(files){
                if(_this.imageList.length==1){
                _this.imageList[0].imgDes=$(files).find("input[name='imgDes']").val();
                   }else{
                       if(_this.imageList.length>1){
                           for(var i=0;i<_this.imageList.length;i++){
                               if(files.id.indexOf(i)!=-1){
                                  _this.imageList[i].imgDes=$(files).find("input[name='imgDes']").val();  
                               }
                           }  
                       }
                   }

 };
 $li.append('<input type="text" class="inputDes" name="imgDes" onkeyup="getInputvalue(' + file.id + ')" placeholder="(图注)" value="">');
这样在imageList这个数组中增加了一个imgDes字段,在鼠标onkeyup的时候写入!

这样,可以直接在ueditor.all.js中调用了。

UE.commands['insertimage'] = {
    execCommand:function (cmd, opt) {
上面函数中的opt中就有了imgDes这个字段了!然后插入的时候增加如下代码就可以了!(记得在单张上传和多张中都添加)

把一段代码都贴出来吧!

var html = [], str = '', ci;
 ci = opt[0];
            if (opt.length == 1) {
                str = '<img src="' + ci.src + '" ' + (ci._src ? ' _src="' + ci._src + '" ' : '') +
                    (ci.width ? 'width="' + ci.width + '" ' : 'width="500"') +
                    (ci.height ? ' height="' + ci.height + '" ' : '') +
                    (ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="float:' + ci['floatStyle'] + ';"' : '') +
                    (ci.title && ci.title != "" ? ' title="' + ci.title + '"' : '') +
                    (ci.border && ci.border != "0" ? ' border="' + ci.border + '"' : '') +
                    (ci.alt && ci.alt != "" ? ' alt="' + ci.alt + '"' : '') +
                    (ci.hspace && ci.hspace != "0" ? ' hspace = "' + ci.hspace + '"' : '') +
                    (ci.vspace && ci.vspace != "0" ? ' vspace = "' + ci.vspace + '"' : '') + '/>'+  (ci.imgDes && ci.imgDes != "" ? '<br/><span style="display:block;width:100%;text-align:center">'+ci.imgDes+'</span>' : '');
                if (ci['floatStyle'] == 'center') {
                    str = '<p style="text-align: center">' + str + '</p>';
                }
 html.push(str);
这样就搞定了!

上传确定之后,文本框中代码如下:

enter image description here

二次开发之添加一个自定义按钮

 

还是以修改百度编辑器的引用功能为例:

 

由于百度编辑器的引用默认样式,不太喜欢,像缩进,我想弄成知乎上面的给应用这个节点加一个灰色的左边框。

 

首先看百度编辑器默认的引用样式:

 

 

下面是知乎的引用样式:

 


现在要做的就是把百度编辑器的引用样式改为知乎的样式。


首先是一个addCustomizeButton.js文件,我是从 ueditor 官方 fork 过来的,我增加了引用的实例。代码如下

//自定义引用样式
UE.registerUI('myblockquote',function(editor,uiName){
    editor.registerCommand(uiName,{
        execCommand:function(){
            this.execCommand('blockquote',{
                "style":"border-left: 3px solid #E5E6E1; margin-left: 0px; padding-left: 5px; line-height:36px;"
            });
        }
    });
 
    var btn = new UE.ui.Button({
        name:uiName,
        title:'自定义引用',
        cssRules :"background-position: -220px 0;",
        onclick:function () {
           editor.execCommand(uiName);
        }
    });
 
    editor.addListener('selectionchange', function () {
        var state = editor.queryCommandState('blockquote');
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
 
    return btn;
});
然后在`customizeToolbarUIDemo.html`里面引用该js,也就注册这个自定义的引用按钮。
<!DOCTYPE HTML>
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
    <!--添加按钮-->
    <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>
 
    <style type="text/css">
        .clear {
            clear: both;
        }
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <h1>二次开发demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
</body>
<script type="text/javascript">
    //实例化编辑器
    UE.getEditor('editor',{
        //清空了工具栏
        toolbars:[[]]
    })
</script>
</html>


相关文章

  • 深入理解nodejs搭建静态服务器(实现命令行)

    深入理解nodejs搭建静态服务器(实现命令行)

    静态服务器 使用node搭建一个可在任何目录下通过命令启动的一个简单http静态服务器 完整代码链接 安装:npm install yg-server -g 启动:yg-server
    2019-02-06
  • 详解webpack编译速度提升之DllPlugin

    详解webpack编译速度提升之DllPlugin

    一、前言 The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlu
    2019-02-06
  • Vue从TodoList中学父子组件通信

    Vue从TodoList中学父子组件通信

    简单的 TodoList 实现一个简单的 todolist,当我输入内容后,点击提交自动添加在下面,如下图所示: 用代码实现这个效果: <div id="app"> <input ty
    2019-02-06
  • Tensorflow分类器项目自定义数据读入的实现

    Tensorflow分类器项目自定义数据读入的实现

    在照着Tensorflow官网的demo敲了一遍分类器项目的代码后,运行倒是成功了,结果也不错。但是最终还是要训练自己的数据,所以尝试准备加载自定义的数据,然而d
    2019-02-06
  • ES6 对象的新功能与解构赋值介绍

    ES6 对象的新功能与解构赋值介绍

    ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。 一、字面量语法扩展 在 ES6 模式下使用字
    2019-02-06
  • Redis连接错误的情况总结分析

    Redis连接错误的情况总结分析

    前言 最近由于流量增大,redis 出现了一连串错误,比如: LOADING Redis is loading the dataset in memory use of closed network connection connec
    2019-02-06
  • 使用TensorFlow实现二分类的方法示例

    使用TensorFlow实现二分类的方法示例

    使用TensorFlow构建一个神经网络来实现二分类,主要包括输入数据格式、隐藏层数的定义、损失函数的选择、优化函数的选择、输出层。下面通过numpy来随机生成一
    2019-02-06
  • PHP实现字符串大小写转函数的功能实例

    PHP实现字符串大小写转函数的功能实例

    字符串的大小写转换功能在日常中经常使用。那么如何实现一个简单的大小写转换功能呢&#63; 在php中,最终使用的是c语言的toupper,tolower函数将字符进行大小写
    2019-02-06
  • Nginx代理时header头中带"_"信息丢失问题的解决

    Nginx代理时header头中带"_"信息丢失问题的解决

    前言 开发网关项目时,在请求时往请求头header中放入了签名sign_key信息,在接收请求时再从header中拿出,在本地调试时是可以的,但上线之后通过Nginx代理之后
    2019-02-06
  • Python实现E-Mail收集插件实例教程

    Python实现E-Mail收集插件实例教程

    __import__函数 我们都知道import是导入模块的,但是其实import实际上是使用builtin函数import来工作的。在一些程序中,我们可以动态去调用函数,如果我们
    2019-02-06

最新评论