froala + vue + plupload替换自带上传功能

froala富文本编辑器

最近由于产品的要求，替换掉老系统的vue ueditor富文本编辑器，换成froala。 如果是vue的话

npm install vue-froala-wysiwyg --save

import VueFroala from 'vue-froala-wysiwyg';

接着去入口文件 main.js引入依赖。

//Import Froala Editor
import 'froala-editor/js/plugins.pkgd.min.js';
//Import third party plugins
import 'froala-editor/js/third_party/embedly.min';
import 'froala-editor/js/third_party/font_awesome.min';
import 'froala-editor/js/third_party/spell_checker.min';
import 'froala-editor/js/third_party/image_tui.min';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/languages/zh_cn';
// Import and use Vue Froala lib.
import VueFroala from 'vue-froala-wysiwyg';Vue.use(VueFroala)

自定义功能列表

data() {var _this = this;return {config: {editor: null,language: 'zh_cn',//语言height: 325,quickInsertEnabled: false,//便捷插入标签charCounterCount: false, //富文本的输入长度toolbarButtons: ['align','bold','paragraphFormat','outdent','indent','insertLink',], //自定义toolbarButtons，功能菜单imageEditButtons: ['imageReplace','imageAlign','imageCaption','imageRemove',],//富文本对图片对操作imageUploadParam: 'upfile', //上传图片的字段imageUploadURL:'http://localhost:3005/excel',//请求地址imageUploadMethod: 'POST',// Allow to upload PNG and JPG.imageAllowedTypes: ['jpeg', 'jpg', 'png'],//接受图片的类型placeholderText: '请输入内容',// Set max file size to 20MB.fileMaxSize: 20 * 1024 * 1024, //限制图片大小toolbarSticky: false,// Allow to upload any file.},};},

上面这些是基本配置，但是我不建议大家用insertImage这个自带的图片上传功能，所以在上面的 toolbarButtons: [ 'align', 'bold', 'paragraphFormat', 'outdent', 'indent', 'insertLink' ],被我去掉了。

理由如下：
1.froala要求的图片传到后台后的返回格式：{"link": "path/to/image.jpg"}

2.自定义的上传，适用性更广。

用plupload替代默认上传

下载一个icon，把这个icon绝对定位到富文本编辑器中

<i class="el-icon-picture-outline" ref="uploadBtn"></i>

然后去去下载 plupload

npm install plupload --save

然后在组件中引入

import plupload from 'plupload';

然后开始初始化 plupload 的方法和触发的dom。

    //初始化上传initPlupload() {const uploader = new plupload.Uploader({browse_button: this.$refs.uploadBtn, // 触发按钮multi_selection: false,file_data_name: 'upfile',  //定义文件参数filters: this.setFilters(),});uploader.init();// 当文件添加到上传队列后触发uploader.bind('FilesAdded', (uploader, files) => {for (let index = 0; index < files.length; index++) {const file = files[index];if (!this.checkFileName(file)) {this.$message.error(file.name + '文件名不合法');uploader.removeFile(file);}}// 开始上传uploader.start();});// 当队列中的某一个文件正要开始上传前触发uploader.bind('BeforeUpload', async (uploader, file) => {uploader.setOption(this.setConfig(file));});// 当队列中的某一个文件上传完成后触发uploader.bind('FileUploaded', async (uploader, file, info) => {console.log(info, 'info==');const infoParse = info.response && JSON.parse(info.response);console.log(infoParse, 'infoParseinfoParse');// const doMain = process.env.REACT_APP_OSS_HOST;this.insertHtml('<img src=' + infoParse.url + ' />');});return uploader;},// 设置上传配置setConfig(file) {return {url:'http://xxxxxxxxxxxxxxxxxxx',//上传接口地址multipart_params: {//其余参数配置},};},

初始化了 plupload 上传方法之后，并继续对富文本图片的插入做操作。

    //插入方法insertHtml(content) {//设置编辑器获取焦点this.editor.events.focus();// 获取选定对象const selection = getSelection();// 判断是否有最后光标对象存在if (this.lastEditRange) {console.log('jinru=========进入');// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态selection.removeAllRanges();selection.addRange(this.lastEditRange);}//插入内容this.editor.html.insert(content);//记录最后光标停留位置this.lastEditRange = selection.getRangeAt(0);},

还有一步很重要的，对富文本对事件触发，进行操作，写在data里面的config

    events: {//初始化加载initialized: (e, editor) => {console.log(this.$refs.editS);this.editor = this.$refs.editS.getEditor();// this.editor = this.$refs.editS.getEditor();},//添加事件，在每次按键按下时，都记录一下最后停留位置keyup: (e, editor) => {const sel = window.getSelection && window.getSelection();if (sel && sel.rangeCount > 0) {_this.lastEditRange = sel.getRangeAt(0);}},//从别的地方复制进富文本时候的操作，包括图片等'paste.after': async function () {//这里面可以用正则，获取复制到的img里面的 src 去替换，然后再写方法，去替换掉里面的外链图片,  上传到自己的服务器。并且插入到富文本里面中},}

完整的代码我贴出来了

<template><div><div class="uploadImage"><froalaid="edit":tag="'textarea'":config="config"v-model="model"ref="editS"></froala><i class="el-icon-picture-outline" ref="uploadBtn"></i></div></div>
</template><script>
import plupload from 'plupload';
import VueFroala from 'vue-froala-wysiwyg';
const imgReg = /<img.*?(?:>|\/>)/gi;
//匹配src属性
const srcReg = /\ssrc=[\'\"]?([^\'\"]*)[\'\"]?/i;
const http = /(http|https):\/\/([\w.]+\/?)\S*/;
export default {components: {},props: {content: {},},data() {var _this = this;return {config: {editor: null,lastEditRange: null,body: null,language: 'zh_cn',height: 325,quickInsertEnabled: false,charCounterCount: false,//自定义toolbarButtons，功能菜单toolbarButtons: ['align','bold','paragraphFormat','outdent','indent','insertLink',],imageEditButtons: ['imageReplace','imageAlign','imageCaption','imageRemove',],imageUploadMethod: 'POST',// Allow to upload PNG and JPG.imageAllowedTypes: ['jpeg', 'jpg', 'png'],placeholderText: '请输入内容',quickInsertEnabled: false,// Set max file size to 20MB.fileMaxSize: 20 * 1024 * 1024,toolbarSticky: false,// Allow to upload any file.fileAllowedTypes: ['*'],events: {initialized: (e, editor) => {console.log(this.$refs.editS);this.editor = this.$refs.editS.getEditor();// this.editor = this.$refs.editS.getEditor();},//添加事件，在每次按键按下时，都记录一下最后停留位置keyup: (e, editor) => {const sel = window.getSelection && window.getSelection();if (sel && sel.rangeCount > 0) {_this.lastEditRange = sel.getRangeAt(0);}},//复制触发事件'paste.after': async function () {//newContent，把替换后的newContent 插入到富文本中this.insertHtml && this.insertHtml(newContent);},},},};},computed: {model: {get() {return this.content;},set(val) {//触发更新文本数据this.$emit('update:content', val);},},},watch: {},created() {},mounted() {this.initPlupload();},methods: {setFilters() {return {prevent_duplicates: false, // 允许选取重复文件 默认为falsemax_file_size: 1024 * 1024 * 8,mime_types: [// 只允许上传的类型{ title: 'OSSUploadFiles', extensions: 'jpg,png,jpeg,gif' },],};},// 设置上传配置setConfig(file) {// const name = setFileName(file.name);return {url:'/uploadimage',multipart_params: {},};},//初始化上传initPlupload() {const uploader = new plupload.Uploader({browse_button: this.$refs.uploadBtn, // 触发按钮multi_selection: false,file_data_name: 'upfile',filters: this.setFilters(),});uploader.init();// 当文件添加到上传队列后触发uploader.bind('FilesAdded', (uploader, files) => {for (let index = 0; index < files.length; index++) {const file = files[index];if (!this.checkFileName(file)) {this.$message.error(file.name + '文件名不合法');uploader.removeFile(file);}}// 开始上传uploader.start();});// 当队列中的某一个文件正要开始上传前触发uploader.bind('BeforeUpload', async (uploader, file) => {uploader.setOption(this.setConfig(file));});// 当队列中的某一个文件上传完成后触发uploader.bind('FileUploaded', async (uploader, file, info) => {const infoParse = info.response && JSON.parse(info.response);this.insertHtml('<img src=' + infoParse.url + ' />');});return uploader;},// 验证文件名是否合法checkFileName(file) {if (/[%=+#&?\s]/g.test(file.name)) {return false;}return true;},initChange(val) {console.log(val, 55434343);},insertHtml(content) {//设置编辑器获取焦点this.editor.events.focus();// 获取选定对象const selection = getSelection();// 判断是否有最后光标对象存在if (this.lastEditRange) {console.log('jinru=========进入');// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态selection.removeAllRanges();selection.addRange(this.lastEditRange);}//插入内容this.editor.html.insert(content);//记录最后光标停留位置this.lastEditRange = selection.getRangeAt(0);},},
};
</script>
<style lang="less" scoped>
.fr-uploading {display: none;
}
.uploadImage {position: relative;/deep/ .el-icon-picture-outline {font-size: 23px;position: absolute;top: 13px;left: 268px;cursor: pointer;}/deep/ .el-icon-picture-outline:before {color: black;}
}
</style>

刚开始用的时候，这个自带的图片上传是真的坑爹，还要遵循他的规则返回数据。所以遇到坑爹插件时，不想自己写的时候，可以想办法替代掉他原来掉的功能。