From a1cf719d268a9d16db81ece94e75037c844f898f Mon Sep 17 00:00:00 2001
From: 疯狂的狮子li <15040126243@163.com>
Date: 星期二, 18 二月 2020 14:47:23 +0800
Subject: [PATCH] Merge branch 'master' of https://gitee.com/y_project/RuoYi-Vue
---
ruoyi-ui/src/components/Editor/index.vue | 450 ++++++++++++++++++++++++++++----------------------------
1 files changed, 225 insertions(+), 225 deletions(-)
diff --git a/ruoyi-ui/src/components/Editor/index.vue b/ruoyi-ui/src/components/Editor/index.vue
index 2002908..91fbc7d 100644
--- a/ruoyi-ui/src/components/Editor/index.vue
+++ b/ruoyi-ui/src/components/Editor/index.vue
@@ -1,226 +1,226 @@
-<template>
- <div>
- <!-- 鍥剧墖涓婁紶缁勪欢杈呭姪 -->
- <el-upload
- class="avatar-uploader quill-img"
- :action="uploadImgUrl"
- name="file"
- :headers="headers"
- :show-file-list="false"
- :on-success="quillImgSuccess"
- :on-error="uploadError"
- :before-upload="quillImgBefore"
- accept='.jpg,.jpeg,.png,.gif'
- ></el-upload>
-
- <!-- 瀵屾枃鏈粍浠� -->
- <quill-editor
- class="editor"
- v-model="content"
- ref="quillEditor"
- :options="editorOption"
- @blur="onEditorBlur($event)"
- @focus="onEditorFocus($event)"
- @change="onEditorChange($event)"
- ></quill-editor>
- </div>
-</template>
-
-<script>
-import { getToken } from '@/utils/auth'
-
-// 宸ュ叿鏍忛厤缃�
-const toolbarOptions = [
- ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
- ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
- [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
- [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
- [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
- [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
- [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
- [{ align: [] }], // 瀵归綈鏂瑰紡
- ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
- ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰�
-];
-
-import { quillEditor } from "vue-quill-editor";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
-
-export default {
- props: {
- /* 缂栬緫鍣ㄧ殑鍐呭 */
- value: {
- type: String
- },
- /* 鍥剧墖澶у皬 */
- maxSize: {
- type: Number,
- default: 4000 //kb
- }
- },
- components: { quillEditor },
- data() {
- return {
- content: this.value,
- uploadImgUrl: "",
- editorOption: {
- placeholder: "",
- theme: "snow", // or 'bubble'
- placeholder: "璇疯緭鍏ュ唴瀹�",
- modules: {
- toolbar: {
- container: toolbarOptions,
- handlers: {
- image: function(value) {
- if (value) {
- // 瑙﹀彂input妗嗛�夋嫨鍥剧墖鏂囦欢
- document.querySelector(".quill-img input").click();
- } else {
- this.quill.format("image", false);
- }
- }
- }
- }
- }
- },
- uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
- headers: {
- Authorization: 'Bearer ' + getToken()
- }
- };
- },
- watch: {
- value: function() {
- this.content = this.value;
- }
- },
- methods: {
- onEditorBlur() {
- //澶卞幓鐒︾偣浜嬩欢
- },
- onEditorFocus() {
- //鑾峰緱鐒︾偣浜嬩欢
- },
- onEditorChange() {
- //鍐呭鏀瑰彉浜嬩欢
- this.$emit("input", this.content);
- },
-
- // 瀵屾枃鏈浘鐗囦笂浼犲墠
- quillImgBefore(file) {
- let fileType = file.type;
- if(fileType === 'image/jpeg' || fileType === 'image/png'){
- return true;
- }else {
- this.$message.error('璇锋彃鍏ュ浘鐗囩被鍨嬫枃浠�(jpg/jpeg/png)');
- return false;
- }
- },
-
- quillImgSuccess(res, file) {
- // res涓哄浘鐗囨湇鍔″櫒杩斿洖鐨勬暟鎹�
- // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
- let quill = this.$refs.quillEditor.quill;
- // 濡傛灉涓婁紶鎴愬姛
- if (res.code == 200) {
- // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
- let length = quill.getSelection().index;
- // 鎻掑叆鍥剧墖 res.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
- quill.insertEmbed(length, "image", res.url);
- // 璋冩暣鍏夋爣鍒版渶鍚�
- quill.setSelection(length + 1);
- } else {
- this.$message.error("鍥剧墖鎻掑叆澶辫触");
- }
- },
- // 瀵屾枃鏈浘鐗囦笂浼犲け璐�
- uploadError() {
- // loading鍔ㄧ敾娑堝け
- this.$message.error("鍥剧墖鎻掑叆澶辫触");
- }
- }
-};
-</script>
-
-<style>
-.editor {
- line-height: normal !important;
- height: 192px;
-}
-.el-upload {
- display: none;
-}
-.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="video"]::before {
- content: "璇疯緭鍏ヨ棰戝湴鍧�:";
-}
-
-.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: "绛夊瀛椾綋";
-}
+<template>
+ <div>
+ <!-- 鍥剧墖涓婁紶缁勪欢杈呭姪 -->
+ <el-upload
+ class="avatar-uploader quill-img"
+ :action="uploadImgUrl"
+ name="file"
+ :headers="headers"
+ :show-file-list="false"
+ :on-success="quillImgSuccess"
+ :on-error="uploadError"
+ :before-upload="quillImgBefore"
+ accept='.jpg,.jpeg,.png,.gif'
+ ></el-upload>
+
+ <!-- 瀵屾枃鏈粍浠� -->
+ <quill-editor
+ class="editor"
+ v-model="content"
+ ref="quillEditor"
+ :options="editorOption"
+ @blur="onEditorBlur($event)"
+ @focus="onEditorFocus($event)"
+ @change="onEditorChange($event)"
+ ></quill-editor>
+ </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+
+// 宸ュ叿鏍忛厤缃�
+const toolbarOptions = [
+ ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
+ [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
+ [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
+ [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
+ [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
+ [{ align: [] }], // 瀵归綈鏂瑰紡
+ ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
+ ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰�
+];
+
+import { quillEditor } from "vue-quill-editor";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+
+export default {
+ props: {
+ /* 缂栬緫鍣ㄧ殑鍐呭 */
+ value: {
+ type: String
+ },
+ /* 鍥剧墖澶у皬 */
+ maxSize: {
+ type: Number,
+ default: 4000 //kb
+ }
+ },
+ components: { quillEditor },
+ data() {
+ return {
+ content: this.value,
+ uploadImgUrl: "",
+ editorOption: {
+ placeholder: "",
+ theme: "snow", // or 'bubble'
+ placeholder: "璇疯緭鍏ュ唴瀹�",
+ modules: {
+ toolbar: {
+ container: toolbarOptions,
+ handlers: {
+ image: function(value) {
+ if (value) {
+ // 瑙﹀彂input妗嗛�夋嫨鍥剧墖鏂囦欢
+ document.querySelector(".quill-img input").click();
+ } else {
+ this.quill.format("image", false);
+ }
+ }
+ }
+ }
+ }
+ },
+ uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+ headers: {
+ Authorization: 'Bearer ' + getToken()
+ }
+ };
+ },
+ watch: {
+ value: function() {
+ this.content = this.value;
+ }
+ },
+ methods: {
+ onEditorBlur() {
+ //澶卞幓鐒︾偣浜嬩欢
+ },
+ onEditorFocus() {
+ //鑾峰緱鐒︾偣浜嬩欢
+ },
+ onEditorChange() {
+ //鍐呭鏀瑰彉浜嬩欢
+ this.$emit("input", this.content);
+ },
+
+ // 瀵屾枃鏈浘鐗囦笂浼犲墠
+ quillImgBefore(file) {
+ let fileType = file.type;
+ if(fileType === 'image/jpeg' || fileType === 'image/png'){
+ return true;
+ }else {
+ this.$message.error('璇锋彃鍏ュ浘鐗囩被鍨嬫枃浠�(jpg/jpeg/png)');
+ return false;
+ }
+ },
+
+ quillImgSuccess(res, file) {
+ // res涓哄浘鐗囨湇鍔″櫒杩斿洖鐨勬暟鎹�
+ // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
+ let quill = this.$refs.quillEditor.quill;
+ // 濡傛灉涓婁紶鎴愬姛
+ if (res.code == 200) {
+ // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
+ let length = quill.getSelection().index;
+ // 鎻掑叆鍥剧墖 res.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
+ quill.insertEmbed(length, "image", res.url);
+ // 璋冩暣鍏夋爣鍒版渶鍚�
+ quill.setSelection(length + 1);
+ } else {
+ this.$message.error("鍥剧墖鎻掑叆澶辫触");
+ }
+ },
+ // 瀵屾枃鏈浘鐗囦笂浼犲け璐�
+ uploadError() {
+ // loading鍔ㄧ敾娑堝け
+ this.$message.error("鍥剧墖鎻掑叆澶辫触");
+ }
+ }
+};
+</script>
+
+<style>
+.editor {
+ line-height: normal !important;
+ height: 192px;
+}
+.quill-img {
+ display: none;
+}
+.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="video"]::before {
+ content: "璇疯緭鍏ヨ棰戝湴鍧�:";
+}
+
+.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>
\ No newline at end of file
--
Gitblit v1.9.3