1. 安装依赖包

npm install @wangeditor/editor-for-vue@next --save

<template>

 <el-button @click="gethtml">获取返回值</el-button>

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

  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted } from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//富文本编辑器
 // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    const valueHtml = ref('<p>hellortrt778888</p>')
      const handleCreated = (editor:any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    };

const gethtml = () => {
  alert(valueHtml.value);
};

</script>

• 本文标题： Vue 3.0 使用富木HTML编辑器
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：Vue 3.0 El-Table日期格式化
• 下一篇： Vue3.0 省，市，区级联动