先上成品图
🙏🙏🙏🙏🙏🙏代码贴在最下面，方便大家复制。🙏🙏🙏🙏🙏🙏
补充：记得 把 富文本编辑器的版本改成2.9.0，否则工具栏会显示不全。 直接按照版本安装 cnpm install vue-froala-wysiwyg@2.9.0 --save 就不会出现补充中的问题了
然后在main.js内，window.$ = jQuery 下面 在加上一句 window.jQuery = jQuery 就可以了
一开始用的时候会出现项目跑不起来的情况，直接安装 @babel/runtime-corejs2 ,
font-awesome 这两个插件，就可以跑起来了。
ueditor是百度团队研发的一款编辑器，同样小编也实现了基于vue.js的集成使用，实现了v-model双向绑定。有需要的同学点击这里进入我的github下载源码，不懂或者遇到问题的话可以加我微信1115009958联系我协助你解决，有时间我会写一篇教程上传到简书，敬请期待。
这个是ueditor编辑器，第二个是froala
froala-editor富文本编辑器介绍：
WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一。它采用了最新的技术，并利用jQuery和HTML5的巨大优势，创造了出色的编辑体验。拥有非常多的示例让你轻松集成，让你的用户爱上它清晰的设计。它能和Ruby On Rails，Django，Angular.js，Meteor，Symgony.CakePHP等集成，具有如下特点。
～微小 - 只需添加您需要的插件(30+ 官方插件)
～可以向如PHP,Node.JS,.NET,Java, 和Python提供服务端开发工具包
～代码注释精美
～简单可扩展- 良好的插件注释使你更容易使用和开发自己的插件
～良好的维护 -持续更新
～很好的支持 -帮助中心
选择这个编辑器的原因就是他可以全屏显示，可以复制代码，图片上传和后端配置都贼方便，大大满足现有的项目，哦对了，主要是这个编辑器特么的支持v-model双向绑定～～～有木有😄
演示
基本演示:https://www.froala.com/wysiwyg-editor
在线演示:https://www.froala.com/wysiwyg-editor/inline
完整列表:https://www.froala.com/wysiwyg-editor/examples
开始使用
⚠️注意：本文只讲vue2.0的用法，3.0的话请自行测试，有时间了小编会把3.0使用教程上传上来。
初始化编辑器
Froala WYSIWYG HTML编辑器是一个易于集成和易于使用的插件。它需要jQuery1.11.0或更高版本，以及名为Font Awesome4.4.0的图标字体。你也可以使用旧版本的Font Awesome，但是某些编辑器的图标将不会出现。
下面是如何在vue.js上初始化编辑器的基本示例。
首先，我们需要在项目列表中新建一个组件，例如该组件起名为 editor.vue ，就放在components目录下。前提是我们已经装上了插件支持和main.js配置
cnpm install vue-froala-wysiwyg@2.9.0 --save
cnpm install jquery --save
在main.js插入这段代码
第二，editor.vue组件内这样写入代码
里面各个配置参数啥意思这里就不做解释了，各位自行百度吧。
第三：在需要调用该组件的组件内，这样写
1）要先把editor组件引进来，这个要是还不会的话，建议先去学习下vue基础
2）这里要注意下调用子组件的方法引发的问题，详细情况请查看我另一篇博文（前端踩坑小结:当element-ui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题）
ps：我的项目是做的后台管理，需要用到编辑器添加，编辑图文，这里用到了vue指令v-model双向绑定，很是方便。formData数据是该组件的父组件传过来的，没有这个数据的话自己在data里声明一个。前端的话到这里就结束了，图片上传，视频上传的接口找你们公司后端要就行，填在我打马赛克的那几个地方就可以了。不说了，我去飞了。哈哈😄
ps：正式打包上线的时候，可能有些问题，比如会出现图标字体找不到等等，有时间我会把问题的解决方案更新上来，敬请关注
更新：
打包上线后会出现以下几个问题：
1）.woff等图标字体找不到，导致下图这个情况～
.woff等图标字体找不到
分析：
仔细检查控制台报的错误 xxxx404，不要怕，404不就是没找到嘛，在看路径发现多了css/static这两层路径，打包后static文件夹下面直接就可以找到fonts文件夹的，原来这都是webpack搞的鬼，我们这样解决就好，当然，你也可以在css目录下新建一个static文件夹，再把fonts文件夹复制过去，不过这是最笨的方法，下面看标准解决方案。
解决方案：
在build文件夹下的webpack.prod.conf.js文件中修改extract: true为false，然后在重新打包上传即可。
webpack.prod.conf.js
上传服务器后，你发现控制台不报错了，图标字体页找到了，界面页正常了，（腰也不痛了，肾也好了，一晚上又可以好几次了，哈哈哈😂）可是～～怎么会出现红色背景警告一样的英文呢，什么鬼～
这就是第二个问题，froala编辑器其实是收费的，但是我们可以免费使用他（什么乱七八糟的，就是干）别急，看看怎么解决他个狗日的。
你可能会想到，用css的display：none隐藏掉不就可以了吗。❌错 ❌，none了一时爽，none后变textarea。
所以还是换种方式吧，也是用css，但是我们这样搞：（截图中的代码请在最下方复制）写在App.vue这个组件中的style下。style不要加scoped
上面的空白怎么办呢，也是用css解决，废话不多说，看代码：
然后，光标上去了，也可以在上方输入文字了。但是提示文字没上来，请继续看下方解决方案，自然也是用css。
在然后，你会发现都正常了，看着真心舒服。
本教程到此结束。🙏代码贴下面，方便大家复制。
.fr-wrapper > div[style*="z-index: 9999"] {
position: absolute;
top: -10000px;
opacity: 0;
}
.fr-element.fr-view {
position: absolute;
top: 0;
}
.fr-placeholder{
margin-top: 0 !important;
}
//下面这段代码是封装好的上面提到的editor.vue组件，直接复制过去，然后格式化代码即可。xxxxx换成你自己都接口地址
<template> <froala :config="config"></froala></template><script>export default { data() { return { editor: null, config: { zIndex: 2501, height: "600", toolbarSticky: false, autofocus: true, toolbarButtons: [ "fullscreen", "bold", "italic", "underline", "strikeThrough", "subscript", "superscript", "|", "fontFamily", "fontSize", "color", "inlineClass", "inlineStyle", "paragraphStyle", "lineHeight", "|", "paragraphFormat", "align", "formatOL", "formatUL", "outdent", "indent", "quote", "-", "insertLink", "insertImage", "insertVideo", "embedly", "insertFile", "insertTable", "|", "emoticons", "fontAwesome", "specialCharacters", "insertHR", "selectAll", "clearFormatting", "|", "print", "getPDF", "spellChecker", "help", "html", "|", "undo", "redo" ], placeholder: '请填写内容', language: "zh_cn", imageDefaultWidth: 500, imageUploadURL: "xxxxxxxx", videoUploadURL: "xxxxxxx", fileUploadURL: "xxxxxxx", imageManagerLoadURL:"xxxxxx", requestHeaders: { Authorization: localStorage.eleToken }, events: { "froalaEditor.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></style>
<Editor ref="froalaEditor" @on-change="changeContent" v-model="formData.content"></Editor>
import Editor from '@/components/editor.vue'
components: { Editor },
@open="init()"
init () {
this.$nextTick(()=>{
console.log(this.formData.content)
this.$refs.froalaEditor.setHtml(this.formData.content)
})
},
changeContent (html) {
this.formData.content = html
// console.log(html)
},
//-------------------- 富文本编辑配置区 --------------------------------------------------//
import jQuery from 'jquery'
import VueFroala from 'vue-froala-wysiwyg'
// Require Froala Editor js file.
require('froala-editor/js/froala_editor.pkgd.min')
// Require Froala Editor css files.
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)
//------------------------------------ 富文本编辑配置区 -----------------------------------//
网友评论