更新记录

1.0.26（2023-02-25）

修复Video的封面录入字段错误，完善录入界面

1.0.25（2023-02-22）

更新音频文件的标注

1.0.24（2023-02-21）

更新视频文件的标题的显示

平台兼容性

zqs-ux-editor 移动端编辑器

关于zqs-ux-editor

模仿美篇的移动端编辑器，使用JSON格式存储数据。

使用

1. 导入插件

   插件中心，点击右侧导入hbuilderx即可

2. 添加页面配置到 pages.json

{
    {
        "path": "uni_modules/zqs-ux-editor/pages/editPic",
        "style": {
            "navigationBarTitleText": "图片编辑",
            "enablePullDownRefresh": false
        }
    }, {
        "path": "uni_modules/zqs-ux-editor/pages/editTitle",
        "style": {
            "navigationBarTitleText": "标题编辑",
            "enablePullDownRefresh": false
        }
    }, {
        "path": "uni_modules/zqs-ux-editor/pages/editTxt",
        "style": {
            "navigationBarTitleText": "文本编辑",
            "enablePullDownRefresh": false
        }
    }, {
        "path": "uni_modules/zqs-ux-editor/pages/editVideo",
        "style": {
            "navigationBarTitleText": "视频编辑",
            "enablePullDownRefresh": false
        }
    }, {
        "path": "uni_modules/zqs-ux-editor/pages/edit",
        "style": {
            "navigationBarTitleText": "内容编辑",
            "enablePullDownRefresh": false
        }
    }, {
        "path": "uni_modules/zqs-ux-editor/pages/preview",
        "style": {
            "navigationBarTitleText": "内容预览",
            "enablePullDownRefresh": false
        }
    }
}

3. 导入处理函数到引入编辑器的页面

export default {
    data() {
        return {
            content: []
        }
    },
}

4. 使用

<zqs-ux-editor v-model="content" :cloud="true"></zqs-ux-editor>

5. 内容渲染

<zqs-ux-parser :list="content"></zqs-ux-parser>

6. 完整的应用案例

弹出内置的独立编辑页面进行内容编辑

<template>
    <view style="padding:20rpx;">
        <!-- {{JSON.stringify(content)}} -->
        <!-- 内容页面模板 -->
        <zqs-ux-parser :list="content"></zqs-ux-parser>
        <button type="primary" @click="edit">编辑文章</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                content: []
            }
        },
        methods: {
            edit() {
                const storage_key = 'ux_content'
                uni.setStorageSync(storage_key, JSON.stringify(this.content));
                uni.navigateTo({
                    url: `/uni_modules/zqs-ux-editor/pages/edit?storage=${storage_key}`,
                    events: {
                        onSave: (content) => {
                            //更新内容
                            this.content = content;
                        }
                    }
                });
            },
        },
        onLoad() {
            let d = uni.getStorageSync('ux_content');
            if (d) {
                this.content = JSON.parse(d);
            }
        },
        onShow() {

        }
    }
</script>

<style lang="scss">
</style>

API

zqs-ux-editor 组件

• Props

zqs-ux-parser 组件

zqs-ux-parser 组件用于解析zqs-ux-editor编辑的内容

• Props

已实现功能

• [x] 标题
• [x] 段落
• [x] 单一图片
• [x] 一次上传多张图片，支持列表显示和轮播图显示
• [x] 视频
• [x] 选择地图位置（小程序可以工作，H5有问题）
• [x] 支持直接输入图片地址
• [x] 音频

目前的版本只实现了基本功能，只测试了云存储，对使自定义的服务器存储没测试，可能会存在问题，

计划 & 待办

• [ ] 优化编辑界面，改善用户体验
• [ ] 图片九宫格显示
• [ ] 标题支持模板
• [ ] 显示楼层，拽曳排序
• [ ] 输出Markdown
• [ ] 输出HTML
• [ ] 分析Markdown
• [ ] 分析HTML
• [ ] 采集微信公众号的文章
• [ ] 采集美篇的文章