编辑器强势出击：vue3 + wangEditor 5 携手打造自定义下拉框

前端

2023-04-03 23:29:44

Vue3 + WangEditor 5：携手共舞，解锁自定义下拉框

各位前端大牛，今天咱们的舞台是火爆前沿的Vue3和新星冉冉的WangEditor 5，准备踏上精彩的征程，打造自定义下拉框，让富文本编辑器大放异彩！

Vue3 + WangEditor 5：初识邂逅

Vue3以其敏捷响应、精简代码和组件化优势独领风骚；而WangEditor 5凭借轻盈、可定制、易扩展，迅速俘获众多前端开发者的芳心。今天，我们就要将它们强强联手，创造不一样的火花！

自定义下拉框：彰显个性

在WangEditor 5的富文本编辑器中，自定义下拉框犹如点睛之笔，赋予文本样式个性化表达。让我们一步步深入其中，打造属于自己的下拉框：

创建Vue3项目： 创建一个崭新的Vue3项目，作为展示我们自定义下拉框的舞台。
安装WangEditor 5： 用一条命令请进我们的项目：npm install wangEditor@5.x.x。
定义下拉框： 设计一系列选项，让用户随心所欲切换文本样式，例如：

const options = [
  { value: "h1", label: "Heading 1" },
  { value: "h2", label: "Heading 2" },
  { value: "h3", label: "Heading 3" },
];

将下拉框添加到编辑器： 将我们精心设计的下拉框放入WangEditor 5的工具栏，让它成为编辑器不可或缺的一部分：

editor.menus.fontName.list = options;

动态改变下拉框内容： 让下拉框内容随心而动，实时响应用户的操作。当用户改变文本样式时，更新下拉框选项：

editor.customConfig.onchange = (editor) => {
  const currentStyle = editor.selection.getSelectionStyle();
  if (currentStyle.includes("font-size")) {
    // 改变下拉框选项
    editor.menus.fontName.list = [
      { value: "large", label: "Large" },
      { value: "small", label: "Small" },
    ];
  }
};

代码示例：一睹为快

<template>
  <div id="editor"></div>
</template>

<script>
import { createApp } from "vue";
import wangEditor from "wangEditor";

const app = createApp({});
app.use(wangEditor);

const editor = wangEditor.createEditor({
  selector: "#editor",
});

const options = [
  { value: "h1", label: "Heading 1" },
  { value: "h2", label: "Heading 2" },
  { value: "h3", label: "Heading 3" },
];

editor.menus.fontName.list = options;

editor.customConfig.onchange = (editor) => {
  const currentStyle = editor.selection.getSelectionStyle();
  if (currentStyle.includes("font-size")) {
    editor.menus.fontName.list = [
      { value: "large", label: "Large" },
      { value: "small", label: "Small" },
    ];
  }
};
</script>

常见问题解答：释疑解惑

Q：如何将下拉框添加到工具栏的不同位置？
A：使用editor.menus.fontName.droplist属性自定义下拉框的位置。
Q：可以动态添加或删除下拉框选项吗？
A：当然可以！使用editor.menus.fontName.list属性动态更新选项。
Q：如何获取当前选中的下拉框选项？
A：使用editor.selection.getSelectionStyle()方法获取当前选中的选项值。
Q：下拉框中的选项可以是图标或图片吗？
A：是的，使用label属性中的HTML代码即可。
Q：如何将下拉框应用到特定文本范围？
A：通过editor.selection.saveRange()和editor.selection.restoreSelection()方法控制文本范围。