vue获取编辑器纯文字_Vue使用vue-html5-editor的 富文本编辑器

最近由于工作的需求，需要在后台管理界面中，添加一个富文本编辑器。

富文本编辑器，我们之前用过百度的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}

这样就完成了所有功能