From 810fb4b698f5450d04e5769f32ced55a9115f6fa Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期三, 10 四月 2024 11:57:50 +0800
Subject: [PATCH] 富文本以及路由改造
---
Source/ProjectWeb/src/views/custom-ui/test.vue | 88 +++++++++++++++++++++++++++++++++++++++++--
1 files changed, 83 insertions(+), 5 deletions(-)
diff --git a/Source/ProjectWeb/src/views/custom-ui/test.vue b/Source/ProjectWeb/src/views/custom-ui/test.vue
index 6b3584e..c4ac63c 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test.vue
+++ b/Source/ProjectWeb/src/views/custom-ui/test.vue
@@ -1,15 +1,93 @@
<template>
<div>
- 娴嬭瘯鑷畾涔夌粍浠跺睍绀篸dddd
+ <quill-editor
+ class="editor"
+ v-model="content"
+ ref="quillEditor"
+ :options="editorOptions"
+ ></quill-editor>
</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"
-}
-</script>
+ name:'test',
+ data() {
+ return {
+ content: '',
+ editorOptions: {
+ // Quill缂栬緫鍣ㄧ殑閫夐」
+ placeholder: '璇疯緭鍏ュ唴瀹癸紒',
+ modules:{
+ toolbar:{
+ container:toolbarOptions
+ }
+ }
-<style scoped>
+ }
+ };
+ },
+ 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);
+ }
+ }
+};
+</script>
+<style lang="scss" scoped>
+.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;
+//}
</style>
--
Gitblit v1.9.3