富文本编辑器vue2-editor

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40846898/article/details/92834024

富文本编辑器vue2-editor


好久没写了,最近一直在加班赶项目,其中也掉了好多坑,今天说下富文本编辑的,希望能帮助到跳进坑的小伙伴们,先说下组件,我用的是vue2-editor,网上好多评论说不好用,但是我感觉用着还行,可能没接触到那么多功能,接下来说下使用的步骤和需要安装的东西。

1.使用 npm install vue2-editor --save 安装到项目中去。
2.在需要的页面中引入 import { VueEditor } from ‘vue2-editor’。

//引入富文本编译器
import { VueEditor } from 'vue2-editor';
export default {
    components: {
      VueEditor
    },

3.代码组件使用:

<el-row>
    <el-col :span="24">
      <el-form-item label="属性名称" style="margin-left:5px" >
         <div >
           <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="你绑定的属性(通常是对象.属性)"> </vue-editor>
         </div>
     </el-form-item>
    </el-col>
  </el-row>
js:
	handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
        var formData = new FormData();
        formData.append('file',file);//'file',这个是后台写的接受参数属性名,一定要保持一样
        axios({
          url: "图片上传的接口路径",
          method: "POST",
          data: formData,
          processData: false, //必须false才会自动加上正确的Content-Type
          contentType: false,//必须false才会避开jQuery对 formdata 的默认处理
        })
        .then(result => {
        //这个方法大家可以百度查一下,"image"意思当图片显示
          Editor.insertEmbed(cursorLocation,"image", "你的图片id(得是全路径,直接能访问到的)");
          resetUploader();
        })
      },
      
 java:
 	 public String fileUpload(HttpServletRequest request, HttpServletResponse response,
                             @RequestParam(value = "file") MultipartFile file)


代码解说:
useCustomImageHandler :作用是图片不会转成base64格式,直接是标签形式。
@imageAdded="handleImageAdded": handleImageAdded方法名,绑定的是图片上传成功时候的操作,
							 我自己的项目是,把图片上传到七牛云,然后获取到图片的id供前台页面显示。
				             当useCustomImageHandler为true且正在将照片添加到编辑器时触发@imageAdded方法

备注:我就是因为和后台的参数名file没对应上,入了半天的坑。以上供大家参考。
展开阅读全文

没有更多推荐了,返回首页