更新记录

1.0.2（2022-06-28）

增加插入图片功能，icons文件补充

1.0.1（2022-04-11）

引入minxin文件，文件不存在问题修改。

1.0.0（2022-04-04）

1.0.0版本，功能上面已经说明

平台兼容性

兼容性说明

这是一个uni-app的通用组件，兼容微信小程序端、安卓端、ios端、H5端(未测试)。其他端测试无问题，nvue不支持.

我的HbuilderX版本3.3.13，不同的版本可能会造成不兼容的问题。

注意

1. 组件内部有键盘高度监听，所以在一个页面尽量不要出现两个富文本编辑
2. 图片上传还没有匹配好后期会更新
3. 由于uni原生富文本身的兼容性问题，一些端是无法兼容的

使用方式

1. 将此组件进入你的项目中的 /components/ 目录中
2. 在某个页面中使用该插件

ps: 注意组件倒入后将edit_icon文件夹移动到static目录下

在 script 中引用组件

    import knEdit from '@/components/lf-kn-editor/kn_editor.vue'
    export default {
        components: {knEdit},
        data() {
            return {
                content: '',
                pageScrollTop: 0
            }
        },
        onLoad() {

        },
        methods: {

        },
        onPageScroll(e) {
            console.log(e)
            this.pageScrollTop = e.scrollTop
        }
    }

在 template 中使用组件

<kn-edit ref="contentEdit" :pageScrollTop="pageScrollTop" v-model="content"></kn-edit>

插入图片， 可以使用选择图片事件选择图片触发uploadImgBefore，后执行上传逻辑拿到上传后的图片路径执行refs方法insertImage传入路径实现图片插入 也可自行编写选择图片逻辑后拿到图片地址，执行refs方法insertImage传入路径实现图片插入

<template>
<kn-edit ref="contentEdit" showInsertImg @uploadImgBefore="uploadImgBefore" :pageScrollTop="pageScrollTop" v-model="content"></kn-edit>
</template>
<script>
export default {
        components: {knEdit},
        data() {
            return {
                content: '',
                pageScrollTop: 0
            }
        },
        onLoad() {

        },
        methods: {
        uploadImgBefore(tempFiles) {
            // 你的上传逻辑。。。
            // 拿到地址后
            let paht = 'httpxxxxxxxx'
             this.$refs.contentEdit.insertImage(path)
        }
        },
        onPageScroll(e) {
            console.log(e)
            this.pageScrollTop = e.scrollTop
        }
    }
</script>

参数

事件

ref方法