devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue-quill-editor 实现上传图片 视频 图片拖拽 文本对齐等功能_quill 如何让文本和图片放在同一行

作者：花生_TL007 | 2024-02-16 05:50:06

赞

踩

quill 如何让文本和图片放在同一行

1. 需要安装的插件

npm install quill  vue-quill-editor  quill-image-drop-module quill-image-resize-module -s

 

 

实现的源码在下面，可直接封装成组件使用

  1. <template>
  2.     <div class="ql-container">
  3.         <quill-editor
  4.             v-model="content"
  5.             ref="myquillEditor"
  6.             :options="editorOption"
  7.         ></quill-editor>
  8.         <input
  9.             id="uploadImg"
  10.             type="file"
  11.             style="display:none"
  12.             accept="image/png, image/jpeg, image/gif"
  13.             @change="uploadImage"
  14.         />
  15.         <input
  16.             id="uploadVideo"
  17.             type="file"
  18.             style="display:none"
  19.             accept="video/*"
  20.             @change="uploadVideo"
  21.         />
  22.     </div>
  23. </template>
  24. <script>
  25. import "quill/dist/quill.core.css";
  26. import "quill/dist/quill.snow.css";
  27. import "quill/dist/quill.bubble.css";
  28. import Vue from "vue";
  29. import * as quill from "quill"; //引入编辑器
  30. import VueQuillEditor from "vue-quill-editor";
  31. import { ImageDrop } from "quill-image-drop-module";
  32. import ImageResize from "quill-image-resize-module";
  33.  
  34. Vue.use(VueQuillEditor /* { default global options } */);
  35.  
  36. quill.register("modules/imageDrop", ImageDrop);
  37. quill.register("modules/imageResize", ImageResize);
  38.  
  39. const BlockEmbed = quill.import("blots/block/embed");
  40. // 处理视频显示，video兼容小程序中显示
  41. class VideoBlot extends BlockEmbed {
  42.     static create(value) {
  43.         let node = super.create();
  44.         node.setAttribute("src", value.url);
  45.         node.setAttribute("controls", value.controls);
  46.         node.setAttribute("width", value.width);
  47.         node.setAttribute("height", value.height);
  48.         node.setAttribute("webkit-playsinline", true);
  49.         node.setAttribute("playsinline", true);
  50.         node.setAttribute("x5-playsinline", true);
  51.         return node;
  52.     }
  53.  
  54.     static value(node) {
  55.         return {
  56.             url: node.getAttribute("src"),
  57.             controls: node.getAttribute("controls"),
  58.             width: node.getAttribute("width"),
  59.             height: node.getAttribute("height")
  60.         };
  61.     }
  62. }
  63. VideoBlot.blotName = "simpleVideo";
  64. VideoBlot.tagName = "video";
  65. quill.register(VideoBlot);
  66.  
  67. //quill编辑器的字体
  68. let fonts = [
  69.     "SimSun",
  70.     "SimHei",
  71.     "Microsoft-YaHei",
  72.     "KaiTi",
  73.     "FangSong",
  74.     "Arial",
  75.     "sans-serif"
  76. ];
  77.  
  78. let Font = quill.import("formats/font");
  79. Font.whitelist = fonts; //将字体加入到白名单
  80. quill.register(Font, true);
  81. // let fontSizeStyle = quill.import('attributors/style/size');
  82. // fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];
  83.  
  84. //处理文本对齐
  85. let Align = quill.import("attributors/style/align");
  86. let aligns = [false, "right", "center", "justify"];
  87. Align.whitelist = aligns;
  88. quill.register(Align, true);
  89.  
  90. export default {
  91.     data() {
  92.         return {
  93.             content: "",
  94.             editorOption: {
  95.                 modules: {
  96.                     toolbar: [
  97.                         ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  98.                         // [{ font: [] }], // 字体种类
  99.                         [{ font: fonts }],
  100.                         [{ align: aligns }], // 对齐方式
  101.                         [{ size: ["small", false, "large", "huge"] }], // 字体大小
  102.                         // [{ 'size': fontSizeStyle.whitelist }],
  103.                         [{ header: 1 }, { header: 2 }], // 1、2 级标题
  104.                         [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  105.                         ["blockquote", "code-block"], // 引用  代码块
  106.                         // [{ script: "sub" }, { script: "super" }], // 上标/下标
  107.                         // [{ indent: "-1" }, { indent: "+1" }], // 缩进
  108.                         // [{'direction': 'rtl'}],                         // 文本方向
  109.                         // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  110.                         [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  111.                         // ["clean"], // 清除文本格式
  112.                         ["image", "video"]
  113.                         // ["link", "image", "video"] // 链接、图片、视频
  114.                     ],
  115.                     
  116.                     //实现拖拽，缩放的重要代码片段
  117.                     history: {
  118.                         delay: 1000,
  119.                         maxStack: 50,
  120.                         userOnly: false
  121.                     },
  122.                     imageDrop: true,
  123.                     imageResize: {
  124.                         displayStyles: {
  125.                             backgroundColor: "black",
  126.                             border: "none",
  127.                             color: "white"
  128.                         },
  129.                         modules: ["Resize", "DisplaySize", "Toolbar"]
  130.                     }
  131.                 },
  132.                 placeholder: "请填写..."
  133.             }
  134.         };
  135.     },
  136.     props: ["editorContent", "status"],
  137.     mounted() {
  138.         this.$refs.myquillEditor.quill.enable(this.status);
  139.         this.$refs.myquillEditor.quill
  140.             .getModule("toolbar")
  141.             .addHandler("image", this.uploadImageHandler);
  142.  
  143.         this.$refs.myquillEditor.quill
  144.             .getModule("toolbar")
  145.             .addHandler("video", this.uploadVideoHandler);
  146.     },
  147.     methods: {
  148.         uploadImageHandler() {
  149.             const input = document.querySelector("#uploadImg");
  150.             input.value = "";
  151.             input.click();
  152.         },
  153.         uploadImage(event) {
  154.             const form = new FormData();
  155.             form.append("data", event.target.files[0]);
  156.             this.$api.upload.uploadImg(form).then(res => {
  157.                 const addImageRange = this.$refs.myquillEditor.quill.getSelection();
  158.                 const newRange =
  159.                     0 + (addImageRange !== null ? addImageRange.index : 0);
  160.                 this.$refs.myquillEditor.quill.insertEmbed(
  161.                     newRange,
  162.                     "image",
  163.                     res.data.data
  164.                 );
  165.                 this.$refs.myquillEditor.quill.setSelection(1 + newRange);
  166.             });
  167.         },
  168.         uploadVideoHandler() {
  169.             const input = document.querySelector("#uploadVideo");
  170.             input.value = "";
  171.             input.click();
  172.         },
  173.         uploadVideo(event) {
  174.             const form = new FormData();
  175.             form.append("data", event.target.files[0]);
  176.             this.$api.upload.uploadVideo(form).then(res => {
  177.                 const addImageRange = this.$refs.myquillEditor.quill.getSelection();
  178.                 const newRange =
  179.                     0 + (addImageRange !== null ? addImageRange.index : 0);
  180.                 this.$refs.myquillEditor.quill.insertEmbed(
  181.                     newRange,
  182.                     "simpleVideo",
  183.                     {
  184.                         url: res.data.data,
  185.                         controls: "controls",
  186.                         width: "100%",
  187.                         height: "100%"
  188.                     }
  189.                 );
  190.                 this.$refs.myquillEditor.quill.setSelection(1 + newRange);
  191.             });
  192.         }
  193.     },
  194.     watch: {
  195.         editorContent: {
  196.             handler: function(o, n) {
  197.                 this.content = this.editorContent;
  198.             },
  199.             immediate: true
  200.         },
  201.         // 控制编辑是否可输入
  202.         status() {
  203.             this.$refs.myquillEditor.quill.enable(this.status);
  204.         }
  205.     }
  206. };
  207. </script>
  208. <style lang="less" scoped>
  209. /deep/.ql-container {
  210.     min-height: 200px;
  211.     font-size: 13px;
  212. }
  213. /deep/.ql-toolbar.ql-snow .ql-picker-label {
  214.     display: flex;
  215. }
  216. /deep/.ql-snow .ql-picker.ql-align {
  217.     width: 80px;
  218.     svg {
  219.         padding: 0 5px;
  220.         width: 28px;
  221.         height: 18px;
  222.     }
  223. }
  224. /deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
  225. /deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  226.     content: "宋体";
  227.     font-family: "SimSun";
  228. }
  229. /deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
  230. /deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  231.     content: "黑体";
  232.     font-family: "SimHei";
  233. }
  234. /deep/.ql-snow
  235.     .ql-picker.ql-font
  236.     .ql-picker-label[data-value="Microsoft-YaHei"]::before,
  237. /deep/.ql-snow
  238.     .ql-picker.ql-font
  239.     .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  240.     content: "微软雅黑";
  241.     font-family: "Microsoft YaHei";
  242. }
  243. /deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
  244. /deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  245.     content: "楷体";
  246.     font-family: "KaiTi";
  247. }
  248. /deep/.ql-snow
  249.     .ql-picker.ql-font
  250.     .ql-picker-label[data-value="FangSong"]::before,
  251. /deep/.ql-snow
  252.     .ql-picker.ql-font
  253.     .ql-picker-item[data-value="FangSong"]::before {
  254.     content: "仿宋";
  255.     font-family: "FangSong";
  256. }
  257. /deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
  258. /deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  259.     content: "Arial";
  260.     font-family: "Arial";
  261. }
  262. /deep/.ql-snow
  263.     .ql-picker.ql-font
  264.     .ql-picker-label[data-value="Times-New-Roman"]::before,
  265. /deep/.ql-snow
  266.     .ql-picker.ql-font
  267.     .ql-picker-item[data-value="Times-New-Roman"]::before {
  268.     content: "Times New Roman";
  269.     font-family: "Times New Roman";
  270. }
  271. /deep/.ql-snow
  272.     .ql-picker.ql-font
  273.     .ql-picker-label[data-value="sans-serif"]::before,
  274. /deep/.ql-snow
  275.     .ql-picker.ql-font
  276.     .ql-picker-item[data-value="sans-serif"]::before {
  277.     content: "sans-serif";
  278.     font-family: "sans-serif";
  279. }
  280.  
  281. /deep/.ql-font-SimSun {
  282.     font-family: "SimSun";
  283. }
  284. /deep/.ql-font-SimHei {
  285.     font-family: "SimHei";
  286. }
  287. /deep/.ql-font-Microsoft-YaHei {
  288.     font-family: "Microsoft YaHei";
  289. }
  290. /deep/.ql-font-KaiTi {
  291.     font-family: "KaiTi";
  292. }
  293. /deep/.ql-font-FangSong {
  294.     font-family: "FangSong";
  295. }
  296. /deep/.ql-font-Arial {
  297.     font-family: "Arial";
  298. }
  299. /deep/.ql-font-Times-New-Roman {
  300.     font-family: "Times New Roman";
  301. }
  302. /deep/.ql-font-sans-serif {
  303.     font-family: "sans-serif";
  304. }
  305.  
  306. /deep/.ql-snow .ql-picker.ql-size .ql-picker-label::before,
  307. /deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  308.     content: "14px";
  309. }
  310. /deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  311. /deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  312.     content: "10px";
  313. }
  314. /deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  315. /deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  316.     content: "18px";
  317. }
  318. /deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  319. /deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  320.     content: "32px";
  321. }
  322.  
  323. /deep/.ql-snow .ql-picker.ql-align .ql-picker-label::before,
  324. /deep/.ql-snow .ql-picker.ql-align .ql-picker-item::before {
  325.     content: "left";
  326.     text-align: left;
  327. }
  328.  
  329. /deep/.ql-snow
  330.     .ql-picker.ql-align
  331.     .ql-picker-label[data-value="center"]::before,
  332. /deep/.ql-snow
  333.     .ql-picker.ql-align
  334.     .ql-picker-item[data-value="center"]::before {
  335.     content: "center";
  336.     text-align: center;
  337. }
  338.  
  339. /deep/.ql-snow .ql-picker.ql-align .ql-picker-label[data-value="right"]::before,
  340. /deep/.ql-snow .ql-picker.ql-align .ql-picker-item[data-value="right"]::before {
  341.     content: "right";
  342.     text-align: right;
  343. }
  344.  
  345. /deep/.ql-snow
  346.     .ql-picker.ql-align
  347.     .ql-picker-label[data-value="justify"]::before,
  348. /deep/.ql-snow
  349.     .ql-picker.ql-align
  350.     .ql-picker-item[data-value="justify"]::before {
  351.     content: "justify";
  352.     text-align: justify;
  353. }
  354. </style>

此段代码可直接封装成组件

父组件引用富文本组件参考代码：

<editor ref="myEditor" :editorContent="editorContent" :status="editorStatus"></editor>

父组件中获取富文本的值 参考代码：  this.editorContent = this.$refs.myEditor.content;

备注： 代码中监听status 是用来控制编辑器是否可读， 监听editorContent 是用来回显文本内容

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/91202
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号