做网站语言排名2018,在线设计logo软件,中国建设工程项目网,深圳市南山区住房和建设局网站官网首先我使用的富文本编辑器是vue-quill-editor 使用npm进行下载
npm install vue-quill-editor --save当然也可以按照官方的方法下载#xff0c;到官方 因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版#xff0c;当然使用其他组件库也可以 然后还有重要的一…首先我使用的富文本编辑器是vue-quill-editor 使用npm进行下载
npm install vue-quill-editor --save当然也可以按照官方的方法下载到官方 因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版当然使用其他组件库也可以 然后还有重要的一步需要引入jquery后面有地方需要用到 使用npm进行下载jquery
npm install jquery --save;下面直接上代码
templatedivquill-editor refmyQuillEditor v-modelcontent :optionseditorOption /a-upload list-typepicture-card classquill-upload :show-upload-listfalse :multipletrue v-showfalse:dataheaderdata actionhttps://upload-cn-east-2.qiniup.com :before-uploadbeforeUploadloginchangehandleChangeloginbig :on-successquillSuccessi classel-icon-upload/i/a-upload/div
/templatescriptconst toolbarOptions [[bold, italic, underline, strike], // toggled buttons[blockquote, code-block],[{header: 1}, {header: 2}], // custom button values[{list: ordered}, {list: bullet}],[{script: sub}, {script: super}], // superscript/subscript[{indent: -1}, {indent: 1}], // outdent/indent[{direction: rtl}], // text direction[{size: [small, false, large, huge]}], // custom dropdown[{header: [1, 2, 3, 4, 5, 6, false]}],[{color: []}, {background: []}], // dropdown with defaults from theme[{font: []}],[{align: []}],[link, image, video],[clean] // remove formatting button];import API from /Api/index.js;import UNITY from /commont/user.js;export default {data() {return {content: ,headerdata: {token: ,key: ,},loginimageUrlbig: [],URL: ,cyloginimageUrlbig: [],editorOption: {modules: {toolbar: {container: toolbarOptions,handlers: {// 重写点击组件上的图片按钮要执行的代码这里用到了jqueryimage: (value) {document.querySelector(.quill-upload .el-icon-upload).click()}}}}},cyput: 0}},created() {},methods: {async beforeUploadlogin(file) {this.cyputlet that this;let time new Date().getTime();time time that.cyput//这边是封装的接口await API.UPLOADUPLOADTOKEN().then(res {that.headerdata.token res.data.data.token;that.headerdata.key permanent/head/ time .png;that.URL UNITY.getSession(qiniu_cdnurl);})const sizeOk file.size 1024 * 1000;if (!sizeOk) {this.$message.error(照片大小超过100K);return}},handleChangeloginbig(info) {if (info.file.status done) {if (this.loginimageUrlbig.length 9) {if (this.loginimageUrlbig[0] ! ) {this.loginimageUrlbig.unshift()}} else {this.loginimageUrlbig.shift()}let loCbig this.URL / info.file.response.key;this.loginimageUrlbig.push(loCbig)if (loCbig) {// 获取文本编辑器let quill this.$refs.myQuillEditor.quill// 获取光标位置let pos quill.getSelection().index// 插入图片到光标位置quill.insertEmbed(pos, image, loCbig)} else {this.$essage.error(图片插入失败)}}},}}
/scriptstyle scoped/style
