From 8d30e5d8d3d82fba826de46d33fc7be22e993f51 Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期四, 11 四月 2024 11:24:25 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
Source/ProjectWeb/src/views/custom-ui/test.vue | 285 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 214 insertions(+), 71 deletions(-)
diff --git a/Source/ProjectWeb/src/views/custom-ui/test.vue b/Source/ProjectWeb/src/views/custom-ui/test.vue
index c4ac63c..b405076 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test.vue
+++ b/Source/ProjectWeb/src/views/custom-ui/test.vue
@@ -1,93 +1,236 @@
<template>
- <div>
- <quill-editor
- class="editor"
- v-model="content"
- ref="quillEditor"
- :options="editorOptions"
- ></quill-editor>
- </div>
+ <div id='quillEditorQiniu'>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload begin-->
+ <el-upload
+ :accept="'image'"
+ :action="uploadImgUrl"
+ :before-upload="beforeEditorUpload"
+ :headers="headers"
+ :on-error="uploadEditorError"
+ :on-success="uploadEditorSuccess"
+ :show-file-list="false"
+ class="avatar-uploader">
+ </el-upload>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end-->
+ <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
+ </quill-editor>
+ </div>
</template>
<script>
+import {getToken} from "@/util/auth";
+
const toolbarOptions = [
- ['bold', 'italic', 'underline', 'strike'], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
- ['blockquote', 'code-block'], // 寮曠敤 浠ｇ爜鍧�
- [{ header: 1 }, { header: 2 }], // 1銆�2 绾ф爣棰�
- [{ list: 'ordered' }, { list: 'bullet' }], // 鏈夊簭銆佹棤搴忓垪琛�
- [{ script: 'sub' }, { script: 'super' }], // 涓婃爣/涓嬫爣
- [{ indent: '-1' }, { indent: '+1' }], // 缂╄繘
- // [{'direction': 'rtl'}], // 鏂囨湰鏂瑰悜
- [{ size: ['small', false, 'large', 'huge'] }], // 瀛椾綋澶у皬
- [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
- [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
- [{ font: [] }], // 瀛椾綋绉嶇被
- [{ align: [] }], // 瀵归綈鏂瑰紡
- ['clean'], // 娓呴櫎鏂囨湰鏍煎紡
- // ['link', 'image', 'video'] // 閾炬帴銆佸浘鐗�
- ['link', 'image'] // 閾炬帴銆佸浘鐗�
-]
+ ['bold', 'italic', 'underline', 'strike'], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ['blockquote', 'code-block'], // 寮曠敤 浠ｇ爜鍧�
+ [{header: 1}, {header: 2}], // 1銆�2 绾ф爣棰�
+ [{list: 'ordered'}, {list: 'bullet'}], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{script: 'sub'}, {script: 'super'}], // 涓婃爣/涓嬫爣
+ [{indent: '-1'}, {indent: '+1'}], // 缂╄繘
+ [{size: ['small', false, 'large', 'huge']}], // 瀛椾綋澶у皬
+ [{header: [1, 2, 3, 4, 5, 6, false]}], // 鏍囬
+ [{color: []}, {background: []}], // 瀛椾綋棰滆壊 瀛椾綋鑳屾櫙棰滆壊
+ [{font: []}], // 瀛椾綋绉嶇被
+ [{align: []}], // 瀵归綈鏂瑰紡
+ ['link', 'image'], // 閾炬帴 鍥剧墖
+ ['clean'] // 娓呴櫎鏂囨湰鏍煎紡
+];
export default {
- name:'test',
data() {
return {
- content: '',
- editorOptions: {
- // Quill缂栬緫鍣ㄧ殑閫夐」
- placeholder: '璇疯緭鍏ュ唴瀹癸紒',
- modules:{
- toolbar:{
- container:toolbarOptions
+ headers: {
+ Authorization: "Bearer " + getToken(),
+ },
+ uploadImgUrl: "/v1/admin/common/upload",
+ uploadUrlPath: "娌℃湁鏂囦欢涓婁紶",
+ quillUpdateImg: false,
+ content: '', //鏈�缁堜繚瀛樼殑鍐呭
+ editorOption: {
+ theme: 'snow',
+ placeholder: '璇疯緭鍏ュ唴瀹�',
+ modules: {
+ toolbar: {
+ container: toolbarOptions, // 宸ュ叿鏍�
+ handlers: {
+ image: function (value) {
+ if (value) {
+ document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
+ } else {
+ this.quill.format('image', false);
+ }
+ },
+ link: function (value) {
+ if (value) {
+ const href = prompt('璇疯緭鍏ラ摼鎺ュ湴鍧�锛�');
+ this.quill.format('link', href)
+ } else {
+ this.quill.format('link', false)
+ }
+ },
+ }
}
}
-
- }
- };
- },
- mounted() {
- let self = this;
- const editor = this.$refs.quillEditor.quill;
- const toolbar = editor.getModule('toolbar');
- toolbar.addHandler('image', () => {
- self.selectLocalImage();
- });
+ },
+ }
},
methods: {
- selectLocalImage() {
- const input = document.createElement('input');
- input.setAttribute('type', 'file');
- input.click();
- input.onchange = () => {
- const file = input.files[0];
- if (file) {
- // 鍦ㄨ繖閲岃皟鐢ㄤ綘鐨勫浘鐗囦笂浼犻�昏緫锛屽苟鑾峰彇鍥剧墖鐨刄RL
- // 鍋囪浣犱笂浼犲悗寰楀埌浜嗗浘鐗嘦RL
- const url = '浣犵殑鍥剧墖URL';
- // 鎻掑叆鍥剧墖鍒扮紪杈戝櫒
- this.insertToEditor(url);
- }
- };
+ //涓婁紶鍥剧墖涔嬪墠async
+ beforeEditorUpload(file) {
+ const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
+ if (!isJPG) {
+ this.$message.error('涓婁紶鍥剧墖鍙兘鏄� JPG锛孭NG, GIF 鏍煎紡!')
+ } else {
+ //鏄剧ず涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = true;
+ }
},
- insertToEditor(url) {
- const range = this.$refs.quillEditor.quill.getSelection();
- this.$refs.quillEditor.quill.insertEmbed(range.index, 'image', url);
+ // 涓婁紶鍥剧墖鎴愬姛
+ uploadEditorSuccess(res, file) {
+ console.log("涓婁紶鎴愬姛")
+ // this.$emit('upload',res, file)
+ console.log(res, file);
+ //鎷兼帴鍑轰笂浼犵殑鍥剧墖鍦ㄦ湇鍔″櫒鐨勫畬鏁村湴鍧�
+ let imgUrl = res.data.url;
+ let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
+ console.log(type);
+ // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
+ let quill = this.$refs.customQuillEditor.quill;
+ // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
+ let length = quill.getSelection().index;
+ // 鎻掑叆鍥剧墖||瑙嗛 res.info涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
+ if (type == 'mp4' || type == 'MP4') {
+ quill.insertEmbed(length, 'video', imgUrl)
+ } else {
+ quill.insertEmbed(length, 'image', imgUrl)
+ }
+ // 璋冩暣鍏夋爣鍒版渶鍚�
+ quill.setSelection(length + 1)
+ //鍙栨秷涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = false;
+ },
+ // 涓婁紶(鏂囦欢)鍥剧墖澶辫触
+ uploadEditorError(res, file) {
+ console.log(res);
+ console.log(file);
+ //椤甸潰鎻愮ず
+ this.$message.error('涓婁紶鍥剧墖澶辫触')
+ //鍙栨秷涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = false;
+ },
+ //涓婁紶缁勪欢杩斿洖鐨勭粨鏋�
+ uploadResult: function (res) {
+ this.uploadUrlPath = res;
+ },
+ openContent: function () {
+ console.log(this.content)
+ },
+
+ },
+ created() {
+
+ },
+ //鍙墽琛屼竴娆★紝鍔犺浇鎵ц
+ mounted() {
+ console.log("寮�濮嬪姞杞�")
+ // 鍒濆缁欑紪杈戝櫒璁剧疆title
+ },
+ watch: {
+ content(newVal, oldVal) {
+ //this.$emit('input', newVal);
+ console.log(newVal)
+ console.log(oldVal)
}
- }
-};
+ },
+
+
+}
</script>
-<style lang="scss" scoped>
+
+<style>
.editor {
line-height: normal !important;
height: 400px;
margin-bottom: 50px;
}
-//.ql-snow .ql-tooltip[data-mode="link"]::before {
-// content: "璇疯緭鍏ラ摼鎺ュ湴鍧�:";
-//}
-//.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-// border-right: 0px;
-// content: "淇濆瓨";
-// padding-right: 0px;
-//}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+ content: "璇疯緭鍏ラ摼鎺ュ湴鍧�:";
+}
+
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+ border-right: 0px;
+ content: "淇濆瓨";
+ padding-right: 0px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+ content: "14px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+ content: "10px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+ content: "18px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+ content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+ content: "鏂囨湰";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+ content: "鏍囬1";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+ content: "鏍囬2";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+ content: "鏍囬3";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+ content: "鏍囬4";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+ content: "鏍囬5";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+ content: "鏍囬6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+ content: "鏍囧噯瀛椾綋";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+ content: "琛嚎瀛椾綋";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+ content: "绛夊瀛椾綋";
+}
</style>
--
Gitblit v1.9.3