基于vue3、Element Plus和TypeScript构建的HTML5富文本编辑器

最新推荐文章于 2024-06-29 10:44:19 发布

emei8

最新推荐文章于 2024-06-29 10:44:19 发布

阅读量2.5k

点赞数

分类专栏： vue3组件文章标签： vue typescript

本文链接：https://blog.csdn.net/emei8/article/details/124312626

版权

vue3组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue-vuecmf-editor是一款基于vue3、Element Plus和TypeScript构建的HTML5富文本编辑器。

使用说明文档：

组件 | VueCMF基于vue3、element plus、typescript开发的vuecmf相关组件：vue-vuecmf-dialog弹窗组件、vue-vuecmf-editor富文本编辑器、vue3-vuecmf-table多功能列表组件。http://www.vuecmf.com/components/#%E4%BB%8B%E7%BB%8D-2

效果展示：

安装

yarn add vue-vuecmf-editor

在项目中使用

1、导入组件

在vue3项目中 main.ts 引入，如下

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'

//导入
import VuecmfEditor from "vue-vuecmf-editor"

createApp(App).use(VuecmfEditor).mount('#app')

2、然后在模板文件中使用

<template>
  <h3>vuecmf-editor demo</h3>

  <vuecmf-editor
      id="myeditor"
      :content="contentHtml"
      @on-change="getContent"
  ></vuecmf-editor>
  <button @click="save">保存</button>

</template>


<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const contentHtml = ref('Hello world!')

    const getContent = (content:string, id: string) => {
      console.log('id=', id)
      contentHtml.value = content
    }

    const save = ():void => {
      alert(contentHtml.value)
    }

    return {
      getContent,
      contentHtml,
      save
    }

  }
});
</script>

组件中的属性和事件可参考使用说明文档。