富文本編輯器 froala-editor

https://blog.csdn.net/hjy170314/article/details/102696538

文本編輯器 froala-editor  

官網文檔:

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

使用方式：

安裝 froala-eidtor

cnpm install [email protected]  --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>

<!-- 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())
			})
		},
		// 獲取文本域的html
		changeContent(html){
			this.content = html	
		},
		// 提交   目前只顯示文本域的html
		onSubmit(){
			alert(this.content)
			
		}
	}
};
</script>

注意路徑的問題，已經圖片。視頻和文件上傳的路徑要寫正確