zoukankan      html  css  js  c++  java
  • vue wangeditor

    <script src="@Url.Content("~/static/kj/wangEditor.min.js")">
    
    </script>
    
                   // 创建编辑器
                    createEditor() {
                        var E = window.wangEditor;
                        this.editor = new E(this.$refs.editorElem); //创建富文本实例
                        this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间 3分钟
                        this.editor.customConfig.menus = [
                            'head', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor',
                            'backColor', 'link', 'list',
                            'justify', 'quote', 'emoticon', 'image', 'table', 'code', 'undo', 'redo' // 重复
                        ];
                        this.editor.customConfig.debug = true; // debug模式
                        this.editor.customConfig.uploadImgServer = '/Uploader/UpLoadImg';
                        //editor.customConfig.uploadImgServer = '/Uploader/UpLoadFolderImg?fd=WangEditorUploadImg&thumb=1';
    
                        this.editor.customConfig.uploadFileName = 'myFileName'; // 图片流name
                        this.editor.customConfig.uploadImgHooks = {
                        };
                        this.editor.customConfig.uploadImgHooks = {
                            customInsert: function(insertImg, result, editor) {
                                // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
                                // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
                                // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
                                // result 必须是一个 JSON 格式字符串!!!否则报错
                                var urlPath = result.Data;
                                var url = urlPath;
                                insertImg(url);
                            }
                        }
                        this.editor.customConfig.withCredentials = true; // 跨域携带cookie
                        this.editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
                        this.editor.create(); // 创建
                        //editor.txt.html(content); // 为编辑器赋值
                    },
    
                    GetModel: function() {
                        var self = this;
                        sa.ajax('/Memberships/Activitys/GetModel/@ViewBag.id',
                            {},
                            function(res) {
                                if (res != null) {
                                    self.model = res;
                                    this.editor.txt.html(this.model.VipRule); //为编辑器赋值
                                   
                                } // 数据
                            }.bind(this),
                            { type: "get" });
                    },
    
                    mounted: function() {
     
                    if (@ViewBag.Id != 0) {
                        this.GetModel();
                    };
                    this.createEditor(); // 创建富文本编辑器
                }

    参考文章:

    wangeditor
    https://www.cnblogs.com/ingxx/p/7995500.html
    https://blog.csdn.net/lhjuejiang/article/details/84671518
    https://www.jianshu.com/p/b7bf0a5ed344

    此随笔或为自己所写、或为转载于网络。仅用于个人收集及备忘。

  • 相关阅读:
    Block代码块中使用局部变量注意点
    This application's application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.
    iOS实现渐变颜色
    linker command failed with exit code 1 (use -v to see invocation)
    关于SVN的405错误Server sent unexpected return value (405 Method Not Allowed)的解决办法
    提交SVN Working copy locked解决
    FSCalendar使用和注意事项
    c/c++左值和右值
    mysql使用笔记(一)
    解决 ssh 登录到ubuntu server 慢的问题
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/13383700.html
Copyright © 2011-2022 走看看