From 958f5a5abc6b5d4efee768d0b181078c25d4199e Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期五, 21 一月 2022 19:09:38 +0800
Subject: [PATCH] 升级富文本，可上传视频
---
src/components/WangEnduit/index.vue | 58 +++++++++++---
package.json | 2
src/components/WangEnduit/index_old.vue | 141 +++++++++++++++++++++++++++++++++++
3 files changed, 187 insertions(+), 14 deletions(-)
diff --git a/package.json b/package.json
index 1e23c28..6e027ff 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
"vue": "2.6.10",
"vue-router": "3.0.6",
"vuex": "3.1.0",
- "wangeditor": "^3.1.1"
+ "wangeditor": "^4.7.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
diff --git a/src/components/WangEnduit/index.vue b/src/components/WangEnduit/index.vue
index 3e0d96d..53f61fb 100644
--- a/src/components/WangEnduit/index.vue
+++ b/src/components/WangEnduit/index.vue
@@ -40,16 +40,16 @@
mounted() {
self = this
this.editor = new E(this.$refs.editorElem)
- this.editor.customConfig.focus = false
- this.editor.customConfig.onchange = (html) => {
+ this.editor.config.focus = false
+ this.editor.config.onchange = (html) => {
this.editorContent = html
this.catchdata(this.editorContent) // 鎶婅繖涓猦tml閫氳繃catchData鐨勬柟娉曚紶鍏ョ埗缁勪欢
}
// 鍘绘帀鎻掑叆缃戠粶鍥剧墖
- this.editor.customConfig.showLinkImg = false
+ this.editor.config.showLinkImg = false
// 绮樿创鏉ョ殑鍐呭杩囨护鍥剧墖
- this.editor.customConfig.pasteIgnoreImg = true
- this.editor.customConfig.menus = [ // 鑿滃崟閰嶇疆
+ this.editor.config.pasteIgnoreImg = true
+ this.editor.config.menus = [ // 鑿滃崟閰嶇疆
'head', // 鏍囬
'bold', // 绮椾綋
'fontSize', // 瀛楀彿
@@ -65,26 +65,29 @@
'quote', // 寮曠敤
// 'emoticon', // 琛ㄦ儏
'image', // 鎻掑叆鍥剧墖
+ 'video', // 鎻掑叆瑙嗛
// 'table', // 琛ㄦ牸
- // 'code', // 鎻掑叆浠ｇ爜
+ 'code', // 鎻掑叆浠ｇ爜
+ 'video',
'undo', // 鎾ら攢
'redo' // 閲嶅
]
// 涓嬮潰鏄渶閲嶈鐨勭殑鏂规硶
- // this.editor.customConfig.withCredentials = true
+ // this.editor.config.withCredentials = true
// 灏嗗浘鐗囧ぇ灏忛檺鍒朵负 5M
- this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
+ this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024
// 闄愬埗涓�娆℃渶澶氫笂浼� 1 寮犲浘鐗�
- this.editor.customConfig.uploadImgMaxLength = 1
+ this.editor.config.uploadImgMaxLength = 1
// 涓嶅拷鐣ョ矘璐村唴瀹逛腑鐨勫浘鐗�
- this.editor.customConfig.pasteIgnoreImg = false
- this.editor.customConfig.customUploadImg = function(files, insert) {
+ this.editor.config.pasteIgnoreImg = false
+ this.editor.config.customUploadImg = function(files, insert) {
// files 鏄� input 涓�変腑鐨勬枃浠跺垪琛�
// insert 鏄幏鍙栧浘鐗� url 鍚庯紝鎻掑叆鍒扮紪杈戝櫒鐨勬柟娉�
// 鍥犱负file鏄釜FormData鏍煎紡鐨勫璞℃墍浠ュ彲浠ョ洿鎺ラ�氳繃鎺ュ彛寮�濮嬩笂浼狅紝涓嶉渶瑕佸仛澶氫綑鎿嶄綔
// 铏界劧鏂囨。璇存槸FormData鏍煎紡锛屼絾鏄垜瀹為檯浣跨敤闇�瑕佷互涓嬫搷浣�
const formData = new FormData()
formData.append('file', files[0])
+ console.log(formData, 'formDataformDataformDataformDataformData')
self.postFN(
{
url: 'admin/image/upload?folderCode=IMG',
@@ -103,13 +106,42 @@
}
)
}
+
+ // 閰嶇疆瀵屾枃鏈棰戜笂浼�
+ this.editor.config.customUploadVideo = function(files, insert) {
+ // files 鏄� input 涓�変腑鐨勬枃浠跺垪琛�
+ // insert 鏄幏鍙栬棰� url 鍚庯紝鎻掑叆鍒扮紪杈戝櫒鐨勬柟娉�
+ const formDataVideo = new FormData()
+ formDataVideo.append('file', files[0])
+ console.log(formDataVideo, 'formDataVideoformDataVideoformDataVideoformDataVideo')
+ self.postFN(
+ {
+ url: 'admin/image/upload?folderCode=VIDEO',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formDataVideo,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'xxxx'
+ }
+ }
+ },
+ inf => {
+ // 涓婁紶瑙嗛锛岃繑鍥炵粨鏋滐紝灏嗚棰戝湴鍧�鎻掑叆鍒扮紪杈戝櫒涓�
+ insert(inf.imgUrl)
+ console.log(inf.imgUrl, '99999999999999999999999999')
+ }
+ )
+ }
+
// 鑷畾涔夐敊璇彁绀�
- this.editor.customConfig.customAlert = function(info) {
+ this.editor.config.customAlert = function(info) {
// info 鏄渶瑕佹彁绀虹殑鍐呭
self.$messagewarn(info)
}
// 杩囨护word澶嶅埗
- this.editor.customConfig.pasteTextHandle = function(content) {
+ this.editor.config.pasteTextHandle = function(content) {
var html = content
html = html.replace(/<\/?SPANYES[^>]*>/gi, '')// 绉婚櫎span
html = html.replace(/<\!\-\-(.|[\r\n])*?\-\->/gi, '')// 绉婚櫎娉ㄩ噴
diff --git a/src/components/WangEnduit/index_old.vue b/src/components/WangEnduit/index_old.vue
new file mode 100644
index 0000000..3e0d96d
--- /dev/null
+++ b/src/components/WangEnduit/index_old.vue
@@ -0,0 +1,141 @@
+<template>
+ <div id="wangeditor">
+ <div ref="editorElem" style="text-align:left;" />
+ </div>
+</template>
+<script>
+import E from 'wangeditor'
+let self
+export default {
+ name: 'EditorElem',
+ props: {
+ catchdata: {
+ type: Function,
+ default() {}
+ },
+ content: {
+ type: String,
+ default: ''
+ },
+ rangenum: {
+ type: Range,
+ default: null
+ }
+ },
+ data() {
+ return {
+ editor: null,
+ editorContent: ''
+ }
+ }, // 鎺ユ敹鐖剁粍浠剁殑鏂规硶
+ watch: {
+ content(value) {
+ // console.log("娌℃湁鍏夋爣鍒欐墽琛岋紝鏈夊厜鏍囦笉鎵ц锛屽洖鏄�--瑙ｅ喅杈撳叆鏃跺厜鏍囪�佽烦鍒版渶搴曢儴", this.content, this.rangenum)
+ if (this.rangenum == null) {
+ // this.content.setRange(this.rangenum)
+ this.editor.txt.html(value)
+ }
+ }
+ },
+ mounted() {
+ self = this
+ this.editor = new E(this.$refs.editorElem)
+ this.editor.customConfig.focus = false
+ this.editor.customConfig.onchange = (html) => {
+ this.editorContent = html
+ this.catchdata(this.editorContent) // 鎶婅繖涓猦tml閫氳繃catchData鐨勬柟娉曚紶鍏ョ埗缁勪欢
+ }
+ // 鍘绘帀鎻掑叆缃戠粶鍥剧墖
+ this.editor.customConfig.showLinkImg = false
+ // 绮樿创鏉ョ殑鍐呭杩囨护鍥剧墖
+ this.editor.customConfig.pasteIgnoreImg = true
+ this.editor.customConfig.menus = [ // 鑿滃崟閰嶇疆
+ 'head', // 鏍囬
+ 'bold', // 绮椾綋
+ 'fontSize', // 瀛楀彿
+ 'fontName', // 瀛椾綋
+ 'italic', // 鏂滀綋
+ 'underline', // 涓嬪垝绾�
+ 'strikeThrough', // 鍒犻櫎绾�
+ 'foreColor', // 鏂囧瓧棰滆壊
+ 'backColor', // 鑳屾櫙棰滆壊
+ 'link', // 鎻掑叆閾炬帴
+ 'list', // 鍒楄〃
+ 'justify', // 瀵归綈鏂瑰紡
+ 'quote', // 寮曠敤
+ // 'emoticon', // 琛ㄦ儏
+ 'image', // 鎻掑叆鍥剧墖
+ // 'table', // 琛ㄦ牸
+ // 'code', // 鎻掑叆浠ｇ爜
+ 'undo', // 鎾ら攢
+ 'redo' // 閲嶅
+ ]
+ // 涓嬮潰鏄渶閲嶈鐨勭殑鏂规硶
+ // this.editor.customConfig.withCredentials = true
+ // 灏嗗浘鐗囧ぇ灏忛檺鍒朵负 5M
+ this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
+ // 闄愬埗涓�娆℃渶澶氫笂浼� 1 寮犲浘鐗�
+ this.editor.customConfig.uploadImgMaxLength = 1
+ // 涓嶅拷鐣ョ矘璐村唴瀹逛腑鐨勫浘鐗�
+ this.editor.customConfig.pasteIgnoreImg = false
+ this.editor.customConfig.customUploadImg = function(files, insert) {
+ // files 鏄� input 涓�変腑鐨勬枃浠跺垪琛�
+ // insert 鏄幏鍙栧浘鐗� url 鍚庯紝鎻掑叆鍒扮紪杈戝櫒鐨勬柟娉�
+ // 鍥犱负file鏄釜FormData鏍煎紡鐨勫璞℃墍浠ュ彲浠ョ洿鎺ラ�氳繃鎺ュ彛寮�濮嬩笂浼狅紝涓嶉渶瑕佸仛澶氫綑鎿嶄綔
+ // 铏界劧鏂囨。璇存槸FormData鏍煎紡锛屼絾鏄垜瀹為檯浣跨敤闇�瑕佷互涓嬫搷浣�
+ const formData = new FormData()
+ formData.append('file', files[0])
+ self.postFN(
+ {
+ url: 'admin/image/upload?folderCode=IMG',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'xxxx'
+ }
+ }
+ },
+ inf => {
+ insert(inf.imgUrl)
+ }
+ )
+ }
+ // 鑷畾涔夐敊璇彁绀�
+ this.editor.customConfig.customAlert = function(info) {
+ // info 鏄渶瑕佹彁绀虹殑鍐呭
+ self.$messagewarn(info)
+ }
+ // 杩囨护word澶嶅埗
+ this.editor.customConfig.pasteTextHandle = function(content) {
+ var html = content
+ html = html.replace(/<\/?SPANYES[^>]*>/gi, '')// 绉婚櫎span
+ html = html.replace(/<\!\-\-(.|[\r\n])*?\-\->/gi, '')// 绉婚櫎娉ㄩ噴
+ html = html.replace(/<(\w[^>]*) {2}lang=([^|>]*)([^>]*)/gi, '<$1$3')// 绉婚櫎lang灞炴��
+ html = html.replace(/<\\?\?xml[^>]*>/gi, '')// 绉婚櫎xml鍜岀浉鍏虫弿杩�
+ html = html.replace(/<\/?\w+:[^>]*>/gi, '')// 绉婚櫎xml鍛藉悕绌洪棿鐨勬爣绛�
+ html = html.replace(/ /gi, '')// 绉婚櫎绌烘牸
+ html = html.replace(/^\s+|\s+$/g, '')
+ html = html.replace(/<o:p> <\/o:p>/g, '')// 绉婚櫎鏍囩
+ html = html.replace(/<br\/>/g, '')// 绉婚櫎br鏍囩
+ return html
+ }
+ this.editor.create() // 鍒涘缓瀵屾枃鏈疄渚�
+ // if (!this.content) {
+ // // this.editor.txt.html('璇风紪杈戝唴瀹�1')
+ // }
+ }
+}
+</script>
+<style lang="scss" scoped>
+#wangeditor {
+ position: sticky;
+ /*璁剧疆瀵屾枃鏈楂樺害*/
+ .w-e-text-container{
+ height: 500px !important;
+ }
+}
+</style>
+
--
Gitblit v1.8.0