vue wangeditor

转载

mb5ff2f19eb6087 2020-07-27 09:30:00

<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(); // 创建富文本编辑器
            }