富文本编辑器 froala-editor

川长思鸟来 2023-05-31 06:39 30阅读 0赞

[https://blog.csdn.net/hjy170314/article/details/102696538][https_blog.csdn.net_hjy170314_article_details_102696538]

文本编辑器 froala-editor

官网文档:

https://www.froala.com/wysiwyg-editor/examples/full-featured

使用方式：

安装 froala-eidtor

cnpm install vue-froala-wysiwyg@2.9.0  --save
    
    
    cnpm install jquery --save

在mian.js中写入

import Vue from 'vue'
    import App from './App.vue'
    import './registerServiceWorker'
    import router from './router'
    import store from './store'
    
    // 富文本  start
    import 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)
    // 富文本 end
    
    Vue.config.productionTip = false
    
    new 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>
    
    
    <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())
    			})
    		},
    		// 获取文本域的html
    		changeContent(html){
    			this.content = html	
    		},
    		// 提交   目前只显示文本域的html
    		onSubmit(){
    			alert(this.content)
    			
    		}
    	}
    };
    </script>

注意路径的问题，已经图片。视频和文件上传的路径要写正确

[https_blog.csdn.net_hjy170314_article_details_102696538]: https://blog.csdn.net/hjy170314/article/details/102696538