帅哥们，vue+elementui有好用的富文本编辑器吗？ -泛旅传媒

1. wangEditor5介绍

wangEditor5 —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。官网：www.wangEditor.com

2. 下载

注意： wangeditor都是小写字母

// 下面两个依赖都需要安装 
npm i @wangeditor/editor  
npm i @wangeditor/editor-for-vue@next

3. 相关组件

Editor : 编辑器组件 Toolbar：菜单栏组件

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
...
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar 属性/>
    <Editor 属性/>
  </div>
</template>

4.了解vue3的shallowRef

Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。 Vue 确实也为此提供了一种解决方案，通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理。

const shallowArray = shallowRef([
  /* 巨大的列表，里面包含深层的对象 */
])
 
 
// 这不会触发更新...
shallowArray.value.push(newObject)
// 这才会触发更新
shallowArray.value = [...shallowArray.value, newObject]
 
 
// 这不会触发更新...
shallowArray.value[0].foo = 1
// 这才会触发更新
shallowArray.value = [
  {
    ...shallowArray.value[0],
    foo: 1
  },
  ...shallowArray.value.slice(1)
]

使用富文本编辑器完整的小案例

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef, computed } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

//接收props
const props = defineProps({
  html: String,
});

const emit = defineEmits();
// 内容 HTML
const valueHtml = computed({
  get: () => {
    return props.html;
  },
  set: (value) => {
    emit("update:html", value);
  },
});

//定义模式
const mode = "simple"; // 或 'simple'

// 默认按模式来显示工具栏
const toolbarConfig = {};

//配置上传图片的接口
// 初始化默认配置
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {},
};

editorConfig.MENU_CONF["uploadImage"] = {
  server: "/api/upload",
  fieldName: "file",
  headers: {
    Authorization: "Bearer " + sessionStorage.getItem("token"),
  },
  // 上传之前触发
  onBeforeUpload(file) {
    return file;
  },

  // 上传进度的回调函数
  onProgress(progress) {
    // onProgress(progress) {
    // progress 是 0-100 的数字
    console.log("progress", progress);
  },
  // 自定义插入图片
  customInsert(res, insertFn) {
    // customInsert(res, insertFn) {
    // res 即服务端的返回结果
    let { url } = res;
    // 从 res 中找到 url alt href ，然后插入图片
    insertFn(url);
  },
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  //打印所有默认配置
  // console.log(editor.getConfig()["MENU_CONF"])
};
</script>

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<style lang="scss" scoped></style>

实现效果如下图所示

小案例通过富文本编辑器实现文章的编辑并上传至服务器

添加文章的组件代码如下所示

<script setup>
import { ref } from "vue";
import Editor from "./editor.vue";
import { _AddNews } from "../../api/news.js";
const ruleForm = ref({
  title: "",
  author: "",
  content: "",
});
const html = ref("");
const form = ref(null);
// 提交按钮
const submitForm = async () => {
  ruleForm.value.content = html.value;
  //   console.log(ruleForm.value);
  // 可以得到组件中写的title和 作者和 内容 而后发起请求传递到数据库
  let res = await _AddNews(ruleForm.value);
  let { code } = res.data;
  if (code === 0) {
    alert("添加成功");
    resetForm();
  }
};
// 重置按钮
const resetForm = () => {
  // 配置html的内容为空 清空富文本编辑器中的内容
  html.value = "";
  ruleForm.value = [];
};
</script>

<template>
  <div class="add-news">
    <el-form ref="form" :model="ruleForm" status-icon>
      <!-- 新闻标题 -->
      <el-form-item label="新闻标题" prop="title" class="width">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <!-- 作者 -->
      <el-form-item label="新闻作者" prop="author" class="width">
        <el-input v-model="ruleForm.author" />
      </el-form-item>
      <el-form-item label="文章内容" prop="content" class="text">
        <!-- 富文本编辑器组件 -->
        <Editor v-model:html="html"></Editor>
      </el-form-item>
    </el-form>
    <el-form-item class="right">
      <el-button type="primary" @click="submitForm(form)"> 提交 </el-button>
      <el-button @click="resetForm(form)">重置</el-button>
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
.add-news {
  display: flex;
  align-items: baseline;
  margin-top: 30px;
  .right {
    margin-left: -134px;
  }
}
.width {
  width: 500px;
  margin-left: 20px;
}
.text {
  width: 1400px;
}
</style>

