我是靠谱客的博主 结实店员,最近开发中收集的这篇文章主要介绍使用wangEditor在vue中实现全屏的功能使用wangEditor在vue中实现全屏的功能,觉得挺不错的,现在分享给大家,希望可以做个参考。
概述
使用wangEditor在vue中实现全屏的功能
wangEditor是一款轻量、好用的富文本编辑器,但是没有全屏功能。作者提供了实现全屏功能的Demo和插件。我的项目使用vue+springboot前后端分离模式,而我本人是一个写Java的,所以并不十分精通vue。在网上找了很久也没有找到合适的方法,只能自己动手了。在此记录一下,希望可以帮助到其他人。
我是根据插件的的方法进行修改 wangEditor全屏插件.
- 首先要在vue中安装jQuery(安装完成后可以在package.json中修改版本)
npm install jquery --save
- 然后在main.js中引入jQuery
import 'jquery'
- 在wangEditor.vue中代码
<template>
<div class="clearfix">
<!-- 富文本编辑框 -->
<div id="wangEditorElem" style="height:210px;background: #ffffff;" />
</div>
</template>
<script>
import E from 'wangeditor'
import $ from 'jquery'
export default {
name: 'WangEditor',
props: {
content: {
type: String,
required: true
}
},
data() {
return {
wEditor: '',
name: ''
}
},
// 用来回显内容(监控父组件中content变化)
watch: {
content: function(newVal, oldVal) {
this.wEditor.txt.html(newVal)
}
},
mounted() {
// wangeditor
this.wEditor = new E('#wangEditorElem')
// 上传图片到服务器,base64形式
// this.wEditor.customConfig.uploadImgShowBase64 = true
this.wEditor.customConfig.uploadFileName = 'myFile'
this.wEditor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
// 上传文件个数
this.wEditor.customConfig.uploadImgMaxLength = 3
// 绑定上传图片的后端地址
this.wEditor.customConfig.uploadImgServer = 'upload.do'
// 隐藏网络图片
this.wEditor.customConfig.showLinkImg = false
this.wEditor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'foreColor', // 文字颜色
'quote', // 引用
'image', // 插入图片
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
this.wEditor.customConfig.uploadImgHooks = {
fail: function(xhr, editor, result) {
this.$message.error('上传图片失败')
},
error: function(xhr, editor) {
this.$message.error('上传图片出错')
},
timeout: function(xhr, editor) {
this.$message.error('上传图片超时')
},
// 自定义上传图片,回显图片
customInsert: function(insertImg, result, editor) {
var url = result.data
// url 是后台返回的上传图片的路径
insertImg(url)
}
}
// 创建一个富文本编辑器
this.wEditor.create()
// 全屏
$('#wangEditorElem' + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="javascript:window.toggleFullscreen('' + '#wangEditorElem' + '')">全屏</a></div>')
// 富文本内容
this.wEditor.txt.html(this.content)
window['toggleFullscreen'] = data => {
this.toggleFullscreen(data)
}
},
methods: {
toggleFullscreen: function(editorSelector) {
$(editorSelector).toggleClass('fullscreen-editor')
if ($(editorSelector + ' ._wangEditor_btn_fullscreen').text() === '全屏') {
$(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏')
} else {
$(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏')
}
},
// 获取编辑器中内容
getContent() {
return this.wEditor.txt.html()
},
setContent() {
this.wEditor.txt.html(this.content)
},
clearContent() {
this.wEditor.txt.clear()
}
}
}
</script>
<style>
.w-e-menu{
z-index: 2 !important;
}
.w-e-text-container {
/* 只有加上 !important设置样式才管用 */
height: 300px !important;
z-index: 1 !important;
}
.w-e-toolbar {
flex-wrap: wrap;
-webkit-box-lines: multiple;
}
.w-e-toolbar .w-e-menu:hover{
z-index: 10002!important;
}
.w-e-menu a {
text-decoration: none;
}
.fullscreen-editor {
position: fixed !important;
width: 100% !important;
height: 100% !important;
left: 0px !important;
top: 0px !important;
background-color: white;
z-index: 9999;
}
.fullscreen-editor .w-e-text-container {
width: 100% !important;
height: 95% !important;
}
</style>
- 在需要用到富文本的地方调用就可以了
<div>
<WE ref="we" :content="content" style="height:350px" />
</div>
<script>
import WE from '@/components/wangEditor'
export default {
name: 'editor',
components: {
WE
},
data() {
return {
content: ''
}
}
}
</script>
写在最后:把wangEditor做为单独组件也是借鉴了很多大佬们成果,这个代码也是融合了一些其他的功能,例如可以被其他元素遮挡(在css中设置)、图片上传等。代码还有很多不足,希望大佬们谅解或者提出改进意见。
最后
以上就是结实店员为你收集整理的使用wangEditor在vue中实现全屏的功能使用wangEditor在vue中实现全屏的功能的全部内容,希望文章能够帮你解决使用wangEditor在vue中实现全屏的功能使用wangEditor在vue中实现全屏的功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复