|
|
@@ -0,0 +1,350 @@
|
|
|
+<template>
|
|
|
+ <view class="container" :style="{
|
|
|
+ paddingBottom: showMoreTool ? '220rpx' : '120rpx'
|
|
|
+ }">
|
|
|
+ <editor
|
|
|
+ class="ql-container"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ :show-img-size="true"
|
|
|
+ :show-img-toolbar="true"
|
|
|
+ :show-img-resize="true"
|
|
|
+ @ready="onEditorReady"
|
|
|
+ id="editor"
|
|
|
+ @statuschange="statuschange"
|
|
|
+ @focus="editFocus"
|
|
|
+ @input="editBlur"
|
|
|
+ ref="editot"
|
|
|
+ ></editor>
|
|
|
+ <!-- 操作工具 -->
|
|
|
+ <view class="tool-view" >
|
|
|
+ <view class="tool">
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="插入图片" @click="insertImage"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="修改文字样式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="分割线" @click="insertDivider"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="撤销" @click="undo"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="重做" @click="redo"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="设置" @click="confirmContent"></jinIcon><!-- @click="showSetting" -->
|
|
|
+ </view>
|
|
|
+ <!-- 文字相关操作 -->
|
|
|
+ <view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon>
|
|
|
+ <jinIcon class="single" type="" font-size="44rpx" 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>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const req = require('../../../utils/request.js');
|
|
|
+import jinIcon from './jin-icons.vue';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showMoreTool: false,
|
|
|
+ showBold: false,
|
|
|
+ showItalic: false,
|
|
|
+ showIns: false,
|
|
|
+ showHeader: false,
|
|
|
+ showCenter: false,
|
|
|
+ showRight: false,
|
|
|
+ showSettingLayer: false,
|
|
|
+ activeColor: '#F56C6C',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ jinIcon
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 点击图片时显示图片大小控件
|
|
|
+ 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,
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ },
|
|
|
+ undo() {
|
|
|
+ this.editorCtx.undo();
|
|
|
+ },
|
|
|
+ // 插入图片
|
|
|
+ insertImage() {
|
|
|
+ let that = this;
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 8,
|
|
|
+ sizeType: ['original', 'compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: function({
|
|
|
+ tempFilePaths
|
|
|
+ }) {
|
|
|
+ var promise = Promise.all(tempFilePaths.map(tempFilePath => {
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "正在上传中"
|
|
|
+ })
|
|
|
+ req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
|
|
|
+ that.editorCtx.insertImage({
|
|
|
+ src: res.src, // 此处需要将图片地址切换成服务器返回的真实图片地址
|
|
|
+ alt: '图片',
|
|
|
+ success: function(e) {}
|
|
|
+ });
|
|
|
+ uni.hideLoading()
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }));
|
|
|
+ promise.then(function(results) {
|
|
|
+ console.log(results);
|
|
|
+ }).catch(function(err) {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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() {
|
|
|
+
|
|
|
+ },
|
|
|
+ editBlur(res) {
|
|
|
+ this.$emit('editBlur', res);
|
|
|
+ },
|
|
|
+ release(isPublic) {
|
|
|
+ this.showSettingLayer = false;
|
|
|
+ this.editorCtx.getContents({
|
|
|
+ success: res => {
|
|
|
+ Object.assign(res, {
|
|
|
+ isPublic: isPublic
|
|
|
+ })
|
|
|
+ this.$emit('editOk', res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirmContent(){
|
|
|
+ this.editorCtx.getContents({
|
|
|
+ success: res => {
|
|
|
+ this.$emit('editOk', res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.ql-editor.ql-blank:before {
|
|
|
+ /* 此处设置 placeholder 样式 */
|
|
|
+ color: rgba(204, 204, 204, 1);
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.ql-container {
|
|
|
+ line-height: 160%;
|
|
|
+ font-size: 34rpx;
|
|
|
+ width: calc(100% - 60rpx);
|
|
|
+ height: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-style: normal !important;
|
|
|
+}
|
|
|
+#editor{
|
|
|
+ font-style: normal !important;
|
|
|
+}
|
|
|
+.tool-view{
|
|
|
+ width: 100vw;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+}
|
|
|
+.tool {
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+ background: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.font-more {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 100rpx;
|
|
|
+ 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>
|
xhj