You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.2 KiB
119 lines
3.2 KiB
3 years ago
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<div class='toolbar' @tap="format">
|
||
|
|
<div :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></div>
|
||
|
|
<div :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></div>
|
||
|
|
<div :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></div>
|
||
|
|
<div :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></div>
|
||
|
|
<div :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
|
||
|
|
data-value="left"></div>
|
||
|
|
<div :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
|
||
|
|
data-value="center"></div>
|
||
|
|
|
||
|
|
<div class="iconfont icon-fengexian" @tap="insertdivider"></div>
|
||
|
|
<div class="iconfont icon-charutupian" @tap="insertimage"></div>
|
||
|
|
</div>
|
||
|
|
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="oneditorready" @statuschange="onstatuschange"></editor>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
placeholder: '开始输入...'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//撤销、重做这些不需要可以不写
|
||
|
|
undo() {
|
||
|
|
this.editorCtx.undo()
|
||
|
|
},
|
||
|
|
|
||
|
|
redo() {
|
||
|
|
this.editorCtx.redo()
|
||
|
|
},
|
||
|
|
|
||
|
|
format(e) {
|
||
|
|
let {
|
||
|
|
name,
|
||
|
|
value
|
||
|
|
} = e.target.dataset
|
||
|
|
if (!name) return
|
||
|
|
// console.log('format', name, value)
|
||
|
|
this.editorCtx.format(name, value)
|
||
|
|
},
|
||
|
|
|
||
|
|
oneditorready() {
|
||
|
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
||
|
|
this.editorCtx = res.context
|
||
|
|
}).exec()
|
||
|
|
},
|
||
|
|
|
||
|
|
insertImage() {
|
||
|
|
var that = this;
|
||
|
|
uni.chooseImage({
|
||
|
|
sizeType: ['original', 'compressed'],
|
||
|
|
sourceType: ['album', 'camera'],
|
||
|
|
success(res) {
|
||
|
|
console.log(res.tempFilePaths[0])
|
||
|
|
uni.uploadFile({
|
||
|
|
url: 'http://0.0.0.0/file/upload-img', //域名+上传文件的请求接口 (根据你实际的接口来)
|
||
|
|
filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径
|
||
|
|
name: 'img', //上传到服务器的参数，自定义
|
||
|
|
header: {
|
||
|
|
"Content-Type": "multipart/form-data"
|
||
|
|
},
|
||
|
|
success(res) {
|
||
|
|
var data = JSON.parse(res.data)
|
||
|
|
that.editorCtx.insertImage({
|
||
|
|
width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
|
||
|
|
height: 'auto',
|
||
|
|
src: data.url, //服务端返回的url
|
||
|
|
alt: '图像',
|
||
|
|
success: function() {
|
||
|
|
console.log('insert image success')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log(that.editorCtx)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.ql-container {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 12px 15px;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 30vh;
|
||
|
|
height: auto;
|
||
|
|
background: #fff;
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-active {
|
||
|
|
color: #06c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconfont {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 8px 8px;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar {
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-bottom: 0;
|
||
|
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||
|
|
}
|
||
|
|
</style>
|