【无标题】

<template> <div ref="editor" style="height: 300px;"></div> </template> <script> import Quill from 'quill'; export default { name: 'RichTextEditor', mounted() { this.quill = new Quill(this.$refs.editor, { theme: 'snow', modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ], clipboard: { // 自定义粘贴处理 matchVisual: false, // 监听粘贴事件 onPaste: (e) => { // 阻止默认粘贴行为 e.preventDefault(); // 获取剪贴板数据 const clipboardData = e.clipboardData || window.clipboardData; const items = clipboardData.items; for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") !== -1) { const blob = items[i].getAsFile(); const reader = new FileReader(); reader.onload = (e) => { // 插入图片到编辑器 const range = this.quill.getSelection(); this.quill.insertEmbed(range.index, 'image', e.target.result); }; reader.readAsDataURL(blob); } } } } } }); }, beforeDestroy() { if (this.quill) { this.quill.destroy(); } } }; </script> <style scoped> /* 你可以在这里添加一些样式 */ </style>

 

<template> <div> <rich-text-editor></rich-text-editor> </div> </template> <script> import RichTextEditor from './components/RichTextEditor'; export default { components: { RichTextEditor } }; </script>