富文本 wangeditor

import E from "wangeditor";
import {filterXSS} from "xss"; //xss攻击

  mounted(){  
      this.$nextTick(function () {
        let html = this.ruleForm.content
        this.init(html);
       });
  },
    methods: {
    async init(html){
        //methods里创建调用、或是mounted里面直接生产
         this.editContent = new E(this.$refs.editorElem);//获取组件并构造编辑器 
            this.editContent.config.menus =[
                "head", // 标题
                "bold", // 粗体
                "fontSize", // 字号
                "fontName", // 字体
                "italic", // 斜体
                "underline", // 下划线
                "strikeThrough", // 删除线
                "foreColor", // 文字颜色
                "backColor", // 背景颜色
                "link", // 插入链接
                "list", // 列表
                "justify", // 对齐方式
                "quote", // 引用
                "emoticon", // 表情
                "image", // 插入图片
                "table", // 表格
                // "video", // 插入视频
                "undo", // 撤销
                "redo", // 重复
                "fullscreen"// 全屏
            ] 
        // 上传图片方法二
        // this.editContent.config.uploadImgMaxSize = 3 * 1024 * 1024;
        // this.editContent.config.uploadFileName = 'file'
        // this.editContent.config.uploadImgHeaders ={'Authorization':'Bearer '+ getToken()} 
        // this.editContent.config.uploadImgServer = 'http://112.35.127.4:8089/api/file/upload'//换成后端给你的上传图片的接口
        // this.editContent.config.uploadImgHooks = {
        //     before: function (xhr, editor, files) {
        //     let formdata=new FormData();
        //     console.log(xhr, editor, files)
        //     // for(let i=0;i<files.length;i++){
        //     //     let url = files[i];
        //     //     formdata.append('file', url)
        //     // }
        //     },
        //     customInsert: function (insertImg, result, editor) {
        //         console.log(result)
        //         insertImg(result.data)
            
        //     }
        // } 
        // 上传图片方法二 
        this.editContent.config.showLinkImg = true; //是否隐藏网络图片上传
        this.editContent.config.uploadImgShowBase64 = true; //图片以base64形式保存
        this.editContent.config.uploadFileName = "file";
        this.editContent.config.uploadImgMaxSize = 1 * 1024 * 1024;
        this.editContent.config.customUploadImg = (files, insert) => {
                let formDataCover = new FormData()
                    formDataCover.append('file',files[0])
                    post('file/upload',formDataCover).then(res=>{
                    let {data,code} = res
                    insert(data)
                })
        };   

       
        this.editContent.create(); // 创建富文本实例
        this.editContent.txt.html(html) 
    
    }submit(){
//生成html上传
 let htmlTow = this.editContent.txt.html() 
                htmlTow = filterXSS(htmlTow)
                this.ruleForm.content = htmlTow 
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值