文档章节

ckeditor,ueditor 自定义图片上传

叶苏篱
 叶苏篱
发布于 2016/11/16 16:59
字数 1541
阅读 146
收藏 0

 

  1. 前述

        所有的基础配置太多了,所以就没有介绍,只是给相关的文档地址:

   bootstrap:  图片上传用的弹框使用的是bootstrap的模态框,相关文档             http://v3.bootcss.com/javascript/#modals

         美图秀秀:使用的了美图秀秀web图片控件,相关文档下载地址http://open.web.meitu.com/products/

         ueditor:我使用的是 开发版[1.4.3.3 Jsp 版本]http://ueditor.baidu.com/website/download.html

  1. 配置
  • 引入:前面的都是组件相关的文件,只是引入了ueditor的配置请根据自己的情况更改,最后一个commons是放我们自己写js的文件
  • <link rel="stylesheet" href="${ctx}/assets/css/bootstrap.min.css"/>
  • <script src="${ctx}/assets/js/bootstrap.min.js"></script>
    <script src="${ctx}/assets/ueditor/ueditor.config.js"></script>
    <script src="${ctx}/assets/ueditor/ueditor.all.js"></script>
  • <script src="${ctx}/assets/xiuxiu.js"></script>
    <script src="${ctx}/assets/commons.js"></script>
  • bootstrap全局弹框我写的jsp,所以把这个全局的弹框放到了公共页面上,这个其实没什么就一些html代码
<%--全局图片上传弹框--%>
<div id="imgwindow3" class="modal fade" tabindex="-1"  role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="width:800px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">图片编辑<span class="img_rule"></span></h4>
            </div>
            <div class="modal-body" style="height:600px;">
                <div id="imgwindowaltContent3">
                </div>
            </div>
        </div>
    </div>
</div>
  •  页面上的富文本框和自定义的图片上传节点

        图片上传节点:

<div class="form-group">
    <label>图片</label>
    <div class="imgupload" rule="180,180" id="img" style="height: 180px;width: 180px;"></div>
    <input type="hidden" name="i_imageid" class="img">
</div>         (html代码)
$(".imgupload").click(function(){
    var rule = $(this).attr("rule");
    if(rule != "undefined" && rule != null) {
        var rule = rule.split(",");
        $(".img_rule").text("建议使用"+rule[0]+"*"+rule[1]+"的图片");
    }
    $('#imgwindow3').modal({
        show:true
    });
    ltServer.flag = this;
});        (commonsjs中节点的处理方法)

        class必须是imgupload

        rule:是规定图片的尺寸,这个可以在上传弹框时显示在最上面提示,并可更改为强制限制图片尺寸,也可不指定该属性

        id:对应下面input里面的class这俩个必须对应,不然不能将图片上传后的url回写

        

        富文本框:  

<div class="form-group">
    <label>内容</label>
    <%--<textarea id="editor1" class="form-control editor"></textarea>--%>
    <script id="editor1" class="editor" type="text/plain"></script>
    <input type="hidden" name="c_text" class="editor1">
</div>   (html)

class必须是editor        

跟节点上传类似,都是id对应input的class,注释部分就是ckeditor的方式

if($(".editor").length != 0){
    $.each($(".editor"),function(i,n){
       // CKEDITOR.replace($(this).attr("id"));  //ck的配置方式
        var maxsize = $(this).attr("maxsize");
        if(maxsize == undefined || maxsize == null || maxsize == ""){
            maxsize = 10000;
        }
        UE.getEditor($(this).attr("id"),{
            maximumWords:maxsize
        });
    })

}
  • 自定义富文本框的上传按钮

    ck自定义:

        1:在ck的plugins目录下新建updateImage文件夹,在新建plugin.js和updateImage.png图片文件(图片文件可以自己定义)

        plugin.js文件编辑如下

(function(){ 
    //Section 1 : 按下自定义按钮时执行的代码 
    var a= { 
        exec:function(editor){
           $('#imgwindow3').modal({    //点击自定义按钮是弹出全局富文本框,这个对应我们上面的bootstrap全局模态框
               backdrop:true,
               keyboard:true,
               show:true
           });
            for (var instance in CKEDITOR.instances) { //遍历所有的ck节点
               if(instance == editor.name)        //找到对应的点击的节点并将节点id赋给我们commonjs中的ltServer.instance(后面将会吧这个全局变量帖出来)
                   ltServer.instance = instance;
            }
        } 
    }, 
    //Section 2 : 创建自定义按钮、绑定方法 
    b='updateImage'; 
    CKEDITOR.plugins.add(b,{ 
        init:function(editor){ 
            editor.addCommand(b,a); 
            editor.ui.addButton('updateImage',{ 
                label:'图片文件上传', 
                icon: this.path + 'updateImage.png', 
                command:b 
            }); 
        } 
    }); 
})();

编辑ck config.js

