在VueJS中使用 froala 富文本编辑器

安装包#

npm install vue-froala-wysiwyg --save

集成组件#

import './assets/main.css'

//Import Froala Editor
import 'froala-editor/js/plugins.pkgd.min.js';
//Import third party plugins
import 'froala-editor/js/third_party/embedly.min';
import 'froala-editor/js/third_party/font_awesome.min';
import 'froala-editor/js/third_party/spell_checker.min';
import 'froala-editor/js/third_party/image_tui.min';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';


import { createApp } from 'vue'
import App from './App.vue'

import VueFroala from 'vue-froala-wysiwyg';

const app = createApp(App)
app.use(VueFroala);

app.mount('#app')

使用组件#

<script setup>
import {ref} from "vue";

let model = ref('Edit Your Content Here!');

let config = ref ({
        events: {
            initialized: function () {
                //移除水印
                window.document.getElementById('fr-logo').remove();
        }
    }
});

let getData = ()=>{
    console.log(model.value);
};

</script>
<template>
    <div id="app">
        <button @click="getData">获得内容</button>
        <hr>
        <froala :tag="'textarea'" :config="config" v-model:value="model">Init text</froala>
        <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
    </div>
</template>

<style scoped>

</style>

参考链接#

https://froala.com/wysiwyg-editor/docs/framework-plugins/vue-js-3/

作者:重庆熊猫

出处:https://www.cnblogs.com/cqpanda/p/18064326

版权:本作品采用「不论是否商业使用都不允许转载,否则按3元1字进行收取费用」许可协议进行许可。

posted @   重庆熊猫  阅读(385)  评论(0编辑  收藏  举报
more_horiz
keyboard_arrow_up light_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示