vue使用富文本

1、安装

cnpm install vue-quill-editor

2、在main.js中引入

// 富文本
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3、使用

<template><div><quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor><!-- 富文本内容 --><div class="text"></div><button v-on:click="saveHtml">保存</button></div>
</template> 
<script>import { quillEditor } from 'vue-quill-editor'import $ from 'jquery'//先安装jqueryexport default{data(){return {content:null,editorOption:{}}},computed: {editor() {return this.$refs.myQuillEditor.quill;},},methods:{onEditorBlur(){//失去焦点事件},onEditorFocus(){//获得焦点事件},onEditorChange(){//内容改变事件//console.log(this.content)//$('.text').html(this.content)},saveHtml(event){//点击保存按钮保存alert(this.content);}}}
</script>    

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/654264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vite项目创建

1.使用命令创建一个vite项目 npm init vuelatest vite.config.js配置 import { fileURLToPath, URL } from "node:url";import { defineConfig, loadEnv } from "vite"; import vue from "vitejs/plugin-vue"; export default defineConfig(({…

小红的回文串构造

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例1&#xff1a; 输入 abba 输出 baab 样例2&#xff1a; 输入 aba 输出 -1 思路&#xff1a; 由题意&#xff0c;题目保证给出的字符串是回文串的&#xff0c;所以我们只需要获取两个不同的…

Spring cloud智慧工地信息平台管理系统源码

目录 报警统计 实时报警列表 工程进度 劳务信息 隐患信息 施工安全管理 人员证书管理 专项安全方案 安全方案审批 隐患排查管理 安全检查统计 危险源Top10 整改超时预警 检查问题数量统计 安全隐患趋势 安全日志管理 视频监控查看 视频回放 AI危险源识别 AI应用总览 AI设备 机械…

MySQL数据库基础合集

MySQL数据库基础合集 目录 MySQL数据库基础合集SQL关键字DDL关键字DML关键字DQL关键字DCL关键字约束关键字 SQL基础数据类型整数类型字符类型浮点类型时间类型 数据定义语言DDL1.查看数据库2.创建库3.删除库4.切换库5.创建表6.删除表7.查看表8.查看表属性9.插入列10.修改列11.设…

在线制作gif动图怎么做?一个方法轻松制作gif动画

有时候一张普通的图片无法表达出我们的意思&#xff0c;但是视频又比较长看起来太过复杂。这时候&#xff0c;大家就可以使用gif动图了&#xff0c;不需要下载软件使用gif生成器&#xff08;https://www.gif.cn/&#xff09;-GIF中文网&#xff0c;轻松一键就能快速完成gif在线…

扭蛋机小程序开发:创新体验与商业机会

一、引言 随着移动应用的普及&#xff0c;小程序已经成为一种新型的应用形式&#xff0c;以其轻便、快捷、无需安装等优点深受用户喜爱。扭蛋机作为一种常见的娱乐设备&#xff0c;其小程序开发将带来全新的用户体验&#xff0c;同时也为企业带来了商业机会。本文将探讨扭蛋机…

【Android】实现简易购物车功能(附源码)

先上结果&#xff1a; 代码&#xff1a; 首先引入图片加载&#xff1a; implementation com.github.bumptech.glide:glide:4.15.1配置权限清单&#xff1a; <!-- 网络权限 --><uses-permission android:name"android.permission.INTERNET"/><uses…

C# 命名管道NamedPipeServerStream使用

NamedPipeServerStream 是 .NET Framework 和 .NET Core 中提供的一个类&#xff0c;用于创建和操作命名管道的服务器端。命名管道是一种在同一台计算机上或不同计算机之间进行进程间通信的机制。 命名管道允许两个或多个进程通过共享的管道进行通信。其中一个进程充当服务器&…

【安装指南】HBuilder X 下载、安装详细教程

目录 &#x1f33a;1. 概述 &#x1f33b;2. HBuilder X 安装包下载 &#x1f33c;3. 安装详细教程 &#x1f33a;1. 概述 HBuilder X 是一款由DCloud开发的基于Electron框架的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Web和移动应用程序的开发。以下是…

笔记本电脑系统Win10重装教程

当前很多用户都会使用笔记本电脑办公&#xff0c;如果笔记本电脑携带的操作系统不好用&#xff0c;就会影响到用户的办公效率&#xff0c;这时候可以给笔记本电脑重新安装一款好用的系统。以下小编带来笔记本电脑系统Win10重装教程&#xff0c;让用户们轻松给笔记本电脑重新安装…

【C++杂货铺】详解类和对象 [中]

博主&#xff1a;代码菌-CSDN博客 专栏&#xff1a;C杂货铺_代码菌的博客-CSDN博客 目录 &#x1f308;前言&#x1f308; &#x1f4c1; 类的6个默认成员函数 &#x1f4c1; 构造函数 &#x1f4c2; 概念 &#x1f4c2; 特性&#xff08;灰常重要&#xff09; &#x1f4c…

止盈和止损有什么区别?澳福实例讲解止盈如何工作

由于经验不足的原因&#xff0c;刚进入市场的新手经常搞不清楚止盈和止损之间的区别。其实事实区分他们很简单&#xff0c;它们的应用完全不同&#xff0c;服务于不同的目的。 那么&#xff0c;现在澳福 外汇和各位投资者来仔细看看止盈。该订单在价格达到指定水平时锁定利润。…

IP对亚马逊测评自养号有多么的重要?

在亚马逊测评自养号的实践中&#xff0c;IP地址是至关重要的因素。IP协议为互联网上的每个网络和主机提供了一个统一的地址格式&#xff0c;确保了每个地址的唯一性。通过使用IP地址&#xff0c;我们可以屏蔽物理地址的差异&#xff0c;使得网络通信得以顺利进行。因此&#xf…

vit细粒度图像分类(五)TransFC学习笔记

1.摘要 细粒度图像具有不同子类间差异小、相同子类内差异大的特点。现有网络模型在处理过程中存在特征提取能力不足、特征表示冗余和归纳偏置能力弱等问题&#xff0c;因此提出一种改进的 Transformer图像分类模型。 首先&#xff0c;利用外部注意力取代原 Transformer模型中的…

深入解析美颜SDK和动态贴纸技术的工作原理与应用

美颜SDK和动态贴纸技术作为图像处理领域的瑰宝&#xff0c;为用户提供了实时、高质量的美化效果。 一、美颜SDK的工作原理 美颜SDK是一种集成在移动应用、直播平台中的处理工具&#xff0c;通过算法实现实时美颜效果。 1.人脸检测与关键点定位 美颜的第一步是识别图像中的人…

在中国如何方便地使用GPT Plus?

一、背景 通过魔法&#xff0c;顺利登录ChatGPT&#xff0c;准备升级GPT Plus时&#xff0c;发现需要国外信用卡才能支付&#xff0c;这对大多数中国人来说是不方便的。在google搜索解决方案时&#xff0c;发现了WildCard平台&#xff0c;可以一键升级 GPT Plus (GPT-4)。将基…

字符串函数(1)

目录 大小写转换 首字母大写 计算字符串的长度 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 字符串函数可以对字符串数据进行处理&#xff0c;在 Oracle 中此类函数主要有如下几种&#xff1a; UPPER()、LOWER()、INITCAP()、REP…

python数据类型-字符串

1 表示方式 python单行字符串用单引号’内容’或双引号"内容"表示&#xff0c; 多行字符串用三引号表示&#xff0c;‘’‘换行内容’或"““换行内容””"&#xff0c; str()函数可将其它类型转换为字符串类型 a henry b "Tom" c 窗前明月…

快速入门JavaScript基础

JavaScript认知 序言 JavaScript发展历史(JS) 简称JS 1.Netscape(网景) 公司的这种浏览器脚本语言&#xff0c;最初名字叫做 Mocha2.1995年9月改为 LiveScript3.1995年12月&#xff0c;Netscape 公司与 Sun 公司&#xff08;Java 语言的发明者和所有者&#xff09;达成协议&am…

windows消息循环之手撸一个Win32窗口程序

Windows消息循环&#xff08;Windows Message Loop&#xff09; 在Windows操作系统中&#xff0c;一个程序通过不断地接收和处理消息来保持活动状态的一种机制。在Windows编程中&#xff0c;消息循环是处理用户输入、操作系统事件和其他消息的关键部分。 在Windows应用程序中…