首页vue wangeditor使用

vue wangeditor使用

时间: 2024-10-09 07:15:31 浏览: 84

Vue Wangeditor是一个基于百度编辑器（WangEditor）的轻量级富文本编辑器插件，它将WangEditor的功能封装成了Vue组件的形式，非常适合在Vue.js项目中集成富文本编辑功能。以下是使用Vue Wangeditor的基本步骤：

安装: 使用npm或yarn添加依赖：

npm install vue-wangeditor --save
或者
yarn add vue-wangeditor

引入并注册组件: 在main.js或其他入口文件中导入，并在Vue实例中使用：

import VueWangEditor from 'vue-wangeditor'
import 'wangeditor/dist/css/wangEditor.css'

Vue.component('editor', VueWangEditor)

在模板中使用:

<template>
  <div>
    <editor :config="editorConfig"></editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorConfig: {
        // 配置项，如主题、工具栏等
        toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', '|', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertImage', 'uploadFile'],
      }
    }
  }
}
</script>

配置项自定义: 可以根据需要调整editorConfig对象中的选项。
事件处理: Vue Wangeditor提供了许多事件，例如onchange、onblur等，你可以监听这些事件以获取编辑内容的变化。