mirror of
https://gitee.com/dromara/RuoYi-Vue-Plus.git
synced 2026-09-21 02:25:56 +08:00
Pre Merge pull request !213 from 庆余年/dev
This commit is contained in:
庆余年
Gitee
commit
333fa4faac
@ -36,6 +36,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"@wangeditor/editor-for-vue": "^1.0.2",
|
||||
"axios": "0.24.0",
|
||||
"clipboard": "2.0.8",
|
||||
"core-js": "3.19.1",
|
||||
@ -51,7 +52,7 @@
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "5.0.2",
|
||||
"sortablejs": "1.10.2",
|
||||
"vue": "2.6.12",
|
||||
"vue": "2.6.14",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.5",
|
||||
"vue-meta": "2.4.0",
|
||||
@ -76,7 +77,7 @@
|
||||
"sass-loader": "10.1.1",
|
||||
"script-ext-html-webpack-plugin": "2.1.5",
|
||||
"svg-sprite-loader": "5.1.1",
|
||||
"vue-template-compiler": "2.6.12"
|
||||
"vue-template-compiler": "2.6.14"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
|
||||
202
ruoyi-ui/src/components/WEditor/index.vue
Normal file
202
ruoyi-ui/src/components/WEditor/index.vue
Normal file
@ -0,0 +1,202 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="border: 1px solid #ccc; margin-top: 10px;">
|
||||
<!-- 工具栏 -->
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editor"
|
||||
:defaultConfig="toolbarConfig"
|
||||
/>
|
||||
<!-- 编辑器 -->
|
||||
<Editor
|
||||
style="height: 400px; overflow-y: hidden;"
|
||||
:defaultConfig="editorConfig"
|
||||
v-model="currentValue"
|
||||
@onChange="onChange"
|
||||
@onCreated="onCreated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
name: "WEditor",
|
||||
components: { Editor, Toolbar },
|
||||
props: {
|
||||
/* 编辑器的内容 */
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
/* 高度 */
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
/* 最小高度 */
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
/* 只读 */
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 上传文件大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
/* 类型（base64格式、url格式） */
|
||||
type: {
|
||||
type: String,
|
||||
default: "url",
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
toolbarConfig: {
|
||||
// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
|
||||
// excludeKeys: [ /* 隐藏哪些菜单 */ ],
|
||||
},
|
||||
editorConfig: {
|
||||
placeholder: '请输入内容...',
|
||||
// autoFocus: false,
|
||||
// 所有的菜单配置，都要在 MENU_CONF 属性下
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
server: process.env.VUE_APP_BASE_API + "/system/oss/upload",
|
||||
// 自定义增加 http header
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken()
|
||||
},
|
||||
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
||||
allowedFileTypes: ['image/*'],
|
||||
// 最多可上传几个文件，默认为 100
|
||||
maxNumberOfFiles: 10,
|
||||
// 单个文件的最大体积限制，默认为 5M
|
||||
maxFileSize: 5 * 1024 * 1024, // 5M
|
||||
// form-data fieldName ，默认值 'wangeditor-uploaded-image'
|
||||
fieldName: 'file',
|
||||
// 自定义插入图片
|
||||
customInsert(res, insertFn) {
|
||||
// res 即服务端的返回结果
|
||||
// 从 res 中找到 url alt href ，然后插图图片
|
||||
const url = res.data.url
|
||||
const alt = res.data.fileName
|
||||
const href = null
|
||||
insertFn(url, alt, href)
|
||||
},
|
||||
// 单个文件上传成功之后
|
||||
onSuccess(file, res) { // JS 语法
|
||||
console.log(`${file.name} 上传成功`, res)
|
||||
},
|
||||
// 单个文件上传失败
|
||||
onFailed(file, res) { // JS 语法
|
||||
console.error(`${file.name} 上传失败`, res)
|
||||
},
|
||||
// 上传错误，或者触发 timeout 超时
|
||||
onError(file, err, res) { // JS 语法
|
||||
console.error(`${file.name} 上传出错`, err, res)
|
||||
},
|
||||
},
|
||||
uploadVideo: {
|
||||
server: process.env.VUE_APP_BASE_API + "/system/oss/upload",
|
||||
// 自定义增加 http header
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken()
|
||||
},
|
||||
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
||||
allowedFileTypes: ['video/*'],
|
||||
// 最多可上传几个文件，默认为 5
|
||||
maxNumberOfFiles: 1,
|
||||
// 单个文件的最大体积限制，默认为 5M
|
||||
maxFileSize: 20 * 1024 * 1024, // 5M
|
||||
// form-data fieldName ，默认值 'wangeditor-uploaded-image'
|
||||
fieldName: 'file',
|
||||
// 超时时间，默认为 30 秒
|
||||
timeout: 15 * 1000, // 15 秒
|
||||
// 自定义插入图片
|
||||
customInsert(res, insertFn) {
|
||||
const url = res.data.url
|
||||
const poster = res.data.poster
|
||||
// res 即服务端的返回结果
|
||||
// 从 res 中找到 url poster ，然后插入视频
|
||||
insertFn(url, poster)
|
||||
},
|
||||
// 单个文件上传成功之后
|
||||
onSuccess(file, res) { // JS 语法
|
||||
console.log(`${file.name} 上传成功`, res)
|
||||
},
|
||||
// 单个文件上传失败
|
||||
onFailed(file, res) { // JS 语法
|
||||
console.log(`${file.name} 上传失败`, res)
|
||||
},
|
||||
// 上传错误，或者触发 timeout 超时
|
||||
onError(file, err, res) { // JS 语法
|
||||
console.log(`${file.name} 上传出错`, err, res)
|
||||
},
|
||||
},
|
||||
},
|
||||
readOnly: this.readOnly,
|
||||
codeSelectLang:{
|
||||
codeLangs: [
|
||||
{ text: 'CSS', value: 'css' },
|
||||
{ text: 'HTML', value: 'html' },
|
||||
{ text: 'XML', value: 'xml' },
|
||||
// 其他
|
||||
]
|
||||
}
|
||||
},
|
||||
currentValue: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let style = {};
|
||||
if (this.minHeight) {
|
||||
style.minHeight = `${this.minHeight}px`;
|
||||
}
|
||||
if (this.height) {
|
||||
style.height = `${this.height}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val !== this.currentValue) {
|
||||
this.currentValue = val === null ? "" : val;
|
||||
if (this.editor) {
|
||||
this.editor.setContent(this.currentValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
const editor = this.editor
|
||||
if (editor == null) return
|
||||
editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
|
||||
},
|
||||
methods: {
|
||||
onCreated(editor) {
|
||||
this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
|
||||
},
|
||||
onChange(editor) {
|
||||
this.$emit("input", editor.getHtml());
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
@ -24,7 +24,7 @@ import Pagination from "@/components/Pagination";
|
||||
// 自定义表格工具组件
|
||||
import RightToolbar from "@/components/RightToolbar"
|
||||
// 富文本组件
|
||||
import Editor from "@/components/Editor"
|
||||
import Editor from "@/components/WEditor"
|
||||
// 文件上传组件
|
||||
import FileUpload from "@/components/FileUpload"
|
||||
// 图片上传组件
|
||||
|
||||
Loading…
Reference in New Issue
Block a user