在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例常用JavaScript方法 → UEditor独立图片、文件上传模块​

UEditor独立图片、文件上传模块​

常用JavaScript方法

下载此实例
  • 开发语言:js
  • 实例大小:3.43M
  • 下载次数:29
  • 浏览次数:493
  • 发布时间:2017-09-03
  • 实例类别:常用JavaScript方法
  • 发 布 人:小师弟
  • 文件格式:.zip
  • 所需积分:2
 相关标签: 上传 图片 文件 d t

实例介绍

【实例简介】

UEditor独立图片、文件上传模块

【实例截图】

【核心代码】

引用文件:
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
<script src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="~/Content/ueditor/ueditor.all.js"></script>

修改配置(找到ueditor/net下的config.json文件):
"imageUrlPrefix": "http://localhost:5531", /* 图片访问路径前缀 【修改成自己项目的路径】

前台代码
1.【加载整个编辑器】:
 
@Html.TextAreaFor(model => model.jobDescription)

<script type="text/javascript">
    var editorOption = {
        initialFrameWidth: 1000,
        initialFrameHeight: 200
    };
    var editor = new baidu.editor.ui.Editor(editorOption);


    editor.render('jobDescription');
    $('form').submit(function () {
        $('#jobDescription').val(editor.getContent());
    });
</script>
2.【上传文件独立模块】:
<table class="table table-bordered table-hover definewidth m10">
            <tr>
                <td width="10%" class="tableleft">
                    <span>附件上传</span>
                </td>
                <td>
                    <script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;">
                    </script>
                    <script type="text/javascript">
                        //实例化编辑器
                        var o_ueditorupload = UE.getEditor('j_ueditorupload',
                        {
                            autoHeightEnabled: false
                        });
                        o_ueditorupload.ready(function () {

                            o_ueditorupload.hide();//隐藏编辑器

                            //监听图片上传,地址:arg[0].src
                            o_ueditorupload.addListener('beforeInsertImage', function (t, arg) {
                                //alert('这是图片地址:' arg[0].src);
                                //这里解析你的返回类型

                            });

                             /* 文件上传监听
                             * 1、在ueditor.all.min.js文件中找到
                             * d.execCommand("insertHtml",l);
                             * 之后插入d.fireEvent('afterUpfile',b);
                             * 2、打开ueditor.all.js,在filelist = utils.isArray(filelist) ? filelist : [filelist];后面加上以下代码:
                             *   if(me.fireEvent('afterUpfile', filelist) === true){
                             *            return;
                             *       }
                             */

                            //o_ueditorupload.addListener('afterUpfile', function (t, arg) {
                            //    alert('这是文件地址:' arg[0].url);
                            //});
                        });

                        //弹出图片上传的对话框
                        function upImage() {
                            var myImage = o_ueditorupload.getDialog("insertimage");
                            myImage.open();
                        }
                        //弹出文件上传的对话框
                        function upFiles() {
                            var myFiles = o_ueditorupload.getDialog("attachment");
                            myFiles.open();
                        }
                    </script>
                    <button type="button" onclick="upImage()">上传图片</button>
                    <button type="button" onclick="upFiles()">上传文件</button>
                </td>
            </tr>
        </table>

标签: 上传 图片 文件 d t

实例下载地址

UEditor独立图片、文件上传模块​

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警