Vue使用vue-html5-editor的富文本编辑器

喜乐人 發表於 2019-7-29 10:58:00

Vue使用vue-html5-editor的富文本编辑器

最近由于工作的需求，需要在后台管理界面中，添加一个富文本编辑器。
 
富文本编辑器，我们之前用过百度的ueditor，在传统模式开发的时候还是很方便的，可以很便利的进行内容编辑，然后获取到编辑内容的信息
百度的ueditor地址：
https://ueditor.baidu.com/website/
 
但是这次是要整合一个vue的，还没有这么搞过，就试试吧。
富文本编辑器的核心原理其实蛮简单的，但是自己写还是很麻烦，没有那个时间。
1.考虑方式
有两种方式，一种是把ueditor进行vue的移植改造。把传统模式改成webpack可用的模式就可以了。
但是，我觉得ueditor已经很久没有维护了，界面也太丑了，所以试试别的能用的。
 
2.踩坑 froala editor...
搞了很久，按这位老兄说的
https://www.jianshu.com/p/cb782b957a13
也许是因为这个本身是收费的，也许是我哪个地方有问题，没搞出来。
 
3.改换用vue-html5-editor
改换了以后就成功了，上图看看
<img src="https://img2018.cnblogs.com/blog/939469/201907/939469-20190729103812751-385025779.png">
 
先安装
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:false;">npm install vue-html5-editor --save</pre>
</div>
安装完毕之后引入到项目中
这个是编辑的main.js，按照官方说明 https://gitee.com/tai/vue-html5-editor 以全局引入的方式引入的
<div class="cnblogs_code">
<pre>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'</pre>
<pre>], // 扩展模块，具体可以参考examples或查看源码 // extended modules modules: { // omit,reference to source code of build-in modules } })</pre>
</div>
 
 在模块中引入
模块 contents.vue
<div class="cnblogs_code">
<pre><template>
<div id="contents">
<h1>添加内容</h1>
 
<vue-html5-editor :content="content" @change="updateData" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>
</div>
</template>

<script>

export default {
name: 'Contents',
data () {
return {
 id: '',
 content: ''
}
},
methods: {
updateData (e) {
 this.content = e
}
}
}
</script>


<style scoped>

</style></pre>
</div>
 
嘿嘿，运行起来以后，你会发现，有框，但按钮不在，因为这是个坑。按钮是个开源组件 font-awesome
这个开源组件就是个图标库，有多种引入方式，我采用的是css全局引入的方式，
先下载了http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip
解压放入 src/assets，再到App.vue的style引入
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><style>
@import 'assets/font-awesome-4.7.0/css/font-awesome.min.css';
</style></pre>
</div>
 到此，引入就告一段落。
 
添加文件上传的部分。
文件上传我有两个部分
图片文件上传: http://localhost:8080/files/upload
这个上传要求请求方式为POST，form表单的文件部分字段名为file
返回如下
<div class="cnblogs_code">
<pre>{
status: 200,
data:{
 filename: "2019072935563.png",
 fileurl: "http://localhost:8080/files/2019072935563.png"
},
message: null
}
　　</pre>
</div>
 
图片文件获取: http://localhost:8080/files/{imgname}
这样就完成了所有功能
  
来源：https://www.cnblogs.com/enroban/p/11262716.html

頁: [1]

琼殿技术论坛's Archiver

Vue使用vue-html5-editor的 富文本编辑器

Vue使用vue-html5-editor的富文本编辑器