网站空间在哪买好,专门做推荐的网站,上海建网站公司,在什么网站做外贸前言#xff1a; 整理下常用的富文本编辑器工具。 vue3:
实现效果#xff1a; 实现步骤#xff1a;
1、安装插件#xff0c; 编辑器核心插件 vueup/vue-quill yarn add pnpm i npm i cnpm i vueup/vue-quill vueup/vue-quill
2、安装选择性插件 整理下常用的富文本编辑器工具。 vue3:
实现效果 实现步骤
1、安装插件 编辑器核心插件 vueup/vue-quill yarn add pnpm i npm i cnpm i vueup/vue-quill vueup/vue-quill
2、安装选择性插件 缩放图片插件
quill-blot-formatter
3、新建组件
1引入基础编辑器插件
// 引入富文本编辑器与样式
import { Quill, QuillEditor } from vueup/vue-quill
import vueup/vue-quill/dist/vue-quill.snow.css
2引入图片缩放插件
// 引入缩放图片的插件
import BlotFormatter from quill-blot-formatter
Quill.register(modules/blotFormatter, BlotFormatter)
3编辑器的配置 4增加一个划过头部的提示效果 5增加一个复制粘贴的效果 customEditor.vue 源码
templatediv classeditor
!-- 这两个都是获取值的必要条件 v-model:content contentTypehtml --quill-editorrefeditorRefv-model:contentcontent:optionsoptionscontentTypehtml/quill-editor/div
/templatescript setup langts
// 引入富文本编辑器与样式
import { Quill, QuillEditor } from vueup/vue-quill
import vueup/vue-quill/dist/vue-quill.snow.css// 引入缩放图片的插件
import BlotFormatter from quill-blot-formatter
Quill.register(modules/blotFormatter, BlotFormatter)const content ref()
const editorRef ref(null)
// 富文本配置
const options ref({theme: snow, // 使用snow主题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, // 点击图片触发事件},},// 图片缩放blotFormatter: {// 可以在这里设置缩放样式// overlay: {// style: {// border: 2px solid red,// }// },toolbar: {mainClassName: blot-formatter__toolbar}}}
})
// 如果方法报错把imageHandler 方法放到options的上面
// 处理富文本图片上传
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 {/*** todo 可以选中图片然后把file文件给后端后端给存到文件服务器然后返回一个线上地址* 这里的abc替换成你的请求接口方法,也可以使用 axios 发送 POST 请求* */// todo// 使用 axios 发送 POST 请求将文件上传到服务器,这里的abc替换成你的请求接口方法// 可以选中图片然后把file文件给后端后端给存到文件服务器然后返回一个线上地址const res await abc(formData);// 确保获取到 Quill 编辑器实例const quill toRaw(editorRef.value).getQuill()if (quill) {// 获取当前光标位置const range quill.getSelection(true);// 在当前光标位置插入上传的图片quill.insertEmbed(range.index, image, res.data);}} catch (error) {alert(图片上传失败)}}};
}// 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[valueordered], title: 编号列表 },{ Choice: .ql-list[valuebullet], title: 项目列表 },{ Choice: .ql-direction, title: 文本方向 },{ Choice: .ql-header[value1], title: h1 },{ Choice: .ql-header[value2], 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[valuesub], title: 下标 },{ Choice: .ql-script[valuesuper], title: 上标 },{ Choice: .ql-indent[value-1], title: 向左缩进 },{ Choice: .ql-indent[value1], title: 向右缩进 },{ Choice: .ql-header .ql-picker-label, title: 标题大小 },{ Choice: .ql-header .ql-picker-item[data-value1], title: 标题一 },{ Choice: .ql-header .ql-picker-item[data-value2], title: 标题二 },{ Choice: .ql-header .ql-picker-item[data-value3], title: 标题三 },{ Choice: .ql-header .ql-picker-item[data-value4], title: 标题四 },{ Choice: .ql-header .ql-picker-item[data-value5], title: 标题五 },{ Choice: .ql-header .ql-picker-item[data-value6], title: 标题六 },{ Choice: .ql-header .ql-picker-item:last-child, title: 标准 },{ Choice: .ql-size .ql-picker-item[data-valuesmall], title: 小号 },{ Choice: .ql-size .ql-picker-item[data-valuelarge], title: 大号 },{ Choice: .ql-size .ql-picker-item[data-valuehuge], 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-valuecenter], title: 居中对齐 },{ Choice: .ql-align .ql-picker-item[data-valueright], title: 居右对齐 },{ Choice: .ql-align .ql-picker-item[data-valuejustify], title: 两端对齐 }
]
// 给富文本框工具栏加上鼠标悬浮中文提示
const initTitle () {for (let item of titleConfig) {// .editor 是富文本编辑器的类名let tip document.querySelector(.editor item.Choice);if (tip) {tip.setAttribute(title, item.title);}}
}// 自定义粘贴事件
const customPaste(e){// 获取当前最新时间 改名啥的可以用let newTime new Date().getTime()const clipboardData e.clipboardData // 粘贴信息const types clipboardData.types // 当前文件类型if (types.includes(Files)) {e.preventDefault();e.clipboardData.files.forEach(file{// 在这里可以拿到粘贴后的图片与文件信息// 在这里做操作})}
}onMounted((){nextTick((){// 给富文本框工具栏加上鼠标悬浮中文提示initTitle()})// 给富文本增加粘贴事件editorRef.value.getQuill().root.addEventListener(customPaste, customPaste, false)
})/scriptstyle scoped langscss
.editor{width: 100%;:deep(.ql-editor) {min-height: 200px;}
}/stylevue2
实现步骤
1、安装插件
基础编辑器插件
npm install vue-quill-editor --save
进阶图片版本插件拖拽缩放图片
npm install quill-image-drop-module -S //允许粘贴图像并将其拖放到编辑器中。
npm install quill-image-resize-module -S //允许调整图像大小
2、界面中使用
1全局引入插件main.js中
import VueQuillEditor from vue-quill-editor
// 引入相关css
import quill/dist/quill.core.css
import quill/dist/quill.snow.css
import quill/dist/quill.bubble.cssVue.use(VueQuillEditor)
2局部引入插件直接在你自己封装的vue组件内部加
import quill/dist/quill.core.css
import quill/dist/quill.snow.css
import quill/dist/quill.bubble.cssimport { quillEditor, Quill } from vue-quill-editor //引入插件export default {components: {quillEditor}}
3如果装了图片拖拽以后的引入
vue.config.js 中
chainWebpack: (config) {config.plugin(provide).use(webpack.ProvidePlugin,[{window.Quill: quill/dist/quill.js,Quill: quill/dist/quill.js}])
}
组件内部引入、全局就main.js中引入
import quill/dist/quill.core.css
import quill/dist/quill.snow.css
import quill/dist/quill.bubble.css
import { quillEditor, Quill } from vue-quill-editor// 新增部分
import imageResize from quill-image-resize-module
Quill.register(modules/imageResize, imageResize )
import { ImageDrop } from quill-image-drop-module
Quill.register(modules/imageDrop, ImageDrop)4具体使用
html部分引入插件后注册后直接用以子组件的形式v-model 监听就跟正常的一样 js部分 注意如果不需要图片拖拽就不用看第三步把配置的直接删除就行了 customEditor.vue 源码
templatediv classeditorquill-editorclassql-editorv-modelcontentrefmyQuillEditor:optionseditorOptionbluronEditorBlur($event)focusonEditorFocus($event)changeonEditorChange($event)/quill-editor/div
/templatescript
import quill/dist/quill.core.css
import quill/dist/quill.snow.css
import quill/dist/quill.bubble.css
import { quillEditor, Quill } from vue-quill-editor// 如果要图片拖拽功能增加这两个插件
import imageResize from quill-image-resize-module
Quill.register(modules/imageResize, imageResize )
import { ImageDrop } from quill-image-drop-module
Quill.register(modules/imageDrop, ImageDrop)export default {name: customEditor,components: {quillEditor},data(){return{content:,// 富文本功能配置editorOption:{modules:{// 如果想增加事件控制比如图片的事件参考我上面vue3的配置是一样的用法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: [small, false, large, huge] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题[{ color: [] }, { background: [] }], // 字体颜色字体背景颜色[{ font: [] }], //字体[{ align: [] }], //对齐方式[clean], //清除字体样式[image,video] //上传图片、上传视频]},// 如果要图片拖拽功能增加下面内容配置imageDrop: true, // 拖动加载图片组件。imageResize: { //调整大小组件。displayStyles: {backgroundColor: black,border: none,color: white},modules: [ Resize, DisplaySize, Toolbar ]}},}},methods:{// 失去焦点事件onEditorBlur(e){console.log(e, 失去焦点事件);},// 获得焦点事件onEditorFocus(e){console.log(e, 获得焦点事件);},// 内容改变事件// html是带标签text是纯文本onEditorChange({ quill, html, text }){this.content html},},mounted() {this.content h1我是个默认测试数据/h1}
}
/scriptstyle scoped langscss
.editor{width: 100%;:deep(.ql-editor) {min-height: 200px;}
}/style目前好用的其他工具
monaco-editor 能实现跟vscode编辑器一样的在线编辑代码效果还能代码比较
官网api地址点我
其他资料地址
Monaco-Editor在Vue中使用(实现代码编辑与diff代码比较)--类似vscode代码编辑器_monaco editor vue-CSDN博客文章浏览阅读1.3k次点赞5次收藏13次。Monaco-Editor 是一个由 Microsoft 开发的 Web 代码编辑器它是 Visual Studio Code 的浏览器版本。在 Vue 项目中集成 Monaco-Editor 可以提供代码编辑、语法高亮、智能提示等功能。src/codeEditorMonaco.vue或者把以下代码放到app.vue文件中1、安装使用最好安装指定版本我是 vue2 安装的版本。2、配置vue.config.js。_monaco editor vuehttps://blog.csdn.net/weixin_44834981/article/details/139239575
参考文献
在Vue项目中vue-quill-editor的安装与使用【详细图解过程包含图片的缩放拖拽】-CSDN博客
