vue-quill-editor富文本编辑器使用步骤

news2025/2/25 22:11:10

首先放上效果图

目录

1.安装

2.引入到项目中

3.在页面上写组件

4.配置option

5.给工具栏鼠标悬停加上中文释义

6.上传图片到七牛云

7.自定义控制图片大小

1.安装

npm install vue-quill-editor -S

2.引入到项目中

        有两种挂载方式： 全局挂载 和 在组件中挂载，根据自己的项目需求选择，一般用到富文本编辑都是在某一个项目中，这里只写在项目中挂载的方式

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 {
  components: {
    quillEditor
  }
}

3.在页面上写组件

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>
// 失去焦点事件
  onEditorBlur(quill) {
    console.log('editor blur!', quill)
  },
// 获得焦点事件
  onEditorFocus(quill) {
    console.log('editor focus!', quill)
  },
// 准备富文本编辑器
  onEditorReady(quill) {
    console.log('editor ready!', quill)
  },
// 内容改变事件
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html
  },

4.配置option

// 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },

        这里的size和header经过了处理，如图：换成了自定义内容，例如，修改字号，方法如下：

        4.1.找到node_modules里的quill/dist/quill.js

        4.2.在文件中搜索small，快速找到，然后修改成你想要的数据，这里简单，直接贴图

        4.3.修改完js之后，需要修改一下css文件 ，这样你设置的才生效，在同级目录下找到quill.snow.css文件，同样搜索small所在的位置，仿照着改就行，主要是这两处

        可以把原先的注释掉，也可以保留，影响不大，相当于你设置另一套css

// 这个是字号数字对应的显示的内容，vertical-align根据个人需要加不加，因为我页面那个字与其他对不齐
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  content: '12px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  content: '14px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  content: '16px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  content: '18px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  content: '20px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  content: '22px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  content: '24px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  content: '28px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  content: '32px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  content: '36px';
  vertical-align: top;
}



// 这个是字号数字对应的px值
.ql-editor .ql-size-12 {
  font-size: 12px;
}
.ql-editor .ql-size-14 {
  font-size: 14px;
}
.ql-editor .ql-size-16 {
  font-size: 16px;
}
.ql-editor .ql-size-18 {
  font-size: 18px;
}
.ql-editor .ql-size-20 {
  font-size: 20px;
}
.ql-editor .ql-size-22 {
  font-size: 22px;
}
.ql-editor .ql-size-24 {
  font-size: 24px;
}
.ql-editor .ql-size-28 {
  font-size: 28px;
}
.ql-editor .ql-size-32 {
  font-size: 32px;
}
.ql-editor .ql-size-36 {
  font-size: 36px;
}

// 选择字号富文本字的大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  font-size: 36px;
}

         富文本里面的下拉框默认是不滚动的，想要滚动效果，加上下面的css

/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}

        

5.给工具栏鼠标悬停加上中文释义

        找到元素可以看到，每一个tool都有一个class， 这个的原理就是先把所有的class列出来，然后根据class获取元素，给它加上title属性就可以了

           先定义一个数组，把所有的工具放在里面

