uni-app使用 editor 富文字
阿新 • • 發佈:2021-01-29
<template>
<view
class="editor-container flex"
:class="[position === 'top' ? 'flex-direction' : 'flex-reverse']"
>
<view class="toolbar" :style="barStyle" @click="format">
<view :class ="formats.bold ? 'text-blue' : ''" class="iconfont icon-zitijiacu" data-name="bold">
</view>
<view :class="formats.italic ? 'text-blue' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
<view :class="formats.underline ? 'text-blue' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
<view :class="formats.align === 'left' ? 'text-blue' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value ="left"></view>
<view :class="formats.align === 'center' ? 'text-blue' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
<view :class="formats.align === 'right' ? 'text-blue' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
<view :class="formats.align === 'justify' ? 'text-blue' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
<view class="iconfont icon-ClearFormatting-1" @tap="removeFormat"></view>
<!-- <view :class="formats.backgroundColor === '#00ff00' ? 'text-blue' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view> -->
<view :class="formats.list === 'ordered' ? 'text-blue' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
<view :class="formats.list === 'bullet' ? 'text-blue' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
<view class="iconfont icon-Undo" @tap="undo"></view>
<view class="iconfont icon-Redo" @tap="redo"></view>
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
</view>
<view class="editor-wrapper solid padding-xs" :style="{ 'min-height': minHeight, 'height': height }">
<editor
id="editor"
class="ql-container"
:placeholder="placeholder"
:show-img-size="showImgSize"
:show-img-toolbar="showImgToolBar"
:show-img-resize="showImgResize"
@statuschange="onStatusChange"
@ready="ready"
@input="input"
></editor>
</view>
</view>
</template>
<script>
import { uploadImage } from '@/api/public.js'
export default {
props: {
placeholder: {
type: String,
default: '說點什麼吧...'
},
// 點選圖片時顯示圖片大小控制元件
showImgSize: {
type: Boolean,
default: false
},
// 點選圖片時顯示工具欄控制元件
showImgToolBar: {
type: Boolean,
default: false
},
// 點選圖片時顯示修改尺寸控制元件
showImgResize: {
type: Boolean,
default: false
},
// 工具欄位置 top bottom
position: {
type: String,
default: 'top'
},
minHeight: {
type: String,
default: '400rpx'
},
height: {
type: String,
default: '400rpx'
},
barStyle: {
type: String | Object,
default: 'background-color: #D1F0E6'
},
// 圖片上傳地址
uploadUrl: {
type: String,
default: ''
},
// 是否自動上傳圖片
autoUpload: {
type: Boolean,
default: true
},
// 初始化 HTML
html: {
type: String,
default: ''
}
},
data () {
return {
formats: {},
content: ''
}
},
methods: {
ready () {
uni.createSelectorQuery().in(this).select('#editor').fields({
size: true,
context: true
}, res => {
this.editorCtx = res.context;
this.editorCtx.setContents({
html: this.html
})
})
.exec();
// uni.createSelectorQuery().in(this).select('#editor').context((res) => {
// this.editorCtx = res.context
// this.editorCtx.setContents({
// html: this.html
// })
// }).exec()
},
format (e) {
let {
name,
value
} = e.target.dataset
this.editorCtx.format(name, value)
},
onStatusChange(e) {
const formats = e.detail
this.formats = formats
},
undo() {
this.editorCtx.undo()
},
redo() {
this.editorCtx.redo()
},
removeFormat () {
this.editorCtx.removeFormat()
},
insertDivider() {
this.editorCtx.insertDivider()
},
insertImage() {
uni.chooseImage({
count: 1,
success: (res) => {
this.editorCtx.insertImage({
src: res.tempFilePaths[0],
alt: '圖片',
success: (r) => {
if (!this.autoUpload) return
if (!this.uploadUrl) return
// 自動上傳
this.handleUploadFile(res.tempFilePaths[0])
}
})
}
})
},
// 依次上傳圖片
handleUploadFile(url) {
this.$http
.upload(`${uploadImage}`, { filePath: url, name: 'file' })
.then(res => {
if (res.success) {
let regAll = /<img.*?(?:>|\/>)/g
this.editorCtx.getContents({
success: r => {
// console.log(r);
const group = r.html.match(regAll)
// console.log('group', group);
group.map(item => {
this.content = r.html.replace(item, `<img src="${res.message}" />`)
})
// console.log(this.content);
this.$emit('input', this.content)
}
})
}
})
},
input () {
this.editorCtx.getContents({
success: res => {
this.content = res.html
this.$emit('input', this.content)
}
})
},
}
}
</script>
<style lang="scss">
.editor-container {
width: 100%;
}
.toolbar {
display: flex;
flex-wrap: wrap;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
.iconfont {
display: inline-flex;
align-items: center;
width: 48rpx;
height: 48rpx;
box-sizing: content-box;
padding: 16rpx 16rpx;
font-size: 40rpx;
}
}
.editor-wrapper {
background: #fff;
}
.ql-container {
width: 100%;
min-height: 0;
height: 100%;
}
</style>