Wang editor 富文本编辑器配置上传图片方法

在这里插入图片描述

<div style="border: 1px solid #ccc; margin: 20px 0">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
            @onDestroyed="onDestroyed"
            @onMaxLength="onMaxLength"
            @onFocus="onFocus"
            @onBlur="onBlur"
            @customAlert="customAlert"
            @customPaste="customPaste"
          />
        </div>
        import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
        //重点配置editorconfig
        data() {
	   	 return {
	      // 编辑器
	      editor: null,
	      html: "<p>暂时未配置上传图片/视频地址 </p>",
	      //根据需要显示工具栏内容
	      toolbarConfig: {},
	      //终点配置
	      editorConfig: {
	        placeholder: "请输入内容...",
	        MENU_CONF: {
	          //配置上传图片
	          uploadImage: {
	            customUpload: this.uploadImg,
	          },
	        },
	      },
	      mode: "simple", // or 'simple'default
      		}
      }
      methods: {
	    uploadImg(file, insertFn) {
	      let imgData = new FormData();
	      imgData.append("file", file);
	      //调自己配置的接口,上传图片
	      接口方法(imgData).then((res) => {
	        ....
       });
    },}
      
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装wang富文本编辑器 使用npm安装: ``` npm install wangEditor --save ``` 使用yarn安装: ``` yarn add wangEditor ``` 2. 在Vue组件中引入wang富文本编辑器 在需要使用富文本编辑器的组件中引入wang富文本编辑器: ```javascript import wangEditor from 'wangeditor' ``` 3. 初始化wang富文本编辑器 在组件的mounted生命周期钩子中初始化wang富文本编辑器: ```javascript mounted () { const editor = new wangEditor(this.$refs.editor) editor.create() } ``` 这里使用了ref来获取DOM元素,创建wangEditor实例并调用create()方法初始化富文本编辑器。 4. 获取富文本编辑器中的内容 在需要获取富文本编辑器中的内容时,可以使用wangEditor实例的txt或者html方法获取: ```javascript const editor = new wangEditor(this.$refs.editor) editor.create() // 获取纯文本内容 const content = editor.txt.text() // 获取HTML内容 const htmlContent = editor.txt.html() ``` 5. 设置富文本编辑器的内容 在需要设置富文本编辑器中的内容时,可以使用wangEditor实例的txt或者html方法设置内容: ```javascript const editor = new wangEditor(this.$refs.editor) editor.create() // 设置纯文本内容 editor.txt.text('这是一段纯文本内容') // 设置HTML内容 editor.txt.html('<p>这是一段HTML内容</p>') ``` 6. 完整代码 ```vue <template> <div> <div ref="editor"></div> <button @click="getContent">获取内容</button> </div> </template> <script> import wangEditor from 'wangeditor' export default { mounted () { const editor = new wangEditor(this.$refs.editor) editor.create() }, methods: { getContent () { const editor = new wangEditor(this.$refs.editor) editor.create() const content = editor.txt.text() console.log(content) } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值