在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/