Editor 富文本编辑器

富文本编辑器组件。

基础用法

开盖即用，无需额外配置

<template>
  <m-editor id="base-editor" ref="editor" :default-value="data"> </m-editor>

  <div class="flex-center mt10">
    <m-button is="submit" @click="save">获取值</m-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const editor = ref();
const data = `<p style='color:red'>用 JS 设置的内容</p>`;

function save() {
  const data = editor.value.getEditorValue();
  console.log("++++++++++> data:", data);
}
</script>

<style scoped></style>

显示代码

外置自定义菜单

const exButton = [
  {
    icon: "robot_line",
    name: "aaa",
    target: () => {
      visible.value = true;
    }
  }
];

<template>
  <m-editor id="ex-button-editor" ref="editor" :default-value="data" :exButton="exButton"> </m-editor>

  <m-dialog v-model="visible" title="自定义" size="s" height="auto">
    <div class="flex-center mt10">
      <m-button is="submit" @click="setValue">设置新值</m-button>
    </div></m-dialog
  >
  <div class="flex-center mt10">
    <m-button is="submit" @click="save">获取值</m-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const editor = ref();
const data = `<p style='color:red'>用 JS 设置的内容</p>`;
const visible = ref(false);
const exButton = [
  {
    icon: "robot_line",
    name: "aaa",
    target: () => {
      visible.value = true;
    }
  }
];

function save() {
  const data = editor.value.getEditorValue();
  console.log("++++++++++> data:", data);
}

function setValue() {
  editor.value.setEditorValue(`<p style='color:blue'>这是新内容</p>`);
  visible.value = false;
}
</script>

<style scoped></style>

显示代码

Api

Attribute 属性

属性名	必填	说明	类型
id	✅	唯一标记	string
defaultValue	❌	默认值	string
exButton	❌	外置按钮	ButtonType

ButtonType 类

属性名	必填	说明	类型
icon	✅	图标	string
name	✅	描述	string
target	✅	执行方法	function

Exposes 暴露

Function 方法

const editor = ref();
function save() {
  const data = editor.value.getEditorValue();
}

方法名称	请求参数	描述
setEditorValue	string	编辑富文本内容
getEditorValue	null	获取富文本内容