diff --git a/resources/assets/js/pages/manage/components/ChatInput/icon.js b/resources/assets/js/pages/manage/components/ChatInput/icon.js
new file mode 100644
index 000000000..281a32108
--- /dev/null
+++ b/resources/assets/js/pages/manage/components/ChatInput/icon.js
@@ -0,0 +1,50 @@
+
+const fullToolIcons = [
+ {
+ label: 'bold',
+ type: '',
+ svg: ''
+ },
+ {
+ label: 'strike',
+ type: '',
+ svg: ''
+ },
+ {
+ label: 'italic',
+ type: '',
+ svg: ''
+ },
+ {
+ label: 'underline',
+ type: '',
+ svg: ''
+ },
+ {
+ label: 'blockquote',
+ type: '',
+ svg: ''
+ },
+ {
+ label: 'link',
+ type: '',
+ svg: ''
+ },
+ {
+ label: 'list',
+ type: 'ordered',
+ svg: ''
+ },
+ {
+ label: 'list',
+ type: 'bullet',
+ svg: ''
+ },
+ {
+ label: 'list',
+ type: 'unchecked',
+ svg: ''
+ },
+]
+
+export {fullToolIcons}
diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 8f7752935..da3b2b6e6 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -206,6 +206,13 @@
+
@@ -223,6 +230,7 @@ import TransferDom from "../../../../directives/transfer-dom";
import clickoutside from "../../../../directives/clickoutside";
import longpress from "../../../../directives/longpress";
import {inputLoadAdd, inputLoadIsLast, inputLoadRemove} from "./one";
+import {fullToolIcons} from "./icon";
import {isMarkdownFormat} from "../../../../store/markdown";
import {Store} from "le5le-store";
@@ -345,6 +353,8 @@ export default {
fullInput: false,
fullQuill: null,
+ fullSelection: {index: 0, length: 0},
+ fullTools: fullToolIcons,
};
},
created() {
@@ -1287,10 +1297,13 @@ export default {
readOnly: false,
placeholder: this.placeholder,
modules: {
- toolbar: this.toolbar,
+ toolbar: false,
mention: this.quillMention()
}
}, this.options))
+ this.fullQuill.on('selection-change', range => {
+ this.fullSelection = range || {index: 0, length: 0};
+ })
this.fullQuill.enable(true)
this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML
this.$nextTick(_ => {
@@ -1310,6 +1323,50 @@ export default {
})
},
+ onFullMenu(action, type) {
+ const {length} = this.fullQuill.getSelection(true);
+ if (length === 0) {
+ $A.messageWarning("请选择文字后再操作")
+ return
+ }
+ switch (action) {
+ case 'bold':
+ this.fullQuill.format('bold', !this.fullQuill.getFormat().bold);
+ break;
+ case 'strike':
+ this.fullQuill.format('strike', !this.fullQuill.getFormat().strike);
+ break;
+ case 'italic':
+ this.fullQuill.format('italic', !this.fullQuill.getFormat().italic);
+ break;
+ case 'underline':
+ this.fullQuill.format('underline', !this.fullQuill.getFormat().underline);
+ break;
+ case 'blockquote':
+ this.fullQuill.format('blockquote', !this.fullQuill.getFormat().blockquote);
+ break;
+ case 'link':
+ if (this.fullQuill.getFormat().link) {
+ this.fullQuill.format('link', false);
+ return
+ }
+ $A.modalInput({
+ title: "插入链接",
+ placeholder: "请输入完整的链接地址",
+ onOk: (link) => {
+ if (!link) {
+ return false;
+ }
+ this.fullQuill.format('link', link);
+ }
+ })
+ break;
+ case 'list':
+ this.fullQuill.format('list', this.fullQuill.getFormat().list === type ? false : type);
+ break;
+ }
+ },
+
setQuote(id, type = 'reply') {
this.dialogId > 0 && this.$store.dispatch("saveDialog", {
id: this.dialogId,
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 00682bee7..f03da6efe 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -726,7 +726,7 @@
border-top-right-radius: 18px !important;
.ivu-modal-body {
overflow: visible;
- padding: 24px !important;
+ padding: 24px 24px 0 24px !important;
}
.ivu-modal-close {
> i {
@@ -747,10 +747,13 @@
}
.chat-input-box {
+ display: flex;
+ flex-direction: column;
height: 100%;
.chat-input-wrapper {
- height: 100%;
+ flex: 1;
+ height: 0;
.ql-container {
height: 100%;
@@ -761,6 +764,63 @@
}
}
}
+
+ .chat-input-menu {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.activation {
+ > li {
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ > li {
+ flex: 1;
+ width: 0;
+ height: 60px;
+ max-width: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ list-style: none;
+ opacity: 0.6;
+ cursor: not-allowed;
+ > svg {
+ height: 20px;
+ .im-fill {
+ fill: #333;
+ }
+ .im-stroke {
+ fill: none;
+ stroke: #333;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 2;
+ }
+ .im-thin {
+ stroke-width: 1;
+ }
+ .im-even {
+ fill-rule: evenodd;
+ }
+ &:active {
+ .im-fill {
+ fill: #000;
+ }
+ .im-stroke {
+ stroke: #000;
+ }
+ }
+ }
+ @media screen and (max-width: 320px) {
+ height: 52px;
+ > svg {
+ height: 18px;
+ }
+ }
+ }
+ }
}
}