CKEDITOR.editorConfig = function( config ) {
   config.extraPlugins += (config.extraPlugins ? ',updateImage' : 'updateImage');  //添加我们自定义的图片上传按钮
    config.extraPlugins += (config.extraPlugins ? ',preview' : 'preview');  //添加自定义的预览功能
   config.toolbarGroups = [
      { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
      { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
      { name: 'links' },
      { name: 'insert' },
      { name: 'forms' },
      { name: 'tools' },
      { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
      { name: 'others' },
      '/',
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
      { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
      { name: 'styles' },
      { name: 'colors' }
   ];
   config.removeButtons = 'Underline,Subscript,Superscript';
   config.format_tags = 'p;h1;h2;h3;pre';
   config.removeDialogTabs = 'image:advanced;link:advanced';
   CKEDITOR.config.resize_enabled = false;
};

    ue自定义:

    1,编辑config.js文件

toolbars: [[
   'fullscreen', 'source', '|', 'undo', 'redo', '|',
   'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
   'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
   'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
   'directionalityltr', 'directionalityrtl', 'indent', '|',
   'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
   'template', 'background', '|',
   'horizontal', 'date', 'time', 'spechars','|',
   'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
   'print', 'preview','|','imgupload','insertvideo','addlink'
]]
      //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
      ,labelMap:{
          'imgupload':'图片上传',
   'addlink' : '超链接'
      }

    2,找到themes/default/css/ueditor.css文件,增加一条样式定义:

.edui-for-imgupload .edui-icon{
    background-position:-380px 0px;//我是使用了默认的图片这个对应themes/default/images/icons.png图片的偏移量
}

    3,编辑我们的commons.js文件

baidu.editor.commands['imgupload'] = {
    execCommand : function(){
        $('#imgwindow3').modal({
            show:true
        });
        ltServer.instance = this.key;   //获取相应富文本框的id跟前面的ck类似
    },
    queryCommandState:function(){
    }
};
  • 与美图秀秀集成

       1,js全局定义

ltServer = {};
ltServer.content = "";
//服务器地址
ltServer.server = "http://localhost:8080";
//图片上传接口
ltServer.imgUpPath = "/common/img/upload";
//富文本框的图片上传焦点位
ltServer.instance = null;  //用来记录是哪一个富文本框
/**
 * 图片上传时的标记位用来区分倒是是富文本框还是我们的节点
 */
ltServer.flag = null;

    2,美图秀秀配置

$('#imgwindow3').on('show.bs.modal', function () {    //bootstrap的模态框显示触发
   // xiuxiu.setLaunchVars("cropPresets","1:1");
    /*xiuxiu.onInit = function(){
        xiuxiu.loadPhoto(false);
    }*/
    xiuxiu.setUploadURL(ltServer.server+ltServer.content+ltServer.imgUpPath);
    xiuxiu.setUploadType(2);
    xiuxiu.setUploadDataFieldName("file");
    /*第1个参数是加载编辑器div容器,第2个参数是编辑器类型,第3个参数是div容器宽,第4个参数是div容器高*/
    xiuxiu.embedSWF("imgwindowaltContent3", 1, "100%", "100%");
    xiuxiu.onClose = function(editor) {};
    xiuxiu.onUploadResponse = function(data){
        var data = jQuery.parseJSON(data);
        var img = "<img src="+data.data.url+">";
        if(data.code == 0){
            if(ltServer.flag == null){
                //CKEDITOR.instances[ltServer.instance].insertHtml(img);   //ck
                UE.getEditor(ltServer.instance).setContent(img, true);   //ue
            }else{
                  var classname = $(ltServer.flag).attr("id");
                    $('.'+classname).val(data.data.id);
                    $('.'+classname).attr("src", data.data.url);

                    img = "<img src="+data.data.url+" style='width:"+$(ltServer.flag).width()+"px;height:" +
                        $(ltServer.flag).height()+"px'>";
                    $(ltServer.flag).html(img);    
                //插入id值对应的class的节点隐藏表单中
                ltServer.flag = null;   //清空标记位
            }
            $('#imgwindow3').modal('hide'); //隐藏模态框
        }
    };
    xiuxiu.onBeforeUpload = function(data, id) {   //上传前大小限制
        if(data.size > 1024 * 1024){
            $('#imgwindow3').modal('hide');
            $.dialog({
                title : ltServer.title,
                content: "图片过大请上传1M以下的图片",
            });
            return false;
        }
        return true;
    }
    xiuxiu.onClose = function (id)
    {
        $('#imgwindow3').modal('hide');   //点击美图秀秀关闭按钮时关闭模态框
    }
});

 

    最后

$('#imgwindow3').on('hide.bs.modal', function () {
    ltServer.flag = null;
    $(".img_rule").text("");
});

这个是点击bootstrap模态框上的关闭按钮时清除标记位,并清除文件大小的设置

 

贴个效果图

这个是自定义的,最上面有相应的图片大小提示

富文本框

© 著作权归作者所有

叶苏篱
粉丝 0
博文 8
码字总数 3993
作品 0
成都
程序员
私信 提问
我的网站搭建 (第六天) Ckeditor编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,...

代码打碟手
2018/08/27
262
0
【CKeditor】使用SpringMVC处理CKeditor上传图片

0、了解CKeditor的相关文件以及引入js 引入ckeditor的js 1、开启CKeditor上传图片功能 官方说明 简明的说,就是只需要在创建CKeditor时,添加以下两个配置: 在用CKEDITOR.replace()中配置 ...

666B
2014/07/28
8.9K
4
ckeditor 怎么实现图片ctrl+v 到编辑中

问题描述: 在使用ckeditor做富文本编辑器的时候,如果想在编辑框中添加图片。必须是先上传然后才可以插入到编辑框中。有没有直接ctrl +c 然后ctrl+v就可以将图片添加的编辑框中。 类似uedit...

中凯_凯哥java
2016/09/18
1K
1
CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

CKEditor 3.x配置说明 一、基本使用: 1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2、配置使用 A.将下载下来的CKEditor压缩...

一枚Sir
2014/05/29
2.4K
0
WCMS V7.5 发布,为编辑员打造的CMS

WCMS V7.5 发布了,WCMS是一款转为编辑员打造的CMS,面向编辑的编辑器。经过2年的运用,在编辑上力求简单明了,快速发布,格式不能错,字体不能错。 改进内容包括: 编辑器文章编辑器由uedit...

大灰狼wow
2014/07/30
3.4K
9

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
12
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
59
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部