vue --tinymce 解决上传图片的方法

Posted 2020-12-28 wypweb

在 mo ---tinymce  下面的plugins 新建一个uploadimage--index.js文件

/**
 * Created by DELL on 2018/8/7.
 */
/**
 * tinymce plugin
 * Created by jerry on 16/8/5.
 */
tinymce.PluginManager.add(‘uploadimage‘, function (editor) {

  function selectLocalImages() {
    var dom = editor.dom;
    var input_f = $(‘<input type="file" name="thumbnail" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="multiple">‘);
    input_f.on(‘change‘, function () {
      var form = $("<form/>",
        {
          action: editor.settings.upload_image_url, //设置上传图片的路由，配置在初始化时
          style: ‘display:none‘,
          method: ‘post‘,
          enctype: ‘multipart/form-data‘
        }
      );
      form.append(input_f);
      //ajax提交表单
      form.ajaxSubmit({
        beforeSubmit: function () {
          return true;
        },
        success: function (data) {
          if (data && data.file_path) {
            editor.focus();
            data.file_path.forEach(function (src) {
              editor.selection.setContent(dom.createhtml(‘img‘, {src: src}));
            })
          }
        }
      });
    });

    input_f.click();
  }

  editor.addCommand("mceUploadImageEditor", selectLocalImages);

  editor.addButton(‘uploadimage‘, {
    icon: ‘image‘,
    tooltip: ‘上传图片‘,
    onclick: selectLocalImages
  });

  editor.addMenuItem(‘uploadimage‘, {
    icon: ‘image‘,
    text: ‘上传图片‘,
    context: ‘tools‘,
    onclick: selectLocalImages
  });
});使用的时候  先引进来

import ‘tinymce/plugins/uploadimage‘

初始化的时候

upload_image_url: ‘/tinymce‘, //配置的上传图片的路由

plugins: ‘link lists image code table colorpicker textcolor wordcount contextmenu uploadimage‘,
toolbar:
  ‘bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink  code uploadimage | removeformat ‘,