uni-app 踩坑之旅4

又是踩坑的一天，今天来处理一下富文本：

https://uniapp.dcloud.net.cn/component/editor.html

直接用的内置的，修修改改：

 

除了把字体和背景扩展了下，其他的都原生的：

 

图片底层走的是  uni.chooseImage，然后调用上传，把 图片 上传到服务器，再将返回的 src 插入到富文本中：

 

因为是真机调试，所以控制台要想打印对象，得转成字符串，之前调整底层请求时，也是这么干的（uni.request(options)）；

这次也是不例外，但是遇到了个坑， req 这个参数即上传成功，后台返回的参数，能打印出来，但是就是访问不到属性值：

 

按理说对象就能访问到属性值，卡了好一会，最后还是突然想看下他的类型，

 结果发现这个 data 居然是个 string，可真是太坑了！

 

客户端可是个对象，留待后续深入探讨：

 

<template>
    <view class="container">
        <view class="page-body">
            <view class='wrapper'>
                <view class='toolbar' @tap="format" style="overflow-y: auto;">
                    <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
                    </view>
                    <view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
                    </view>

                    <view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
                        data-name="align" data-value="left"></view>
                    <view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
                        data-name="align" data-value="center"></view>
                    <view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
                        data-name="align" data-value="right"></view>

                    <view class="iconfont icon-text_color" data-name="color" :data-value="color">
                        <picker :value="colorIndex" :range="colorList" class='color-picker' @change="colorChange"
                            range-key="name">
                        </picker>
                    </view>

                    <view class="iconfont icon-fontbgcolor" data-name="backgroundColor" :data-value="bgColor">
                        <picker :value="bgColorIndex" :range="colorList" class='color-picker' @change="bgColorChange"
                            range-key="name">
                        </picker>
                    </view>

                    <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
                        data-name="list" data-value="bullet"></view>

                    <view class="iconfont icon-charutupian" @tap="insertImage"></view>
                    <view class="iconfont icon-format-header-1" data-name="header" :data-value="headerLevel"></view>
                </view>

                <view class="editor-wrapper">
                    <editor id="editor" class="ql-container" :placeholder="$t('placeholder.startInput')" show-img-size
                        show-img-toolbar show-img-resize @statuschange="onStatusChange" :read-only="readOnly"
                        @ready="onEditorReady" @input="onContentChange">
                    </editor>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { server, uploadUrl } from '@/api/base';
    import { uploadFile } from '@/utils/public';
    import { getItem, removeItem, StorageKey } from '@/utils/storage';

    export default {
        data() {
            return {
                readOnly: false,
                formats: {},
                colorList: [
                    { color: '#000000', name: this.$t('color.black') },
                    { color: '#d81e06', name: this.$t('color.red') },
                    { color: '#3662EC', name: this.$t('color.blue') },
                    { color: '#8a8a8a', name: this.$t('color.gray') },
                    { color: '#ffffff', name: this.$t('color.white') },
                    { color: '#1afa29', name: this.$t('color.green') },
                ],
                colorIndex: 0,
                color: '#000000',
                bgColorIndex: 4,
                bgColor: '#ffffff',
                headerLevel: 1,
            }
        },
        props: {
            init: {
                type: String,
                default: '',
            }
        },
        watch: {
            init: {
                handler(_new, old) {
                    if (_new) {
                        // https://uniapp.dcloud.net.cn/api/media/editor-context.html#
                        this.editorCtx.setContents({
                            html: _new,
                            success() {
                                console.log('content init success');
                            }
                        });
                    }
                },
                immediate: true,
                deep: true
            }
        },
        methods: {
            readOnlyChange() {
                this.readOnly = !this.readOnly
            },
            onEditorReady() {
                uni.createSelectorQuery().select('#editor').context((res) => {
                    this.editorCtx = res.context;
                }).exec()
            },
            format(e, s) {
                let temp = null;
                if (e) {
                    temp = e.target.dataset;
                } else {
                    temp = s;
                }
                let { name, value } = temp;
                if (!name) return
                console.log('format', name, value)
                this.editorCtx.format(name, value)
            },
            colorChange(e) {
                this.colorIndex = e.detail.value;
                this.format(null, {
                    name: 'color',
                    value: this.colorList[this.colorIndex].color,
                });
            },
            bgColorChange(e) {
                this.bgColorIndex = e.detail.value;
                this.format(null, {
                    name: 'backgroundColor',
                    value: this.colorList[this.bgColorIndex].color,
                });
            },
            onStatusChange(e) {
                const formats = e.detail
                this.formats = formats
            },
            onContentChange(e) {
                // 监听内容改变// 通过 editorCtx.getContents 手动取
            },
            insertImage() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        const response = uploadFile(res.tempFilePaths[0])
                        response.then(req => {
                            this.editorCtx.insertImage({
                                src: req.data,
                                alt: '图像',
                                success: function() {
                                    console.log('insert image success')
                                }
                            })
                        });
                    }
                })
            }
        },
        onLoad() {}
    }
</script>

<style>
    @import "./editor-icon.css";

    .container {
        padding: 10rpx;
    }

    #editor {
        margin-top: 0;
    }

    .icon-text_color {
        position: relative;
    }

    .color-picker {
        position: absolute;
        top: 0;
        opacity: 0;
        width: 24rpx;
        height: 24rpx;
    }

    .icon-fontbgcolor {
        position: relative;
    }

    .page-body {
        height: calc(100vh - var(--window-top) - var(--status-bar-height));
    }

    .wrapper {
        height: 100%;
    }

    .editor-wrapper {
        height: calc(100vh - var(--window-top) - var(--status-bar-height) - 100rpx);
        background: #fff;
    }

    .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;
    }

    .ql-container {
        box-sizing: border-box;
        padding: 12px 15px;
        width: 100%;
        min-height: 30vh;
        height: 100%;
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.5;
    }

    .ql-active {
        color: #06c;
    }
</style>

 

api：https://uniapp.dcloud.net.cn/api/media/editor-context.html#