vue使用富文本插件

2024-03-30 03:43•css•阅读 3995

在项目中下载安装

npm install vue-quill-editor --save

在项目中引入(我这里是在main.js中全局引用了)

// 引入富文本组件

import QuillEditor from 'vue-quill-editor'

// 引入富文本组件样式

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Vue.use(QuillEditor)

在页面中直接使用

注:因为我是全局引用了,所以页面中直接使用了

<el-form-item

class="form-item-content"

prop="content"

label="公告内容"

:rules="{ required: true, message: '请输入公告内容', trigger: 'blur' }"

<quill-editor ref="myQuillEditor" v-model="form.content" class="editor" :options="editorOption" />

</el-form-item>

富文本工具栏的配置

注:样式别忘了

// 工具栏配置

const toolbarOptions = [

['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'], // 清除文本格式

// ['link', 'image', 'video'] // 链接、图片、视频

['link', 'image', 'video'] // 链接、图片

]

export default {

data() {

return {

editorOption: { // 编辑框操作事件

theme: 'snow', // or 'bubble'

placeholder: '您想发布点什么？',

modules: {

toolbar: {

container: toolbarOptions,

handlers: {

image: function(value) { // 上传图片

if (value) {

document.querySelector('.avatar-uploader-img input').click() // 触发input框选择文件

} else {

this.quill.format('image', false)

}

link: function(value) { // 添加链接

if (value) {

var href = prompt('请输入url')

this.quill.format('link', href)

} else {

this.quill.format('link', false)

}

video: function(value) { // 上传视频

if (value) {

document.querySelector('.avatar-uploader-video input').click() // 触发input框选择文件

} else {

this.quill.format('video', false)

}

</script>

.avatar-uploader-img {

height: 0;

}

.avatar-uploader-video {

height: 0;

}

/deep/ .ql-snow .ql-tooltip[data-mode=link]::before {

content: '请输入链接地址:';

}

/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {

border-right: 0px;

content: '保存';

padding-right: 0px;

}

/deep/ .ql-snow .ql-tooltip[data-mode=video]::before {

content: '请输入视频地址:';

}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {

content: '14px';

}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {

content: '10px';

}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {

content: '18px';

}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {

content: '32px';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {

content: '文本';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {

content: '标题1';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {

content: '标题2';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {

content: '标题3';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {

content: '标题4';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {

content: '标题5';

}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {

content: '标题6';

}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {

content: '标准字体';

}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {

content: '衬线字体';

}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {

content: '等宽字体';

}

</style>

图片和视频的处理

action 中放入你的文件上传地址

<el-upload

class="avatar-uploader-img"

:action="fileUploadApi"

:show-file-list="false"

:headers="headers"

:on-success="uploadImgSuccess"

:before-upload="beforeUploadImg"

:on-error="uploadImgError"

:data="{'pathName':''}"

<el-upload

class="avatar-uploader-video"

:action="fileUploadApi"

:show-file-list="false"

:headers="headers"

:on-success="uploadVideoSuccess"

:before-upload="beforeUploadVideo"

:on-error="uploadVideoError"

:data="{'pathName':''}"

// 富文本图片上传前

beforeUploadImg(file) {

const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'

if (!isJPG) {

this.$message.error('上传图片只能是 JPG，PNG, GIF 格式!')

} else {

// 显示loading动画

this.quillUpdate = true

}

return isJPG

// 富文本视频上传前

beforeUploadVideo(file) {

const isVideo = file.type === 'video/mp4'

if (!isVideo) {

this.$message.error('上传视频只能是 mp4 格式!')

} else {

// 显示loading动画

this.quillUpdate = true

}

return isVideo

// 上传成功

uploadImgSuccess(res, file) {

// res为图片服务器返回的数据

// 获取富文本组件实例

const quill = this.$refs.myQuillEditor.quill

// 如果上传成功

if (res.code == '200' && res.data.url != null) {

// 获取光标所在位置

const length = quill.getSelection().index

// 插入图片 res.info为服务器返回的图片地址

quill.insertEmbed(length, 'image', res.data.url)

// 调整光标到最后

quill.setSelection(length + 1)

} else {

this.$message.error('图片插入失败')

}

// loading动画消失

this.quillUpdate = false

uploadVideoSuccess(res, file) {

// res为图片服务器返回的数据

// 获取富文本组件实例

const quill = this.$refs.myQuillEditor.quill

// 如果上传成功

if (res.code == '200' && res.data.url != null) {

// 获取光标所在位置

const length = quill.getSelection().index

// 插入图片 res.info为服务器返回的图片地址

quill.insertEmbed(length, 'video', res.data.url)

// 调整光标到最后

quill.setSelection(length + 1)

} else {

this.$message.error('视频插入失败')

}

// loading动画消失

this.quillUpdate = false

// 上传失败

uploadImgError() {

// loading动画消失

this.quillUpdate = false

this.$message.error('图片插入失败')

uploadVideoError() {

// loading动画消失

this.quillUpdate = false

this.$message.error('视频插入失败')

原文地址 https://blog.csdn.net/weixin_45461674/article/details/108622389

/ 引入富文本组件import QuillEditor from 'vue-quill-editor'// 引入富文本组件样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'

上一篇 »PHP 富文本解码为 HTML 并显示
下一篇 »[javascript] vue项目cdn模式下使用wangEditor

vue使用富文本插件

相关推荐

php截取富文本框中的固定长度的字符

富文本vue-quill-editor修改图片上传方法

CKEditor富文本编辑器在asp.net mvc3.0的应用及其插件开发+上传

react-quill 富文本编辑器

适用于 Mpvue 的微信小程序富文本解析自定义组件

Vue组件封装之一键复制文本到剪贴板

ASP.NET网站使用Kindeditor富文本编辑器配置步骤

[转]TinyMCE，富文本编辑器在Asp.Net中的使用方法