// toolbar标题
const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳转配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜体' },
  { Choice: '.ql-underline', title: '下划线' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '删除线' },
  { Choice: '.ql-blockquote', title: '块引用' },
  { Choice: '.ql-code', title: '插入代码' },
  { Choice: '.ql-code-block', title: '插入代码段' },
  { Choice: '.ql-font', title: '字体' },
  { Choice: '.ql-size', title: '字体大小' },
  { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
  { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '对齐方式' },
  { Choice: '.ql-color', title: '字体颜色' },
  { Choice: '.ql-background', title: '背景颜色' },
  { Choice: '.ql-image', title: '图像' },
  { Choice: '.ql-video', title: '视频' },
  { Choice: '.ql-link', title: '添加链接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字体格式' },
  { Choice: '.ql-script[value="sub"]', title: '下标' },
  { Choice: '.ql-script[value="super"]', title: '上标' },
  { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
  { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
  { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]

         然后在function中循环，找到元素，添加title，至于放在那个function根据具体情况看，反正得是在页面上已经渲染好元素之后，不然会获取不到元素，可以直接放在@ready的函数里面

for (let item of titleConfig) {
        let tip = document.querySelector('.quill-editor ' + item.Choice)
        if (!tip) continue
        tip.setAttribute('title', item.title)
      }

至此，一个富文本编辑器，基本可以使用

6.上传图片到七牛云

        一般会遇到需要上传图片的操作，图片肯定不能只是保存到本地，这个根据项目需求，我是放在七牛云上。

        添加一个上传组件，并隐藏起来，以免影响页面：

<el-upload
  v-show="false"
  class="avatar-uploader"
  :data='fileUpload'
  :show-file-list="false"
  :http-request="onUploadHandler"
 >
</el-upload>

        在option中配置上传操作，之前的option就耀稍作修改

 editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ direction: 'rtl' }], // 文本方向
              [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 链接、图片、视频
            ],
            handlers: {
              'image': function (value) {
                if (value) { // value === true
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        },
        placeholder: '请输入正文'
      }

        点击富文本上的上传图片，就会触发这里的handlers，将操作引到upload的函数上，在这个函数里面需要做的操作是，将图片上传到七牛云，并拿到返回的在线链接，然后将图片链接插入到页面对应位置上。这里我的上传是自己封装了函数。

async onUploadHandler(e) {
      const imageUrl = 上传七牛云后返回来的一串在线链接

      // 获取光标所在位置
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 插入图片  
      quill.insertEmbed(length, 'image', imageUrl)
      // 调整光标到最后
      quill.setSelection(length + 1)
      // this.content += url
    }

7.自定义控制图片大小

        先安装插件

        npm i quill-image-resize-module -S

        插件需要webpack支持！！！

编辑 vue.config.js 文件   修改vue.config.js后需要重新启动项目方可生效

plugins: [
    ...
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
    ...

在页面上引入，并且在data中，与toolbar平级进行配置

import * as Quill from 'quill'
// 调整上传图片大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)



modules:{
    toolbar: {},
    // 调整图片大小
     imageResize: {
         displayStyles: {
             backgroundColor: 'black',
             border: 'none',
             color: 'white'
         },
         modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
     }
}

参考文章：

基于Vue项目的富文本vue-quill-editor的使用

vue-quill-editor富文本编辑器在vue内自定义配置文字大小，字体下拉框

vue-quill-editor 图片上传，拖拽，粘贴，调整尺寸，清除复制粘贴样式

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Vue插槽详解】

【Vue插槽详解】

Vue插槽详解Vue插槽的作用一、默认插槽完整代码&#xff1a;二、具名插槽完整代码&#xff1a;三、作用域插槽完整代码如下&#xff1a;Vue插槽的作用 Vue插槽是Vue中常见的一种组件间的相互通信方式&#xff0c;作用是让父组件可以向子组件指定位置插入html结构&#xff0c;适…
阅读更多...
记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 提升首屏的加载速度&#xff0c;是前端性能优化中最重要的环节&#xff0c;这里笔者梳理出一些 常规且有效 的首屏优化建议 目标&#xff1a; 通过对比优化前后的性能变化&#xff0c;来验证方案的有效…
阅读更多...
除夕最绚丽3D烟花代码（html+音效）

除夕最绚丽3D烟花代码（html+音效）

今天就是除夕了&#xff0c;新年怎么能少得了烟花呢&#xff1f;虽然绝大部分地区禁止燃放烟花&#xff0c;但该欣赏的烟花还是要欣赏滴~~ 最近整理文件&#xff0c;找到了一份烟花代码&#xff0c;3D特效&#xff0c;今天分享给大家&#xff0c;希望大家喜欢。 话不多说&#…
阅读更多...
uni.getLocation和wx.getLocation方法调用无效，也不返回失败，解决方案！！！

uni.getLocation和wx.getLocation方法调用无效，也不返回失败，解决方案！！！

线上已解决问题的代码 记录时间 2022.12.10 //获得地理定位信息uni.getLocation({type: wgs84,success: function(resp) {console.log(11111);//保存纬度数据let latitude resp.latitude;//保存经度度数据let longitude resp.longitude;console.log(经度 latitude);console…
阅读更多...
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

掌握分寸感&#xff0c;找目标一致的人协同你&#xff0c;有效地调配资源&#xff0c;就可以提高效率。 写在前面的话&#xff1a;博主最近想要搭建自己的前端若依项目&#xff0c;因此此系列博客会做一些记录。我的项目gitee地址&#xff1a; https://gitee.com/xuruicong/rac…
阅读更多...
less和sass的区别[简洁易懂]

less和sass的区别[简洁易懂]

一、基础知识 1.sass&#xff0c;less都是CSS的预处理器&#xff0c;其基本思想就是用编程的思路编写CSS代码。增加了变量&#xff0c;嵌套&#xff0c;函数&#xff0c;语句&#xff0c;继承等概念。有助于模块化开发&#xff0c;例如写一个换肤的效果&#xff0c;以前我们需要…
阅读更多...
前端200道面试题及答案（更新中）

前端200道面试题及答案（更新中）

目录 html相关 1&#xff09;说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别&#xff1f; 2&#xff09;link和import的区别 3&#xff09;浏览器如何实现不同标签页的通信&#xff1f; 4&#xff09;iframe的优缺点 5&#xff09;canvas 6&#x…
阅读更多...
Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

To 初学Python的Pythonista: Sublime Text相对于PyCharm和Visual Studio Code&#xff0c;确实有不足之处&#xff0c;但提供了众多功能丰富的插件&#xff0c;且最大优点就是相对于Pycharm和VSCODE&#xff0c;它体积小&#xff0c;启动速度快。对于Python的初学者来说&#…
阅读更多...
JavaScript基础总结---重点

JavaScript基础总结---重点

目录JavaScript简介什么是JavaScript浏览器执行JS过程JS的组成JS的引入方式函数与作用域arguments的使用全局变量与局部变量预解析对象创建对象的三种方式1.利用字面量创建对象2.利用 new Object 创建对象3.利用构造函数创建对象遍历对象属性变量、属性、函数、方法总结new关键…
阅读更多...
节点流和处理流详解

节点流和处理流详解

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 1. 基本介绍 节点流可以从一个特定的数据源读写数据&#xff0c;如FileReader&#xff0c;FileWriter处理流&#xff08;也叫包装流&#xff09;是“连接”在已存在的流&#xff08;节点流或处理流&#xff09;之上&#x…
阅读更多...
web服务器项目常见面试题目（C++）

web服务器项目常见面试题目（C++）

项目介绍 1、为什么要做这样一个项目&#xff1f; 在学习CPP语言的时候&#xff0c;发现需要做一个项目来巩固一下&#xff0c;网上有推荐这个项目&#xff0c;然后就自己尝试做了一下。这个项目综合性比较强&#xff0c;从中既能学习Linux环境下的一些系统调用&#xff0c;也…
阅读更多...
Vue3创建项目（一）新手教程

Vue3创建项目（一）新手教程

✅作者简介&#xff1a; 我是痴心阿文&#xff0c;你们的学友哥。 整理一下Vue3创建项目&#xff0c;新手教程&#xff0c;看完需要预计花费10分钟。 1.环境准备 Vue依赖NodeJs的环境&#xff0c;需要先安装Nodejs。 2.NodeJs安装 打开NodeJs下载页选择自己系统对应的版本下载。…
阅读更多...
【JAVA】书店管理系统（附带前后端源码及资源）

【JAVA】书店管理系统（附带前后端源码及资源）

【JAVA_Web】书店管理系统&#xff08;附带前后端源码及资源&#xff09; 一、项目的目的和意义 1.1目的 在“互联网”的大趋势下&#xff0c;线上销售以其简单、便捷、高效的特点受到人们的青睐。网上书店不受时间或者空间的限制&#xff0c;只要在网络覆盖的地方人们就可以…
阅读更多...
vue3 动态加载组件、动态引入组件

vue3 动态加载组件、动态引入组件

1.问题 在做一个用vite构建的vue3项目时&#xff0c;动态拉取导入.vue页面&#xff0c;然后控制台一直有以下提示&#xff0c;页面也无法渲染出来。 2.分析 根据上面的报错提示&#xff0c;让我们安装并使用&#xff1a;rollup/plugin-dynamic-import-vars 这个插件&#xff0…
阅读更多...
JS遍历对象的七种方法

JS遍历对象的七种方法

我根据阮老师的《ES6标准入门》学习并总结了七种遍历对象的方法&#xff0c;我会将分别介绍这七种方法并进行详细的区分&#xff0c;并将从属性可枚举性问题与遍历方法两个大方面讲述全文&#xff0c;其中可枚举性是掌握遍历对象之前的的铺垫&#xff0c;请读者耐心学习&#x…
阅读更多...
【解决vscode终端输出中文乱码问题图文教程】

【解决vscode终端输出中文乱码问题图文教程】

全网最全解决vscode运行C/C终端输出乱码问题图文教程解决vscode终端输出中文乱码问题&#xff0c;强推**方法二**&#xff0c;少走几年弯路乱码原因方法一&#xff08;永久性&#xff09;方法二&#xff08;永久性&#xff09;强力推荐&#xff01;&#xff01;&#xff01;&am…
阅读更多...
Vue3中样式渗透:deep()为什么无效

Vue3中样式渗透:deep()为什么无效

今天学习 /deep/ 样式穿透&#xff0c;因为vue3中已经使用:deep()取代了/deep/ &#xff0c;所以直接用:deep()练习。 :deep()的使用场景&#xff1a; 如果给当前组件的style 节点添加了scoped 属性&#xff0c;则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组…
阅读更多...
DVWA（全级别通关教程详解）

DVWA（全级别通关教程详解）

文章目录Brute ForceLowMediumCommand InjectionLowMediumHighCSRFLowMediumHighFile InclusionLowMediumHighFile UploadLowMediumHighSQL Injection &#xff08;手工&#xff09;LowMediumHighSQL Injection(工具)LowMediumHighSQL Injection (Blind)Low布尔盲注时间盲注XSS…
阅读更多...
若依RuoYi框架log图标与文字怎么改？

若依RuoYi框架log图标与文字怎么改？

文章目录1.若依修改主界面图标2.若依修改主界面文字3.若依修改页面上方图标4.若依修改页面上方文字5.若依登录页面文字修改6.免费图片转换网站1.若依修改主界面图标 图片路径: /src/assets/logo/logo.png直接将想要替换的png格式图片将其替换即可&#xff0c;图片大小建议为60*…
阅读更多...
Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识&#xff0c;以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程&#xff0c;也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期&#xff0c;也就是从开始创建、初…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023