富文本插件组件如下所示

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef, computed } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

//接收props
const props = defineProps({
  html: String,
});

const emit = defineEmits();
// 内容 HTML
const valueHtml = computed({
  get: () => {
    return props.html;
  },
  set: (value) => {
    emit("update:html", value);
  },
});

//定义模式
const mode = "simple"; // 或 'simple'

// 默认按模式来显示工具栏
const toolbarConfig = {};

//配置上传图片的接口
// 初始化默认配置
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {},
};

editorConfig.MENU_CONF["uploadImage"] = {
  server: "/api/upload",
  fieldName: "file",
  headers: {
    Authorization: "Bearer " + sessionStorage.getItem("token"),
  },
  // 上传之前触发
  onBeforeUpload(file) {
    return file;
  },

  // 上传进度的回调函数
  onProgress(progress) {
    // onProgress(progress) {
    // progress 是 0-100 的数字
    console.log("progress", progress);
  },
  // 自定义插入图片
  customInsert(res, insertFn) {
    // customInsert(res, insertFn) {
    // res 即服务端的返回结果
    let { url } = res;
    // 从 res 中找到 url alt href ，然后插入图片
    insertFn(url);
  },
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  //打印所有默认配置
  // console.log(editor.getConfig()["MENU_CONF"])
};
</script>

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<style lang="scss" scoped></style>

实现效果

顶一下

(0)

踩一下

(0)

相关评论

我要评论

帅哥们，vue+elementui有好用的富文本编辑器吗？

1. wangEditor5介绍

2. 下载

3. 相关组件

4.了解vue3的shallowRef

麒麟系统如何切换输入法？

秀米如何生成永久链接？

怎么设置编辑照片删除原图？

unity编辑器应用有残留安装失败

wps公式编辑器中怎么输入罗马数字ⅠⅡⅢ

请问怎么应聘文学网站的编辑

朋友圈怎么修改文案？

在word中编辑文字？

pdf编辑器怎么更新版本？

编辑程序功能禁止如何解除？

魔宝led显示屏怎么改字幕？

电视台编辑工作是干什么的？

文本框不能编辑(WPS表格插入的文本框编辑不了公式？)

电脑版视频剪辑软件？

想找一款关于编辑图片的软件.

Excel宏刷新不能编辑表格

iphone怎么编辑doc？

新下的字体不显示！

soundpad和demo的区别？

excel开始菜单栏隐藏了怎么办？

易语言编辑框字体颜色？

小说编辑分为几种？

三维家生成的vr怎么链接到小程序

蚂蚁的蚂四字词语有什么

Unity编辑器界面wasd移动或者切屏卡顿的问题

有没有免费的PDF编辑器？

360编辑器(为什么大家都在骂 360，360 却依然很强？)

除了美图秀秀还有什么好用的美图软件？

微信怎样设置为好友添加图片描述？

如何修改照片的日期和相机信息？

魔兽争霸里怎么给英雄做背包啊？

微信如何编链接

怎样给QQ里制作图片

邮件怎么设置签名？

我想了解一下网络小说买断？

编辑部英文

秀米h5是图形处理软件吗

美图秀秀怎么把图片上的字换了？

什么软件可以p聊天记录？

除了photoshop，还有什么图像处理软件能够编辑PSD

怎么将用户名改为user？

iOS 平台值得推荐的视频编辑 App？

如何成为一名合格的游戏网站编辑？

linux如何编辑dmp文件

什么是动漫编辑。要类似于名词解释那种 比较官方的定义

135编辑器时间轴怎么新增？

excel表格无法编辑内容该怎么办？

编辑字体(如何编辑字体文件？)

snapseed怎么擦除？

pdf文件怎么编辑？

什么是动漫编辑。要类似于名词解释那种比较官方的定义