vue富文本编辑器

最新推荐文章于 2024-03-26 09:45:05 发布

勘察加熊人

最新推荐文章于 2024-03-26 09:45:05 发布

阅读量1k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/cf8833/article/details/119317616

版权

本文将指导您在Vue项目中如何引入并使用富文本编辑器，通过三个简单步骤：首先介绍如何导入编辑器插件，接着展示具体使用方法，最后说明如何运行和测试编辑器功能。

摘要由CSDN通过智能技术生成

step1：引入插件

 npm install --save vue2-editor

step2：使用插件

<template>
  <div class="editor-container">
    <p class="expain">
      富文本编辑器是重要并且核心的功能，我们最终选择了vue2-editor，轻量高效，详细请见官方
      <a href="https://www.awesomes.cn/repo/davidroyer/vue2-editor"
         target="_blank">文档</a>
    </p>
    <vue-editor id="editor"
                useCustomImageHandler
                @imageAdded="handleImageAdded"
                v-model="content"></vue-editor>
  </div>
</template>
<script>
import { VueEditor } from "vue2-editor/dist/vue2-editor.core.js";
export default {
  data () {
    return {
      content: "<h1>你好，admin</h1>"
    };
  },
  components: {
    VueEditor
  },
  methods: {