331 lines
7.6 KiB
Vue
331 lines
7.6 KiB
Vue
<template>
|
|
<view class="container" :style="{height: height}">
|
|
<editor
|
|
ref="editot"
|
|
id="editor"
|
|
class="ql-container"
|
|
:placeholder="placeholder"
|
|
:show-img-size="true"
|
|
:show-img-toolbar="true"
|
|
:show-img-resize="true"
|
|
:read-only="readOnly"
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
@ready="onEditorReady"
|
|
@statuschange="statuschange"
|
|
@focus="editFocus"
|
|
@blur="editBlur"
|
|
></editor>
|
|
<!-- 操作工具 -->
|
|
<view class="tool-view" >
|
|
<!-- 文字相关操作 -->
|
|
<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
|
|
<jinIcon class="single" type="" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon>
|
|
<jinIcon class="single" type="" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon>
|
|
<jinIcon class="single" type="" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon>
|
|
<jinIcon class="single" type="" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon>
|
|
<jinIcon class="single" type="" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon>
|
|
<jinIcon class="single" type="" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon>
|
|
</view>
|
|
<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
|
|
<view class="setting-layer" v-if="showSettingLayer">
|
|
<view class="single" @click="release(true)">
|
|
<jinIcon class="icon" type="" ></jinIcon>
|
|
<view>公开发布</view>
|
|
</view>
|
|
<view class="single" @click="release(false)">
|
|
<jinIcon class="icon" type="" ></jinIcon>
|
|
<view>暂时保存</view>
|
|
</view>
|
|
</view>
|
|
<view class="tool">
|
|
<jinIcon class="single" type="" title="图片" @click="insertImage"></jinIcon>
|
|
<jinIcon class="single" type="" title="格式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon>
|
|
<jinIcon class="single" type="" title="分割线" @click="insertDivider"></jinIcon>
|
|
<jinIcon class="single" type="" title="撤回" @click="undo"></jinIcon>
|
|
<jinIcon class="single" type="" title="还原" @click="redo"></jinIcon>
|
|
<!-- <jinIcon class="single" type="" title="设置" @click="showSetting"></jinIcon> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import jinIcon from './jin-icons.vue';
|
|
import {
|
|
chooseImage
|
|
} from '@/utils'
|
|
export default {
|
|
props: {
|
|
readOnly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 点击图片时显示图片大小控件
|
|
showImgSize: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 点击图片时显示工具栏控件
|
|
showImgToolbar: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 点击图片时显示修改尺寸控件
|
|
showImgResize: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 占位符
|
|
placeholder: {
|
|
type: String,
|
|
default: '开始输入...'
|
|
},
|
|
// 图片上传的地址
|
|
uploadFileUrl: {
|
|
type: String,
|
|
default: '#'
|
|
},
|
|
// 上传文件时的name
|
|
fileKeyName: {
|
|
type: String,
|
|
default: 'file'
|
|
},
|
|
// 上传图片时，http请求的header
|
|
header: {
|
|
type: Object
|
|
},
|
|
// 初始化html
|
|
html: {
|
|
type: String
|
|
},
|
|
// 整个控件的高度
|
|
height: {
|
|
type: String,
|
|
default: '25vh'
|
|
}
|
|
},
|
|
computed:{
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
showMoreTool: false,
|
|
showBold: false,
|
|
showItalic: false,
|
|
showIns: false,
|
|
showHeader: false,
|
|
showCenter: false,
|
|
showRight: false,
|
|
showSettingLayer: false,
|
|
activeColor: '#F56C6C'
|
|
};
|
|
},
|
|
components: {
|
|
jinIcon
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
onEditorReady(e) {
|
|
uni.createSelectorQuery()
|
|
.in(this)
|
|
.select('.ql-container')
|
|
.fields({
|
|
size: true,
|
|
context: true
|
|
},res => {
|
|
this.editorCtx = res.context;
|
|
this.editorCtx.setContents({
|
|
html: this.html,
|
|
success: () => {
|
|
this.editorCtx.blur()
|
|
}
|
|
})
|
|
setTimeout(() => {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 0
|
|
})
|
|
}, 500)
|
|
})
|
|
.exec();
|
|
},
|
|
undo() {
|
|
this.editorCtx.undo();
|
|
},
|
|
insertImage() {
|
|
const _this = this
|
|
chooseImage((path) => {
|
|
_this.editorCtx.insertImage({
|
|
src: path,
|
|
alt: '图片'
|
|
})
|
|
})
|
|
},
|
|
/// 插入分割线
|
|
insertDivider() {
|
|
this.editorCtx.insertDivider();
|
|
},
|
|
redo() {
|
|
this.editorCtx.redo();
|
|
},
|
|
showMore() {
|
|
this.showMoreTool = !this.showMoreTool;
|
|
this.editorCtx.setContents()
|
|
},
|
|
setBold() {
|
|
this.showBold = !this.showBold;
|
|
this.editorCtx.format('bold');
|
|
},
|
|
setItalic() {
|
|
this.showItalic = !this.showItalic;
|
|
this.editorCtx.format('italic');
|
|
},
|
|
checkStatus(name, detail, obj) {
|
|
if (detail.hasOwnProperty(name)) {
|
|
this[obj] = true;
|
|
} else {
|
|
this[obj] = false;
|
|
}
|
|
},
|
|
statuschange(e) {
|
|
var detail = e.detail;
|
|
this.checkStatus('bold', detail, 'showBold');
|
|
this.checkStatus('italic', detail, 'showItalic');
|
|
this.checkStatus('ins', detail, 'showIns');
|
|
this.checkStatus('header', detail, 'showHeader');
|
|
if (detail.hasOwnProperty('align')) {
|
|
if (detail.align == 'center') {
|
|
this.showCenter = true;
|
|
this.showRight = false;
|
|
} else if (detail.align == 'right') {
|
|
this.showCenter = false;
|
|
this.showRight = true;
|
|
} else {
|
|
this.showCenter = false;
|
|
this.showRight = false;
|
|
}
|
|
} else {
|
|
this.showCenter = false;
|
|
this.showRight = false;
|
|
}
|
|
},
|
|
setIns() {
|
|
this.showIns = !this.showIns;
|
|
this.editorCtx.format('ins');
|
|
},
|
|
setHeader() {
|
|
this.showHeader = !this.showHeader;
|
|
this.editorCtx.format('header', this.showHeader ? 'H2' : false);
|
|
},
|
|
setCenter() {
|
|
this.showCenter = !this.showCenter;
|
|
this.editorCtx.format('align', this.showCenter ? 'center' : false);
|
|
},
|
|
setRight() {
|
|
this.showRight = !this.showRight;
|
|
this.editorCtx.format('align', this.showRight ? 'right' : false);
|
|
},
|
|
showSetting() {
|
|
this.showSettingLayer = !this.showSettingLayer;
|
|
},
|
|
async editFocus(e) {
|
|
},
|
|
editBlur(e) {
|
|
this.editorCtx.getContents({
|
|
success: res => {
|
|
this.$emit('editOk', res);
|
|
}
|
|
})
|
|
},
|
|
release(isPublic) {
|
|
this.showSettingLayer = false;
|
|
this.editorCtx.getContents({
|
|
success: res => {
|
|
Object.assign(res, {
|
|
isPublic: isPublic
|
|
})
|
|
this.$emit('editOk', res);
|
|
}
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
/* padding-top: 30rpx; */
|
|
}
|
|
|
|
.ql-container {
|
|
line-height: 150%;
|
|
font-size: 28rpx;
|
|
width: 100%;
|
|
height: 240px;
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
/* padding-bottom: 5rpx; */
|
|
}
|
|
.tool-view{
|
|
width: 100%;
|
|
background: #eee;
|
|
/* margin-top: 20px; */
|
|
}
|
|
.tool {
|
|
height: 95rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
}
|
|
|
|
.font-more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
background: rgb(235, 235, 235);
|
|
overflow: hidden;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.setting-layer {
|
|
position: absolute;
|
|
bottom: 100rpx;
|
|
background: #fff;
|
|
width: 250rpx;
|
|
right: 20rpx;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
border-radius: 8rpx;
|
|
}
|
|
.setting-layer .single {
|
|
height: 80rpx;
|
|
font-size: 32rpx;
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 80rpx;
|
|
flex-direction: row;
|
|
color: #666;
|
|
}
|
|
.setting-layer .single .icon {
|
|
margin-right: 20rpx;
|
|
}
|
|
.setting-layer-mask{
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: transparent;
|
|
}
|
|
</style>
|