htm + vue + quill 富文本编辑器案例

ops/2024/11/20 2:15:52/

文章目录

  • 前言
  • 一、Quill是什么?
  • 二、使用步骤
    • 1.快速开始
    • 2.主题


前言

Quill 编辑器与element-ui 配合使用,主要用于文章编辑


一、Quill是什么?

Quill是一个跨平台的功能强大的富文本编辑器

二、使用步骤

1.快速开始

技术栈:vue+elementui+quill
代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Quill Editor Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!-- 引入 Quill Editor 的 CSS --><link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"><!-- 引入 Quill Editor 的 JS --><script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script><!-- 引入 vue-quill-editor 的 JS --><script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
</head>
<body><div id="app"><quill-editor v-model="content"></quill-editor></div><script>javascript">Vue.use(window.VueQuillEditor)new Vue({el: '#app',data: {content: 'test'}});</script>
</body>
</html>

效果如下:
在这里插入图片描述

2.主题

去除边框主题 theme: ‘bubble’,
只读 disabled=‘true’
代码如下(示例):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Quill Editor Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!-- 引入 Quill Editor 的 CSS --><link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"><!-- 引入 Quill Editor 的 JS --><script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script><!-- 引入 vue-quill-editor 的 JS --><script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script></head><body><div id="app"><quill-editor v-model="content" disabled='true' :options="editorOption"></quill-editor></div><script>Vue.use(window.VueQuillEditor)new Vue({el: '#app',data: {content: '<p>This is some <strong>rich text</strong> content.</p>',editorOption: {theme: 'bubble',modules: {toolbar: false , }},}});</script></body>
</html>

ps:注意这个代码不生效 可以用 disabled=‘true’ 设置只读

modules: {toolbar: false , }

效果如下:
在这里插入图片描述



http://www.ppmy.cn/ops/135127.html

相关文章

【eNSP】路由基础与路由来源——静态路由实验

路由是数据包从源地址到目的地址的传输路径&#xff0c;静态路由是指网络管理员手动配置的路由条目&#xff0c;用于指定数据包从源地址到目的地址的固定路径。以下是关于静态路由的详细介绍。 一、路由的基础知识点 路由的定义&#xff1a; 路由是指在计算机网络中&#xff…

CnosDB 实时流式计算:优化时序数据处理与降采样解决方案

在处理时序数据时&#xff0c;数据写入周期通常与数据采集设备的频率相关&#xff0c;有时每秒钟就需要处理大量的数据点。长时间处理如此多的数据会导致存储问题。一个有效的解决方案是使用流式计算&#xff0c;将原始数据进行降采样。 流式计算在时序数据库中指对实时数据流…

JavaWeb之Vue

前言 这一节讲Vue 1. Vue概述 这些都是DOM的操作 原来模型和视图不能实现同步变化&#xff0c;但是Vue就可以了 2. 快速入门 1. 2. <script src"js/vue.js"></script><div id"app"> <!-- 准备一个input输入框,绑定一个模…

基本数据类型:Kotlin、Dart (Flutter)、Java 和 C++ 的比较

文章目录 一、基本数据类型的比较1.1 整数类型1.2 浮点类型1.3 字符类型1.4 布尔类型1.5 小结 二、有符号和无符号整数三、二进制补码表示四、精度丢失问题五、结论 在编程语言中&#xff0c;基本数据类型是构建更复杂数据结构的基础。在本文中&#xff0c;我们将比较 Kotlin、…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十三.3:将AVFrame转换成AVPacket.封装。代码改动

请封装&#xff0c;保留ffmpeg结构体 现成安全处理 获取编码缓冲区数据 xencoder.h #pragma once#include <mutex> #include <vector>struct AVCodecContext; struct AVFrame; struct AVPacket; class XEncoder {public:AVCodecContext * Create(int code_id);/…

常见的网络协议汇总(涵盖了不同的网络层次)

网络层协议 IP协议&#xff1a;IP指网际互连协议&#xff08;Internet Protocol&#xff09;&#xff0c;是TCP/IP体系中的网络层协议。IP协议包括IPv4和IPv6&#xff0c;用于为数据包提供源地址和目标地址&#xff0c;从而实现网络通信。ICMP协议&#xff1a;ICMP&#xff08…

Python读取prophesee相机输出的raw文件

import cv2 import json import numpy as np from pathlib import Path import matplotlib.pyplot as plt from metavision_core.event_io import EventsIteratordef visualization_event_streams(p_list, t_list, x_list, y_list, save_pathNone):# 事件流的3D表示fig plt.fi…

Brave127编译指南 Linux篇-环境初始化(六)

引言 完成环境配置后&#xff0c;下一个关键阶段是初始化Brave浏览器的构建环境。这个过程对于确保所有依赖项和必要资源就绪至关重要&#xff0c;为后续的编译和开发工作奠定基础。初始化构建环境涉及几个核心步骤&#xff1a;进入正确的工作目录、安装必需依赖、同步最新Chr…