From 51636e9cd814bddba7a9b4ff21b5bc94e95fb6cb Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期二, 14 五月 2024 09:21:36 +0800
Subject: [PATCH] 配置文档
---
Source/ProjectWeb/src/views/custom-ui/test.vue | 178 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 102 insertions(+), 76 deletions(-)
diff --git a/Source/ProjectWeb/src/views/custom-ui/test.vue b/Source/ProjectWeb/src/views/custom-ui/test.vue
index c4ac63c..aae9e1e 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test.vue
+++ b/Source/ProjectWeb/src/views/custom-ui/test.vue
@@ -1,93 +1,119 @@
<template>
- <div>
- <quill-editor
- class="editor"
- v-model="content"
- ref="quillEditor"
- :options="editorOptions"
- ></quill-editor>
+ <div id='quillEditorQiniu'>
+ <el-button @click="visible = true">涓婁紶鏂囦欢</el-button>
+ <el-button @click="textVisible = true">瀵屾枃鏈紪杈�</el-button>
+ <UploadFiles :visible.sync="visible"></UploadFiles>
+ <rich-text :visible.sync="textVisible"></rich-text>
</div>
</template>
<script>
-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'] // 閾炬帴銆佸浘鐗�
-]
+
export default {
- name:'test',
data() {
return {
- content: '',
- editorOptions: {
- // Quill缂栬緫鍣ㄧ殑閫夐」
- placeholder: '璇疯緭鍏ュ唴瀹癸紒',
- modules:{
- toolbar:{
- container:toolbarOptions
- }
- }
-
- }
- };
- },
- 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);
- }
- };
- },
- insertToEditor(url) {
- const range = this.$refs.quillEditor.quill.getSelection();
- this.$refs.quillEditor.quill.insertEmbed(range.index, 'image', url);
+ visible: false,
+ textVisible:false,
}
- }
-};
+ },
+ methods: {},
+ created() {
+
+ },
+
+ mounted() {
+ },
+ watch: {},
+
+
+}
</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