/hjy170314/article/details/102696538
文本编辑器 froala-editor
官网文档:
/wysiwyg-editor/examples/full-featured
使用方式：
安装 froala-eidtor
cnpm install vue-froala-wysiwyg@2.9.0 --savecnpm install jquery --save
在mian.js中写入
import Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'// 富文本 startimport jQuery from 'jquery'import VueFroala from 'vue-froala-wysiwyg'require('froala-editor/js/froala_editor.pkgd.min')require('froala-editor/css/froala_editor.pkgd.min.css')require('font-awesome/css/font-awesome.css')require('froala-editor/js/languages/zh_cn')require('froala-editor/css/froala_style.min.css')window.$ = jQuery;Vue.use(VueFroala)// 富文本 endVue.config.productionTip = falsenew Vue({router,store,render: h => h(App)}).$mount('#app')
在组件中创建editor.vue组件，并写入：
<template><div class="hello"><froala :config="config"></froala></div></template><script>export default {name: 'editor',props: {msg: String},data() {return {editor: null,config: {zIndex: 2501,height: '600',toolbarSticky: false,autofocus: true,toolbarButtons: ['fullscreen','bold','italic','underline','strikeThrough','subscript','superscript','|','fontFamily','fontSize','color','inlineStyle','paragraphStyle','|','paragraphFormat','align','formatOL','formatUL','outdent','indent','quote','-','insertLink','insertImage','insertVideo','insertFile','insertTable','|','emoticons','specialCharacters','insertHR','selectAll','clearFormatting','|','print','help','html','|','undo','redo'],language: 'zh_cn',imageDefaultWidth: 100,// 图片.视频,文件上传路径imageUploadURL: 'http://localhost:8080/',videoUploadURL: '',fileUploadURL: '',// 请求头imageManagerLoadRUL: '',// requestHeaders: {// Authorization: this.$store.token()// },events: {// 初始化方法'froalaEidtor.initialized': (e, editor) => {this.editor = editor;},// 内容编辑变化'froalaEditor.contentChanged': (e, editor) => {this.$emit('on-change',editor.html.get(true))}}}};},methods:{// 获取并设置内容setHtml(html){if(this.editor){this.editor.html.set(html)}}}};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped lang="scss"></style>
在引用的组件中引入editor.vue组件，
<template><div class="home"><!-- 使用组件 --><editor ref="froalaEditor" @on-change="changeContent" ></editor><div @click="onSubmit()"> 提 交</div></div></template><script>// 引入组件import editor from '@/components/editor.vue';export default {name: 'Home',components: {editor},data(){return{content:''}},methods:{// 初始化init(){this.$nextTick(() =>{this.$refs.froalaEditor.setHtml(editor.html.get())})},// 获取文本域的htmlchangeContent(html){this.content = html},// 提交 目前只显示文本域的htmlonSubmit(){alert(this.content)}}};</script>
注意路径的问题，已经图片。视频和文件上传的路径要写正确
