tinymce使用images_upload_handler将图片处理成base64或者url

1.处理成base64

 initTinymce() {
      const _this = this;
      window.tinymce.init({
        // language: this.language,
        language: "zh_CN",
        selector: `#${this.tinymceId}`,
        height: this.height,
        body_class: "panel-body ",
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: "clean",
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
        default_link_target: "_blank",
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
        // tinymce插入图片支持转base64操作
        images_upload_handler: function(blobInfo, success, failure) {
          var reader = new FileReader();
          reader.readAsDataURL(blobInfo.blob());
          reader.onload = function() {
            console.log(this);
            _this.$message.success("图片上传成功");
            success(this.result);
          };
        },

2.处理成url

<script>
//模仿图片上传返回url操作
  function ajaxUpload(){
    return Promise.resolve({
      uploadedImageUrl: 'https://www.xiyoukeji.com/images/logo_xs.gif'
    })
  }
	 tinymce.init({
    selector: '#tinymce',
    language: 'zh_CN', // 需要在官网自己下载一个全局的langs包。同时我提供的powerpaste本身自带一个langs包里面含中文,所以可以100%支持中文。
    plugins: [
      'powerpaste', // plugins中,用powerpaste替换原来的paste
      //...
    ],
    powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear,效果自行切换对比
    powerpaste_html_import: 'propmt',// propmt, merge, clear
    powerpaste_allow_local_images: true,
    paste_data_images: true,
    images_upload_handler: function (blobInfo, success, failure) {
      // 这个函数主要处理word中的图片,并自动完成上传;
      // ajaxUpload是自己定义的一个函数;在回调中,记得调用success函数,传入上传好的图片地址;
      // blobInfo.blob() 得到图片的file对象;
      ajaxUpload(blobInfo.blob()).then((data) => {
         // 上传成功后,调用success函数传入图片地址
         success(data.uploadedImageUrl)
       })
     },
    // tinymce的其他配置参数
  })
</script>

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
以下是一个Vue demo,演示如何使用tinymce编辑器的`images_upload_handler`选项来上传图片并进行处理: ```vue <template> <div> <textarea ref="myTextarea"></textarea> </div> </template> <script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import 'tinymce/plugins/image' export default { name: 'RichTextEditor', mounted() { const self = this tinymce.init({ selector: 'textarea', plugins: ['image'], images_upload_handler: function (blobInfo, success, failure) { self.uploadImage(blobInfo.blob(), success, failure) } }) }, methods: { uploadImage(file, success, failure) { // 在这里编写上传图片的代码 // 功时调用success方法并传入图片url // 失败时调用failure方法并传入错误信息 } } } </script> ``` 在这个示例中,我们使用了Vue和tinymce来创建一个富文本编辑器。在`mounted`方法中初始化了tinymce,并将`images_upload_handler`选项设置为一个函数,该函数会在上传图片时被调用。 在`images_upload_handler`函数中,我们调用了`uploadImage`方法,并将blob对象、功回调函数和失败回调函数作为参数传递给它。在`uploadImage`方法中,我们可以编写自己的上传图片的代码,处理图片并返回图片url。 请注意,`images_upload_handler`选项只适用于tinymce 5及以上版本。如果您使用的是较早的版本,您需要使用`file_picker_callback`选项来自定义文件选择器并上传图片
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值