html纯原生网页引入vue3版本的quill editor

已于 2024-06-29 11:38:26 修改
阅读量682 收藏 3
点赞数 4
文章标签： vue.js 前端 javascript
于 2024-06-29 10:44:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llanyw/article/details/140059845
版权

 效果图

版本

@vueup/vue-quill v1.2.0
 vue3.3.8
 Element Plus v2.4.2

引入流程

找一个vue3的项目, 然后安装插件vue版本的quill: vue-quill

npm install @vueup/vue-quill --save

官方地址：https://vueup.github.io/vue-quill/

安装完成之后，把vue-quil插件下dist目录拷贝到原生html同目录下，dist目录名改成: vue-quill

调用此插件参考vue3项目方式

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
 
instance = createApp(App);
instance.component('QuillEditor', QuillEditor)

案例源码 editor.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import Vue before Element -->
  <!--
      vue3 vue-quill editor可用，vue
      -->
  <script src="../vue3-原生html练习/js/vue3.3.8/vue.global.js"></script>
  <link rel="stylesheet" href="../vue3-原生html练习/js/elementPlus/index.css">
  <script src="../vue3-原生html练习/js/elementPlus/index.full.js"></script>
  <title>我是富文本 vue3</title>
  <style>
    .editor {
      width: 100%;
    }
    .ql-editor {
      min-height: 300px;
    }
  </style>
  <link rel="stylesheet" href="./js/vue-quill/vue-quill.snow.css">
  <script src="./js/vue-quill/vue-quill.global.js"></script>
</head>
<body>
<div id="app">
  <h3 style="width: 100%;text-align: center">{{ message }}</h3>
  <el-progress type="circle" :percentage="20"></el-progress>

  <!--  富文本编辑器 vue-->
  <div class="editor" style="background-color: #bfc;margin-top: 30px">
    <quill-editor ref="editorRef" v-model:content="content" :options="options" contentType="html"></quill-editor>
  </div>
</div>
</body>


<script type="module">
  const {createApp, ref, reactive, watch, toRaw} = Vue
  const _app = createApp({
    setup() {
      const message = ref('富文本编辑器VUe3!')
      const content = ref("9999999")
      const editorRef = ref()
      const articleModel = reactive({
        content: "99999"
      })
// 处理富文本图片上传
      const imageHandler = () => {// 创建一个文件输入元素
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        // 模拟点击，打开文件选择对话框
        input.click();
        // 当用户选择文件后触发的事件
        input.onchange = async () => {
          // 获取用户选择的文件
          const file = input.files ? input.files[0] : null;
          if (file) {
            // 创建一个 FormData 对象，用于文件上传
            const formData = new FormData();
            formData.append('file', file);
            try {
              // 使用 axios 发送 POST 请求，将文件上传到服务器
              const response = await axios.post("filesApi.url()", formData, {headers: {'Content-Type': 'multipart/form-data'}});

              // 确保获取到 Quill 编辑器实例
              const quill = toRaw(editorRef.value).getQuill()
              if (quill) {
                // 获取当前光标位置
                const range = quill.getSelection(true);
                // 在当前光标位置插入上传的图片
                quill.insertEmbed(range.index, 'image', response.data.data);
              }
            } catch (error) {
              toast("图片上传失败,请配置图片服务url");
            }
          }
        };
      }

      let options = {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              [{color: []}, {background: []}], // 字体颜色、字体背景颜色
              [{align: []}], // 对齐方式
              [{size: ['small', false, 'large', 'huge']}], // 字体大小
              [{font: []}], // 字体种类
              [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
              // [{ direction: 'ltl' }], // 文本方向
              // [{ direction: 'rtl' }], // 文本方向
              [{indent: '-1'}, {indent: '+1'}], // 缩进
              [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
              [{script: 'sub'}, {script: 'super'}], // 上标/下标
              ['blockquote', 'code-block'], // 引用  代码块
              ['clean'], // 清除文本格式
              ['link', 'image', 'video'], // 链接、图片、视频
            ],
            handlers: {
              image: imageHandler,
            },
          },
        }
      }
      const titleConfig = [// toolbar标题
        {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: '两端对齐'}
      ]

// 给富文本框工具栏加上鼠标悬浮中文提示
      const initTitle = () => {
        for (let item of titleConfig) {
          // .editor 是富文本编辑器的类名
          let tip = document.querySelector('.editor ' + item.Choice);
          if (tip) {
            tip.setAttribute('title', item.title);
          }
        }
      }
      const toast = (message, type = 'warning', fn = null) => {
        ElementPlus.ElMessage({
          message,
          type
        })
      }
      return {
        toast,
        message, content, editorRef, options, imageHandler, articleModel, initTitle
      }
    },
    mounted() {
      this.initTitle();
    },
  })

  _app.use(ElementPlus)
  _app.component('QuillEditor', VueQuill.QuillEditor);
  const vm = _app.mount('#app')
