安裝包
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/