最近由于工作的需求,需要在后台管理界面中,添加一个富文本编辑器。
富文本编辑器,我们之前用过百度的ueditor,在传统模式开发的时候还是很方便的,可以很便利的进行内容编辑,然后获取到编辑内容的信息
百度的ueditor地址:
但是这次是要整合一个vue的,还没有这么搞过,就试试吧。
富文本编辑器的核心原理其实蛮简单的,但是自己写还是很麻烦,没有那个时间。
1.考虑方式
有两种方式,一种是把ueditor进行vue的移植改造。把传统模式改成webpack可用的模式就可以了。
但是,我觉得ueditor已经很久没有维护了,界面也太丑了,所以试试别的能用的。
2.踩坑 froala editor...
搞了很久,按这位老兄说的
也许是因为这个本身是收费的,也许是我哪个地方有问题,没搞出来。
3.改换用vue-html5-editor
改换了以后就成功了,上图看看
先安装
npm install vue-html5-editor --save
安装完毕之后引入到项目中
import VueHtml5Editor from 'vue-html5-editor'Vue.use(VueHtml5Editor, {//全局组件名称,使用new VueHtml5Editor(options)时该选项无效
//global component name
name: 'vue-html5-editor',//是否显示模块名称,开启的话会在工具栏的图标后台直接显示名称
//if set true,will append module name to toolbar after icon
showModuleName: false,//自定义各个图标的class,默认使用的是font-awesome提供的图标
//custom icon class of built-in modules,default using font-awesome
icons: {
text:'fa fa-pencil',
color:'fa fa-paint-brush',
font:'fa fa-font',
align:'fa fa-align-justify',
list:'fa fa-list',
link:'fa fa-chain',
unlink:'fa fa-chain-broken',
tabulation:'fa fa-table',
image:'fa fa-file-image-o',
hr:'fa fa-minus',
eraser:'fa fa-eraser',
undo:'fa-undo fa','full-screen': 'fa fa-arrows-alt',
info:'fa fa-info'},//配置图片模块
//config image module
image: {//文件最大体积,单位字节 max file size
sizeLimit: 512 * 1024,
//上传参数,默认把图片转为base64而不上传
//upload config,default null and convert image to base64
upload: {
url:'http://localhost:8080/files/upload',
headers: {},
params: {},
fieldName:'file'},//压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
//compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
//set null to disable compression
compress: null,//响应数据处理,最终返回图片链接
//handle response data,return image url
uploadHandler (responseText) {//default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
var json =JSON.parse(responseText)return json.data.fileurl
}
},//语言,内建的有英文(en-us)和中文(zh-cn)
//default en-us, en-us and zh-cn are built-in
language: 'zh-cn',//自定义语言
i18n: {//specify your language here
'zh-cn': {'align': '对齐方式','image': '图片','list': '列表','link': '链接','unlink': '去除链接','table': '表格','font': '文字','full screen': '全屏','text': '排版','eraser': '格式清除','info': '关于','color': '颜色','please enter a url': '请输入地址','create link': '创建链接','bold': '加粗','italic': '倾斜','underline': '下划线','strike through': '删除线','subscript': '上标','superscript': '下标','heading': '标题','font name': '字体','font size': '文字大小','left justify': '左对齐','center justify': '居中','right justify': '右对齐','ordered list': '有序列表','unordered list': '无序列表','fore color': '前景色','background color': '背景色','row count': '行数','column count': '列数','save': '确定','upload': '上传','progress': '进度','unknown': '未知','please wait': '请稍等','error': '错误','abort': '中断','reset': '重置'}
},//隐藏不想要显示出来的模块
//the modules you don't want
hiddenModules: ['info'],//自定义要显示的模块,并控制顺序
//keep only the modules you want and customize the order.
//can be used with hiddenModules together
visibleModules: ['text','color','font','align','list','link','unlink','tabulation','image','hr','eraser','undo','full-screen','info'
],//扩展模块,具体可以参考examples或查看源码 //extended modules modules: {//omit,reference to source code of build-in modules } })
在模块中引入
模块 contents.vue
添加内容
name:'Contents',
data () {return{
id:'',
content:''}
},methods: {
updateData (e) {this.content =e
}
}
}
嘿嘿,运行起来以后,你会发现,有框,但按钮不在,因为这是个坑。 按钮是个开源组件 font-awesome
这个开源组件就是个图标库,有多种引入方式,我采用的是css全局引入的方式,
解压放入 src/assets,再到App.vue的style引入
@import 'assets/font-awesome-4.7.0/css/font-awesome.min.css';
到此,引入就告一段落。
添加文件上传的部分。
文件上传我有两个部分
图片文件上传: http://localhost:8080/files/upload
这个上传要求请求方式为POST,form表单的文件部分字段名为file
返回如下
{
status:200,
data:{
filename:"2019072935563.png",
fileurl:"http://localhost:8080/files/2019072935563.png"},
message:null}
图片文件获取: http://localhost:8080/files/{imgname}
这样就完成了所有功能