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

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

  • 相关阅读:
    arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)
    arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)
    arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)
    arcgis api 3.x for js 入门开发系列五地图态势标绘(附源码下载)
    arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
    Java里面获取当前服务器的IP地址
    Flutter at Google I/O 2018
    Modbus RTU 协议使用汇总
    plsql 创建表空间、用户、赋予权限
    Oracle:ODP.NET Managed 小试牛刀
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/13383700.html
Copyright © 2011-2022 走看看