zoukankan      html  css  js  c++  java
  • UEditor独立图片、文件上传模块

    百度的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="submit" onclick="upImage()">上传图片</button>
                        <button type="submit" onclick="upFiles()">上传文件</button>
                    </td>
                </tr>
            </table>
    

      

    作  者:大師兄丶
    出  处:http://www.cnblogs.com/zhao-yi
    Git 地 址:https://github.com/ZhaoYis
    个人博客:http://www.zhaoyis.com.cn
    关于作者:主要从事基于.Net Framework平台的项目开发。如有问题或建议,请多多赐教!
    版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
    声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是作者坚持原创和持续写作的最大动力!
  • 相关阅读:
    读《暗时间》
    文献笔记8
    文献笔记4
    文献笔记2
    文献笔记5
    文献笔记6
    文献笔记1
    文献笔记3
    读《暗时间》2
    文献笔记7
  • 原文地址:https://www.cnblogs.com/zhao-yi/p/6225766.html
Copyright © 2011-2022 走看看