vue中的富文本框的使用（vue-quill-editor）

一、安装 vue-quill-editor

npm install vue-quill-editor

二、在main.js中引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);

三、在模块中引用

<template><div class="boxs"><el-uploadclass="avatar-uploader"name="file"action="":show-file-list="false":data="uploadData":http-request="uploadHttpRequest"></el-upload><quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor><!-- 富文本内容 --><button v-on:click="saveHtml">保存</button></div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
// 工具栏配置
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"], // 链接、图片、视频
];
export default {data() {return {uploadData: {}, // 图片文件content: "", // 内容content: null,editorOption: {placeholder: "请输入文章内容",modules: {toolbar: {container: toolbarOptions,handlers: {image: function (value) {if (value) {// 触发input框选择图片文件document.querySelector(".avatar-uploader input").click();} else {this.quill.format("image", false);}},},},},},};},methods: {saveHtml(event) {//点击保存按钮console.log("this.content", this.content);},uploadHttpRequest(param) {console.log(param.file); //发送请求，获取到图片的地址let quill = this.$refs.myQuillEditor.quill; // // 获取光标所在位置let length = quill.getSelection().index; //插入图片  后面为服务器返回的图片地址quill.insertEmbed(length,"image","https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");quill.setSelection(length + 1); 调整光标到最后},},
};
</script>
<style >
.boxs {line-height: normal !important;height: 500px;width: 700px;margin: 20px auto;
}
</style>

vue中的富文本框的使用（vue-quill-editor）相关推荐

vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
winForm中RichTextBox富文本框的使用
创建一个RichTextBox控件属性 a. 行为-EnableAutoDragDrop:True 允许拖拽打开文件先添加一个button按钮,注册单击事件表示打开某个文件 private vo ...
Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件先安装一下: npm i vue-quill-editor -s 下载之后去components文件夹中新建一个文件夹 KEditor,然 ...
Vue中TipTap富文本编辑器的输入框内部分样式无法显示
在这个问题上卡了好几天,后来才发现是scoped的问题.在自己写的样式上加上scoped,Tiptap编辑器的输入框样式放在另外一个<style>里,不加scoped就行了如下图,上面的 ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
vue 使用quill-editor富文本编辑框
1.安装插件 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-edito ...
若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
若依框架图片上传、富文本框编辑器功能
文章目录一.前言二.效果三.编码过程 1.前端: index.vue projectShow.js 富文本框: Editor/index.vue 图片上传:ImgUploadCropper/in ...

vue中的富文本框的使用（vue-quill-editor）

一、安装 vue-quill-editor

二、在main.js中引入

三、在模块中引用

vue中的富文本框的使用（vue-quill-editor）相关推荐

最新文章

热门文章