首页 >  vue代码 >  tinymce富文本静态插入图片

tinymce富文本静态插入图片

时间：2023-12-25

tinymce是一款非常强大的免费富文本编辑器，拥有众多优秀的功能。其中关于图片上传的功能需要结合后端进行上传，这里提供一个直接静态上传的方法：

方法主要使用到了base64和canvas

一、开启图片上传功能

tinymce编辑器需要将一些插件添加到工具栏，这样方便操作

1、添加插件

将image 插件添加进来

const props = defineProps({

   plugins: {

   type: [String, Array],  default:  "image "}, //必填

  toolbar: { type: [String, Array],default: "image",},

});

二、上传图片设置

images_upload_handler为插件的图片上传回调设置，可以在这里进行操作。

这里是将传过来的blob参数通过canvas画图转成图片然后再转成base64进行返回，那么页面展示的就是base64;

当然对于少部分图片可以使用此方法，如果图片过多则不建议，毕竟base64体积过大。

const init = reactive({

  plugins: props.plugins, 

  toolbar: props.toolbar, 

  //图片上传
  images_upload_handler: (blobInfo, progress) =>

      new Promise((resolve, reject) => {

       if (blobInfo.blob().size / 1024 / 1024 > 2) {

        reject({ message: "上传失败，图片大小请控制在 2M 以内", remove: true });

        return;

      } else {

       //转化为blob

        const canvas = document.createElement("canvas");

        const context = canvas.getContext("2d");

        const image = new Image();

        let data = window.URL.createObjectURL(blobInfo.blob());

        image.src = data;

        image.onload = function () {

          canvas.width = image.width;

          canvas.height = image.height;

          context.drawImage(image, 0, 0);

          const base64 = canvas.toDataURL();

          resolve(base64);
        };
      }
    }),

)}

//在onMounted中初始化编辑器
onMounted(() => {

  tinymce.init({});

});