vue中tinyMCE富文本框加入图片上传至服务器、行高等功能

tinyMCE.init()初始化方法中配置:
一、图片上传至服务器
    images_upload_handler中上传图片,success()返回图片地址即可、

	images_upload_handler: (blobInfo, success, failure) => {
    	this.handleImageAdded(blobInfo, success, failure)
	},
	// 插入图片的方法
    async handleImageAdded(blobInfo, success, failure) {
      let file = blobInfo.blob();
      // console.log('图片', blobInfo, file)

      const id = uuidv4();
      const url = await this._getUrl(file);
      const suffix = file.name.slice(file.name.lastIndexOf(".") + 1).toUpperCase(); // 获取后缀名
      const newFileItem = {
        id,
        name: "",
        url: url,
        suffix: suffix,
        status: "loading",
        isDelete: true
      };

      // 上传
      try {
        this.setUpLoadData();
        let formData = new FormData();
        Object.keys(this.upLoadData).forEach(key => {
          if (this.upLoadData[key]) {
            formData.append(key, this.upLoadData[key]);
          }
        });
        formData.append("file", file, file.name);
        const result = await Request.post(API.file.uploader.create, formData);
        // 上传成功回填修改数据
        const path = result.path.replace(/\\/g, "/");
        const fullPath = API.file.uploader.uploadIp + path; // 路径
        success(fullPath);
        // console.log(fullPath);
      } catch (error) {
        console.log(error);
        return Promise.reject();
      }
    },

二、行高等功能配置
    

	style_formats_merge: true,
	style_formats: [{
            title: '行高',
            items: [
              { title: '1', styles: { 'line-height': '1' }, inline: 'span' },
              { title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span' },
              { title: '2', styles: { 'line-height': '2' }, inline: 'span' },
              { title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span' },
              { title: '3', styles: { 'line-height': '3' }, inline: 'span' }
            ]
          }, {
            title: '首行缩进',
            block: 'p',
            styles: { 'text-indent': '2em' }
          },
   ],
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值