vue实现富文本编辑器(附图)

短命女 2024-04-19 08:29 61阅读 0赞

工作项目中涉及到富文本编辑器的使用，这里我使用Vue-Quill-Editor插件实现了一个基本具备设计图上功能的编辑器。

1.  下载Vue-Quill-Editor
    
    `npm install vue-quill-editor --save` 安装 vue-quill-editor 插件。
2.  注册使用插件
    
    在main.js中写如下代码：
    
        import VueQuillEditor from 'vue-quill-editor'
        Vue.use(VueQuillEditor)
3.  组件中使用
    
    代码如下：
    
        <template>
          <div class="about">
            <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </div>
        </template>
        
        <script> import { quillEditor } from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' export default { name: 'about', data () { return { content: null, editorOption: { } } }, components: { quillEditor }, methods: { onEditorReady (editor) { // 准备编辑器 console.log('111') }, onEditorBlur () { // 失去焦点事件 console.log('111') }, onEditorFocus () { // 获得焦点事件 console.log('222') }, onEditorChange () { // 内容改变事件 console.log('333') } } } </script>

效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/84293aad02ae40209b035a46dbe9e56a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue富文本编辑器tinymce

一、概述 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangE

待我称王封你为后i/ 2022年11月17日 05:09/ 0 赞/ 374 阅读

相关 vue中使用富文本编辑器

> 前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器先敬上官网：[http://www.wangeditor.c

柔情只为你懂/ 2022年09月12日 07:56/ 0 赞/ 294 阅读

相关利用 javascript 实现富文本编辑器

近期项目中需要开发一个兼容PC和移动端的富文本编辑器，其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器，桌面端的很多，移动端的几乎没有。桌面端以UEditor为代表

迷南。/ 2022年06月05日 10:44/ 0 赞/ 309 阅读

相关 Vue富文本编辑器 tinymce

1. 介绍tinymce 1.1 查看官网[https://www.tiny.cloud/][https_www.tiny.cloud] 1.2 查看样子 !

╰+哭是因爲堅強的太久メ/ 2022年04月23日 05:28/ 0 赞/ 368 阅读

相关富文本编辑器的实现

react-draft-wysiwyg是文本编辑器的插件 draftjs-to-html是把文本变成HTML的插件 ![watermark_type_ZmFuZ3poZW5

Bertha 。/ 2022年04月17日 00:20/ 0 赞/ 315 阅读

相关富文本编辑器

（1）[UEditor][] （2）[kindEditor][] （3）[summernote][] 另本篇文章有更多富文本编辑器推荐： [https://www

你的名字/ 2022年03月19日 05:52/ 0 赞/ 442 阅读

相关利用 javascript 实现富文本编辑器

利用 javascript 实现富文本编辑器阅读 994 收藏 148 2017-11-03 原文链接：eux.baidu.com 利用 javascrip

待我称王封你为后i/ 2022年03月08日 14:52/ 0 赞/ 240 阅读

相关 Vue中使用wangEditor富文本编辑器

> 本文章向大家介绍Vue中使用wangEditor富文本编辑器，主要包括Vue中使用wangEditor富文本编辑器使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定

曾经终败给现在/ 2021年07月26日 11:38/ 0 赞/ 689 阅读

相关 Vue - 全局使用富文本编辑器

1. vue 安装 vue-quill-editor npm install vue-quill-editor --save 2. main.js中全局引入，注册为

ゞ浴缸里的玫瑰/ 2021年07月25日 16:06/ 0 赞/ 582 阅读

相关 Tinymce富文本编辑器实现步骤

一 Tinymce可视化编辑器参考：[https://panjiachen.gitee.io/vue-element-admin/\/components/tinymc

向右看齐/ 2021年07月24日 14:46/ 0 赞/ 594 阅读