使用vue制作富文本框

最新推荐文章于 2024-08-14 23:36:28 发布

马优晨

最新推荐文章于 2024-08-14 23:36:28 发布

阅读量5.2k

点赞数 5

分类专栏： vue 小技巧文章标签： vue的一个富文本框插件富文本框插件富文本框组件 vue制作富文本框 vue设计富文本框

本文链接：https://blog.csdn.net/qq_24147051/article/details/83755154

版权

小技巧同时被 2 个专栏收录

133 篇文章 4 订阅

订阅专栏

vue

90 篇文章 14 订阅

订阅专栏

这里分享一个富文本框插件，如图
在这里插入图片描述

使用方法：

1-安装

     npm install --save vue2-editor
          或者
     yarn add vue2-editor

2- 使用

// Basic Use - Covers most scenarios
import { VueEditor } from 'vue2-editor'
 
// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor, Quill } from 'vue2-editor'

3- 在项目中使用

<template>
   <div id="app">
     <vue-editor v-model="content"></vue-editor>
   </div>
 </template>
 
 <script>
   import { VueEditor } from 'vue2-editor'
 
   export default {
 
   components: {
      VueEditor
   },
 
   data() {
       return {
         content: '<h1>Some initial content</h1>'  
       }
     }
   }
 </script>