在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字进行收取费用」许可协议进行许可。
本文来自博客园,作者:重庆熊猫,转载请注明原文链接:https://www.cnblogs.com/cqpanda/p/18064326
Buy me a cup of coffee ☕.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步