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>

  

优质内容筛选与推荐>>
1、C++ string 构造的陷阱
2、init脚本
3、产品功能与界面的初步设计
4、黄聪:相关词句采集与分析研究
5、php 文件总结


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号