Vue中使用富文本编辑器(wangeditor)

Vue中使用富文本编辑器(wangeditor)

  • 安转 :npm i wangeditor --save
  • 在需要的文件下引入:import Editor from “wangeditor”
  • 实现文字的样式和图片的上传并显示在文本编辑器中

<template>
	<div id="editor"></div>
	//挂载点
</template>

<script>
	export default {
		data(){
			return {
				myEditor:null,
				serverIP: "http://localhost:3001"
				//设置一个服务器端口
			}
		},
		mounted() {
		    this.editor = new Editor("#editor");
		    //创建一个富文本编辑器
		    this.editor.config.menus = [
		    //配置菜单,列表中的都是显示的
		      "head",
		      "bold",
		      "fontSize",
		      "fontName",
		      "italic",
		      "underline",
		      "strikeThrough",
		      "indent",
		      "lineHeight",
		      "foreColor",
		      "backColor",
		      "link",
		      "list",
		      "todo",
		      "justify",
		      "quote",
		      "emoticon",
		      "image",
		      "video",
		      "table",
		      "code",
		      "splitLine",
		      "undo",
		      "redo",
		    ];
		    this.editor.config.uploadImgServer = `${this.serverIP}/upload/img`;
		    //配置上传图片的地址
		    this.editor.config.uploadFileName = "mainPic";
		    //配置图片的名称
		    this.editor.config.zIndex = 0;
		    //设置富文本编辑器的层级
		    this.editor.create();
		    //将富文本编辑器创建在网页之中
		    this.editor.config.uploadImgHooks = {
		    // 图片上传并返回了结果,想要自己把图片插入到编辑器中
		      customInsert: (insertImgFn, result) => {
		      //result是图片的地址
		        insertImgFn(`${this.serverIP}${result.file}`);
		        //将图片插入到富文本编辑器之中
		      },
		    };
		  },
	}
</script>

获取富文本编辑器中的数据

this.editor.txt.html()

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值