vue3+ts添加公共富文本组件

vue3+ts添加公共富文本组件

下载

npm install wangeditor --save-dev
复制代码

新建一个editor.vue 的组件

<style scoped>
.part_right {
    width: 100%;
    background: #f2f2f2;
    min-height: 100vh;
}
.list {
    width:96%;
    margin: 0 auto;
/* background: gray; */
padding-top: 50px;

}

.list ul li{

list-style-type: none;

display: flex;

border-bottom: 1px solid #e6e5e5;

min-height: 50px;

background: #d5d5d5;

}

.list ul li>div{

flex: 1;

line-height: 50px;

}

.list ol li{

list-style-type: none;

display: flex;

border-bottom: 1px solid #e6e5e5;

min-height: 30px;

}

.list ol li>div{

flex: 1;

line-height: 30px;

}

.flright {

float: right;

margin-right: 2%;

}

</style>

<template>

<div>

<div className="shop">

<div className="text-area" >

<div ref="editorElemMenu"

style="backgroundColor: '#f1f1f1'; border:'1px solid #ccc'"

className="editorElem-menu">

</div>

<div style="height: 300;border: '1px solid #ccc',borderTop: 'none'" ref="editorElemBody" className="editorElem-body">

</div>

</div>

</div>

</div>
</template>
<script lang="ts">
import { onMounted ,reactive,toRefs,defineComponent,ref} from 'vue'

import E from 'wangeditor'
interface DataProps {

editor: any;

editorContent: string

getContent:(ref?: any) => void

}
export default defineComponent({

name:'Editor',

components: {

},

props: {

options: Object,

value: String,

},

setup(props, { emit }) {

const editorElemMenu = ref();

const editorElemBody = ref();

const data: DataProps = reactive({

editorContent: '',

editor:{},

getContent:() => {

console.log("111",props)

data.editor.txt.html(props.value)

}

})

onMounted(() => {

let _this = this;

const elemMenu = editorElemMenu.value;

const elemBody = editorElemBody.value;

data.editor = new E(elemMenu, elemBody)

// 使用 onchange 函数监听内容的变化，并实时更新到 state 中

data.editor.config.onchange = (html: any) => {

console.log(data.editor.txt.html())

data.editorContent = data.editor.txt.html()

// 向外部返回一个处理过的值

emit('onEditor', data.editor.txt.html())

emit('update:value', data.editor.txt.html())

}

data.editor.config.customUploadImg = function (files: any, insert: any ) {

// files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法

// let file;

// if (files && files.length) {

//     file = files[0];

// } else {

//     return

// }

// 图片上传

console.log("files1",files)
                      const formData = new FormData();
                      formData.append('file', files[0]);
                      console.log("files",files,insert)
                      // formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})
                  }

                data.editor.config.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'table',  // 表格
                    'video',  // 插入视频
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ]
                data.editor.config.uploadImgShowBase64 = true
                data.editor.create()

                // data.getContent()
    })
    const refData = toRefs(data);
    return {
        ...refData,
        editorElemMenu,
        editorElemBody
    }
}

})

</script>
复制代码

调用的组件

<style scoped>
</style>
<template>

<div class="part_right">

<Editor ref="Editor" :value="content" @onEditor="onEditor"/>

</div>

</template>

<script lang="ts">
import { onMounted ,reactive,toRefs,defineComponent,ref} from 'vue'

import Editor from '@/components/tool/editor.vue'
interface DataProps {

content: string;

showBack:(ref?: any) => void

}
export default defineComponent({

name:'about',

components: {

Editor

},

setup() {

const Editor = ref();

const data: DataProps = reactive({

content:'1',

//获取富文本中的内容

onEditor:(value: string) => {

console.log("父组件",value)

},

// 富文本回显

showBack:() => {

data.content = '回显内容公众号qdleader'

console.log(" data.content", data.content)

setTimeout(() =>{

Editor.value.getContent()

})
        }
    })

    onMounted(() =&gt; {
        data.showBack()
    })
    const refData = toRefs(data);
    return {
        ...refData,
        Editor
    }
}

})

</script>
复制代码

这样就完成可以在vue3加ts中使用 富文本啦

拓展。。

有的同学需要自定义上传图片的接口

```

data.editor.config.customUploadImg = function (files: any, insert: any ) {
        // files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法
        // let file;
        // if (files && files.length) {
        //     file = files[0];
        // } else {
        //     return
        // }
        // 图片上传
        console.log("files1",files)
    const formData = new FormData();
    formData.append('file', files[0]);
    console.log("files",files,insert)
    // formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})

    // 把请求你们服务器地址获得的图片链接，替换到下面src里面即可
  data.editor.txt.append("<img src='https://rmxgh-1305579889.cos.ap-beijing.myqcloud.com/img/64bec1a86509170772c19fc5f88d84e1.jpg' />")

}

```

扫码加群或领资料