</script>
</html>

参考html引入vue3,element

jQuery 老项目引入vue,elementui （vue3+elementplus）_vue3 jquery-CSDN博客

案例全部源码项目

htmlVue3QuillDemo: VUE3-Quill 引入到原生html的演示案例

Lan.W
关注
关于如何把自己写的html文件放入新建的Vue3工程中
今天学了吗
04-25 3042
主要讲了如何将自己写的html文件移植到新建的Vue工程中。记得在与中间加上，否则会出现1:1 error The template requires child element的报错。
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor
最新发布
qq_35181466的博客
09-06 918
问题：moduleClass is not a constructor，说明vueup/vue-quill没找到quill-better-table依赖，原因是虽然你的quill是2.0.0以上，但是vueup/vue-quill版本还是在2.0.0一下。，这导致了版本冲突。Quill 的多个版本会引起模块注册和使用时的各种问题，例如模块找不到或无法正确初始化。1.检查你的vueup/vue-quill版本（查看 Quill 版本）要解决这个问题，你需要确保整个项目只使用一个版本的 Quill。
【避坑指南】vue3使用富文本编辑器vueQuillEditor
weixin_43951592的博客
11-24 2826
vue3富文本
如何在html中使用Vue3
半月的博客
10-18 6132
作为一名后端人员，有时候会写一点前端代码配合使用。 但比较轻量，没有必要使用脚手架创建工程，故此我在html中使用就好了。 正如那句话，适合自己的才是最好的。
html页面使用vue3+element-plus
zcylyzhi4的博客
06-29 5336
本博客文章介绍了，如何在html中引入并使用vue3+element-plus
Vue3使用富文本编辑器QuillEditor
coderxsj
04-09 1万+
vue-quill-editor似乎对于vue3没有较好支持，或者是我水平太差不会用。这里推荐使用vue-quill。官网地址https://vueup.github.io/vue-quill/guide/usage.html#in-single-file-component 1、安装。在控制面板中查找依赖，@vueup/vue-quill进行安装，即下图中的第2个。或者使用命令行进行安装 npm install @vueup/vue-quill@alpha --save 2.配置。在mai...
vue quill editor 使用富文本添加上传音频功能
10-15
const quill = this.$refs.quillEditor.quill; const range = quill.getSelection(true); quill.insertEmbed(range.index, 'audio', audioUrl); quill.setSelection(range.index + 1); } ``` 以上就是使用vue-...
vue-quill-editor.7z
08-06
Vue Quill Editor是一款基于Vue.js的富文本编辑器组件，它是Quill编辑器的一个封装，提供了与Quill原生编辑器类似的使用体验，同时能够很好地融入Vue应用的生命周期。Quill是一个强大的开源富文本编辑器，它具有良好...
vue-quill-editor的样式问题
weixin_48371382的博客
03-31 503
编辑好文章之后再展示出来发现之前编辑的样式并没有生效，这个时候需要在渲染内容的盒子里面添加类名才会生效 <div class="ql-container ql-snow"> <div class="ql-editor" v-html="list.content"> </div> 而且需要保证有引入css的样式 在main.js或者是在其他组件js中然后引到main.js 或者在页面里引入 import 'quill/dist/quill.snow.css'
基于vue的vue-quill-editor富文本编辑器使用方法
全易
06-26 1397
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。
vue-quill:Vue 3组件的笔管编辑器
03-21
VueQuill 强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件，此软件包是Quill的一个薄包装，使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建：比以前更强大，更高效的框架。 :male_sign:‍:male_sign:完全打字稿： VueQuill源代码完全用打字稿编写。 :hammer_and_wrench:易于使用：通过一个简单的API即可直接实现。 演示版 。 文献资料 贡献 拉请求是受欢迎的。对于重大更改，请首先针对您要更改的内容进行。 鹅毛笔 执照
vue 使用quill富文本编辑 增加表格功能
2号自信的博客
11-06 1万+
先看结果： 必要条件： 1.需要quill版本为2.0的开发版（发布正式版只有1.0的） 使用npm view quill查看版本，最新的dev版本为dev.4，官方文档好像是说按得dev.3 我直接按的dev.4：npm install quill@2.0.0-dev.4 --save 2.准备图标 参考文章：quill-editor 2.0 集成 vue - 简书 默认的只有一个图标...
quillEditor vue3 富文本编辑器
好川的博客
03-08 7105
quillEditor 毫无疑问一款非常强大的 富文本编辑器在vue中一个也非常好用 ，而且也十分轻量的；
文本，Vue3使用quillEditor vue3 富文本编辑器,参考博主野生切图仔，全局样式写法，添加组件的写法
weixin_54048131的博客
03-12 1209
content 内容也就是这个超文本 => 返回的为 很长的 string 字符串 (HTML 文本)；content-type 设置保存的文本类型 ，html => 已超文本的形式保存；引入的图片，图片也是 Base64 显示，所以保存 一个字符串 就是 一篇富文本；后端保存这个字符串， 用的时候，把这个字符串 返回来 内容就渲染啦；这里有加粗，斜体，文本方向的插件。
vue3使用quill富文本编辑器，保姆级教程，富文本踩坑解决
热门推荐
moanuan的博客
12-08 2万+
vue3富文本编辑器踩坑，quill,quilleditor,QuillEditor,保姆级教程
【html页面引入vue3语法模板】在html页面中使用vue3语法和elementul-plus组件库的简单模板
seeeeeeeeeee的博客
07-12 3138
这是最近在看这些东西，因为看别的地方是用脚手架直接用的。我这个项目想要在html上直接使用。所以我就试了下如何在html上使用vue3语法目前摸索出来的是这样可以使用。记录下来供参考，如果有不好的地方后续改进。
Vue-cli3整合Quill富文本编辑器
一掬净土
10-24 7300
一、背景 我们在开发后台管理系统的时候，通常会用到富文本，比如公告啦，新闻啦，各种图文详情啊等。其实vue能整合的富文本有很多，最好的应该是tinymce这款，但是这款在我们使用过程中，发现一个问题就是：同一个页面多个使用的时候，会有回显不正常的问题，图层错乱的问题，具体项目具体可能问题不一样。但是遇到了就记录在这里。所以我们之后就换了一个新的quill editor,感觉还不错，解决了上述问题：...
2024年最全quillEditor vue3 富文本编辑器_vue3 vue-quill-editor，前端开发五年
2401_84447417的博客
05-07 3123
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
vue3 引用quilleditor
09-17
要在Vue3中使用Quill富文本编辑器，可以选择安装其在Vue2之上的封装vue-quill-editor。首先，在命令行中使用以下命令创建一个新的Vue3项目： ``` vue create vue3-quill-demo ``` 接下来，在项目的根目录下进入命令行，使用以下命令安装vue-quill-editor： ``` npm install vue-quill-editor ``` 安装完成后，你可以在Vue组件中引入并使用vue-quill-editor。例如，你可以在`App.vue`文件中添加以下内容： ```vue <template> <div> <vue-quill-editor></vue-quill-editor> </div> </template> <script> import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.snow.css' export default { components: { VueQuillEditor } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值