vue☞第三方功能

vue-tinymce

• vue2集成vue-tinymce 参考文章1
• vue2集成vue-tinymce 参考文章2
• Tinymce-例1
• Tinymce-例2
• Tinymce-例3
• vue3集成vue-tinymce

复制和粘贴功能

• 安装插件 npm install --save vue-clipboard2
• main.js添加配置

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

• vue文件中使用方式:

<a-textarea :style="wh('70%')" placeholder="最高4行" :rows="4" v-model:value="tipInfo" />
<div v-clipboard:copy="tipInfo" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</div>
data() {
    return {
        tipInfo: '未检测到内容'
    }
},
methods: {
    // 复制成功
    onCopy() {
        // this.tipInfo = '';
        console.log('复制成功');
    },
    // 复制失败
    onError() {
        // this.tipInfo = '';
        console.log('复制失败');

    },
    /* 
        粘贴(需要https或localhost链接,并且在链接左侧小锁🔐-网站设置-打开剪切权限)
    */
    async paste() {
        navigator.clipboard.readText()
            .then(text => {
                console.log('Pasted content: ', text);
            })
            .catch(err => {
                console.error('Failed to read clipboard contents: ', err);
            });
    }
}

• 粘贴时,需要打开浏览器权限