vue集成quill------副文本编辑器

最新推荐文章于 2024-09-06 09:58:37 发布

HFY123456789

最新推荐文章于 2024-09-06 09:58:37 发布

阅读量223

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/HFY123456789/article/details/125619279

版权

首先安装：

npm install vue-quill-text-editor -D

然后就可以在package.json中找到

"@vueup/vue-quill": "^1.0.0-beta.8",

如下图：

基本就可以说明安装好了

然后，如果安装好了就可以去main.js中去挂载：

//vue-quill-editor富文本
import VueQuillTextEditor from 'vue-quill-text-editor';
import 'vue-quill-text-editor/dist/vue-quill-text-editor.esm.css';

//挂载：
app.use(VueQuillTextEditor)

就如下图：

然后就可以在vue组件里使用了：

下面这段import中的有关于这次富文本编辑器的引入是：ref，watch，其他的是有关setup的

<template> 
     <vue-quill-text-editor  ref="quillRef" :placeholder="place" :uploadFun="uploadFun"                 
     style="height:5px;" />
</template>

<script lang='ts'>
// 引入setup()需要的
import { reactive, onUnmounted, onUpdated, onMounted, toRefs, ref, watch} from 'vue'; 
export default {
 setup(){
    //初始化路由参数
    //const router = useRouter();
    // 初始化项目工作都放在setup中
    console.log("当前应用程序被安装了");
    //富文本编辑器 begin
    const quillRef = ref();
    watch(quillRef, async (val) => {
        const quillInstance = val.quillInstance;
        quillInstance.on('text-change', () => {
            // get html content
            const content = quillInstance.container.firstChild.innerHTML;
            console.log('quill content: ', content);
            this.form.content = content
        });
        // set html content 这里是将值赋值到富文本中的 temp就是值
        //quillInstance.container.firstChild.innerHTML = temp;
    });
    //富文本编辑器 over
    return {
      //...toRefs(state),
      quillRef,
    }
  }
}
</script>

就例如这样：

然后就可以在前端的页面中看到效果了

//下面这些是方法
const doUpload = async (formData) => {
    try {
        // request is axios instance
        const res = await request(API.uploadImage, formData, {
            method: 'post',
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        });
        return res.url;
    } catch (e) {
        console.log(e);
    }
};

const uploadFun = async (file) => {
    try {
        const oMyForm = new FormData();
        oMyForm.append('fileField', file);
        return new Promise((resolve, reject) => {
            // do some validation
            resolve(await doUpload(oMyForm));
            ...
        });
    } catch (e) {
        console.error(e);
    }
};