富文本编辑器 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组件,并写入:







在引用的组件中引入editor.vue组件,




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

 

你可能感兴趣的:(前端知识)