Skip to content

Awesome-Markdown-Editor
Awesome-Markdown-Editor

weixin_43676597 / Awesome-Markdown-Editor
与 Fork 源项目一致

Fork自 gitcode_dev / Awesome-Markdown-Editor

通知 1
Star 1
Fork 0
Awesome-Markdown-Editor
Awesome-Markdown-Editor

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f97bff3a 编写于 作者: 璃白.'s avatar 璃白. 🌻
浏览文件
操作

fix:优化@用户

上级 61d8025d
展开全部 隐藏空白更改
内联 并排
Showing with 224 addition and 138 deletion
dist/164.markdown-editor.js 已删除 100644 → 0
浏览文件 @ 61d8025d
(self.webpackChunkmarkdown_editor=self.webpackChunkmarkdown_editor||[]).push([[164],{794:(e,n,l)=>{"use strict";l.d(n,{Z:()=>i});var r=l(3645),s=l.n(r)()((function(e){return e[1]}));s.push([e.id,"/*\n\nAtom One Dark by Daniel Gamage\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-syntax\n\nbase: #282c34\nmono-1: #abb2bf\nmono-2: #818896\nmono-3: #5c6370\nhue-1: #56b6c2\nhue-2: #61aeee\nhue-3: #c678dd\nhue-4: #98c379\nhue-5: #e06c75\nhue-5-2: #be5046\nhue-6: #d19a66\nhue-6-2: #e6c07b\n\n*/\n.md_preview .md_hljs {\n color: #abb2bf;\n background: #282c34;\n}\n.md_preview .hljs-comment,\n.md_preview .hljs-quote {\n color: #5c6370;\n font-style: italic;\n}\n.md_preview .hljs-doctag,\n.md_preview .hljs-keyword,\n.md_preview .hljs-formula {\n color: #c678dd;\n}\n.md_preview .hljs-section,\n.md_preview .hljs-name,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-deletion,\n.md_preview .hljs-subst {\n color: #e06c75;\n}\n.md_preview .hljs-literal {\n color: #56b6c2;\n}\n.md_preview .hljs-string,\n.md_preview .hljs-regexp,\n.md_preview .hljs-addition,\n.md_preview .hljs-attribute,\n.md_preview .hljs-meta .hljs-string {\n color: #98c379;\n}\n.md_preview .hljs-attr,\n.md_preview .hljs-variable,\n.md_preview .hljs-template-variable,\n.md_preview .hljs-type,\n.md_preview .hljs-selector-class,\n.md_preview .hljs-selector-attr,\n.md_preview .hljs-selector-pseudo,\n.md_preview .hljs-number {\n color: #d19a66;\n}\n.md_preview .hljs-symbol,\n.md_preview .hljs-bullet,\n.md_preview .hljs-link,\n.md_preview .hljs-meta,\n.md_preview .hljs-selector-id,\n.md_preview .hljs-title {\n color: #61aeee;\n}\n.md_preview .hljs-built_in,\n.md_preview .hljs-title.class_,\n.md_preview .hljs-class .hljs-title {\n color: #e6c07b;\n}\n.md_preview .hljs-emphasis {\n font-style: italic;\n}\n.md_preview .hljs-strong {\n font-weight: bold;\n}\n.md_preview .hljs-link {\n text-decoration: underline;\n}\n",""]);const i=s},164:(e,n,l)=>{"use strict";l.r(n),l.d(n,{default:()=>t});var r=l(3379),s=l.n(r),i=l(794);s()(i.Z,{insert:"head",singleton:!1});const t=i.Z.locals||{}}}]);
\ No newline at end of file
dist/452.markdown-editor.js 0 → 100644
浏览文件 @ f97bff3a
"use strict";(self.webpackChunkmarkdown_editor=self.webpackChunkmarkdown_editor||[]).push([[452],{7650:(e,n,l)=>{l.d(n,{Z:()=>i});var r=l(1522),s=l.n(r)()((function(e){return e[1]}));s.push([e.id,"/*\n\nAtom One Dark by Daniel Gamage\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-syntax\n\nbase: #282c34\nmono-1: #abb2bf\nmono-2: #818896\nmono-3: #5c6370\nhue-1: #56b6c2\nhue-2: #61aeee\nhue-3: #c678dd\nhue-4: #98c379\nhue-5: #e06c75\nhue-5-2: #be5046\nhue-6: #d19a66\nhue-6-2: #e6c07b\n\n*/\n.md_preview .md_hljs {\n color: #abb2bf;\n background: #282c34;\n}\n.md_preview .hljs-comment,\n.md_preview .hljs-quote {\n color: #5c6370;\n font-style: italic;\n}\n.md_preview .hljs-doctag,\n.md_preview .hljs-keyword,\n.md_preview .hljs-formula {\n color: #c678dd;\n}\n.md_preview .hljs-section,\n.md_preview .hljs-name,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-deletion,\n.md_preview .hljs-subst {\n color: #e06c75;\n}\n.md_preview .hljs-literal {\n color: #56b6c2;\n}\n.md_preview .hljs-string,\n.md_preview .hljs-regexp,\n.md_preview .hljs-addition,\n.md_preview .hljs-attribute,\n.md_preview .hljs-meta .hljs-string {\n color: #98c379;\n}\n.md_preview .hljs-attr,\n.md_preview .hljs-variable,\n.md_preview .hljs-template-variable,\n.md_preview .hljs-type,\n.md_preview .hljs-selector-class,\n.md_preview .hljs-selector-attr,\n.md_preview .hljs-selector-pseudo,\n.md_preview .hljs-number {\n color: #d19a66;\n}\n.md_preview .hljs-symbol,\n.md_preview .hljs-bullet,\n.md_preview .hljs-link,\n.md_preview .hljs-meta,\n.md_preview .hljs-selector-id,\n.md_preview .hljs-title {\n color: #61aeee;\n}\n.md_preview .hljs-built_in,\n.md_preview .hljs-title.class_,\n.md_preview .hljs-class .hljs-title {\n color: #e6c07b;\n}\n.md_preview .hljs-emphasis {\n font-style: italic;\n}\n.md_preview .hljs-strong {\n font-weight: bold;\n}\n.md_preview .hljs-link {\n text-decoration: underline;\n}\n",""]);const i=s},4452:(e,n,l)=>{l.r(n),l.d(n,{default:()=>t});var r=l(7574),s=l.n(r),i=l(7650);s()(i.Z,{insert:"head",singleton:!1});const t=i.Z.locals||{}}}]);
\ No newline at end of file
dist/345.markdown-editor.js → dist/707.markdown-editor.js
浏览文件 @ f97bff3a
(self.webpackChunkmarkdown_editor=self.webpackChunkmarkdown_editor||[]).push([[345],{7967:(e,n,l)=>{"use strict";l.d(n,{Z:()=>s});var r=l(3645),i=l.n(r)()((function(e){return e[1]}));i.push([e.id,"/*\n\nLightfair style (c) Tristian Kelly <tristian.kelly560@gmail.com>\n\n*/\n.md_preview .md_hljs {\n color: #444;\n background: var(--md-editor-code-bg-color);\n}\n.md_preview .hljs-name {\n color: #01a3a3;\n}\n.md_preview .hljs-tag,\n.md_preview .hljs-meta {\n color: #778899;\n}\n.md_preview .hljs-subst {\n /* default */\n}\n.md_preview .hljs-comment {\n color: #888888;\n}\n.md_preview .hljs-keyword,\n.md_preview .hljs-attribute,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-meta .hljs-keyword,\n.md_preview .hljs-doctag,\n.md_preview .hljs-name {\n font-weight: bold;\n}\n.md_preview .hljs-type,\n.md_preview .hljs-string,\n.md_preview .hljs-number,\n.md_preview .hljs-selector-id,\n.md_preview .hljs-selector-class,\n.md_preview .hljs-quote,\n.md_preview .hljs-template-tag,\n.md_preview .hljs-deletion {\n color: #4286f4;\n}\n.md_preview .hljs-title,\n.md_preview .hljs-section {\n color: #4286f4;\n font-weight: bold;\n}\n.md_preview .hljs-regexp,\n.md_preview .hljs-symbol,\n.md_preview .hljs-variable,\n.md_preview .hljs-template-variable,\n.md_preview .hljs-link,\n.md_preview .hljs-selector-attr,\n.md_preview .hljs-selector-pseudo {\n color: #bc6060;\n}\n.md_preview .hljs-literal {\n color: #62bcbc;\n}\n.md_preview .hljs-built_in,\n.md_preview .hljs-bullet,\n.md_preview .hljs-code,\n.md_preview .hljs-addition {\n color: #25c6c6;\n}\n.md_preview .hljs-meta .hljs-string {\n color: #4d99bf;\n}\n.md_preview .hljs-emphasis {\n font-style: italic;\n}\n.md_preview .hljs-strong {\n font-weight: bold;\n}\n",""]);const s=i},8345:(e,n,l)=>{"use strict";l.r(n),l.d(n,{default:()=>d});var r=l(3379),i=l.n(r),s=l(7967);i()(s.Z,{insert:"head",singleton:!1});const d=s.Z.locals||{}}}]);
\ No newline at end of file
"use strict";(self.webpackChunkmarkdown_editor=self.webpackChunkmarkdown_editor||[]).push([[707],{6490:(e,n,l)=>{l.d(n,{Z:()=>s});var r=l(1522),i=l.n(r)()((function(e){return e[1]}));i.push([e.id,"/*\n\nLightfair style (c) Tristian Kelly <tristian.kelly560@gmail.com>\n\n*/\n.md_preview .md_hljs {\n color: #444;\n background: var(--md-editor-code-bg-color);\n}\n.md_preview .hljs-name {\n color: #01a3a3;\n}\n.md_preview .hljs-tag,\n.md_preview .hljs-meta {\n color: #778899;\n}\n.md_preview .hljs-subst {\n /* default */\n}\n.md_preview .hljs-comment {\n color: #888888;\n}\n.md_preview .hljs-keyword,\n.md_preview .hljs-attribute,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-meta .hljs-keyword,\n.md_preview .hljs-doctag,\n.md_preview .hljs-name {\n font-weight: bold;\n}\n.md_preview .hljs-type,\n.md_preview .hljs-string,\n.md_preview .hljs-number,\n.md_preview .hljs-selector-id,\n.md_preview .hljs-selector-class,\n.md_preview .hljs-quote,\n.md_preview .hljs-template-tag,\n.md_preview .hljs-deletion {\n color: #4286f4;\n}\n.md_preview .hljs-title,\n.md_preview .hljs-section {\n color: #4286f4;\n font-weight: bold;\n}\n.md_preview .hljs-regexp,\n.md_preview .hljs-symbol,\n.md_preview .hljs-variable,\n.md_preview .hljs-template-variable,\n.md_preview .hljs-link,\n.md_preview .hljs-selector-attr,\n.md_preview .hljs-selector-pseudo {\n color: #bc6060;\n}\n.md_preview .hljs-literal {\n color: #62bcbc;\n}\n.md_preview .hljs-built_in,\n.md_preview .hljs-bullet,\n.md_preview .hljs-code,\n.md_preview .hljs-addition {\n color: #25c6c6;\n}\n.md_preview .hljs-meta .hljs-string {\n color: #4d99bf;\n}\n.md_preview .hljs-emphasis {\n font-style: italic;\n}\n.md_preview .hljs-strong {\n font-weight: bold;\n}\n",""]);const s=i},2707:(e,n,l)=>{l.r(n),l.d(n,{default:()=>d});var r=l(7574),i=l.n(r),s=l(6490);i()(s.Z,{insert:"head",singleton:!1});const d=s.Z.locals||{}}}]);
\ No newline at end of file
dist/380.markdown-editor.js → dist/721.markdown-editor.js
浏览文件 @ f97bff3a
(self.webpackChunkmarkdown_editor=self.webpackChunkmarkdown_editor||[]).push([[380],{9721:(e,n,l)=>{"use strict";l.d(n,{Z:()=>s});var r=l(3645),i=l.n(r)()((function(e){return e[1]}));i.push([e.id,"/*\n\nDark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>\n\n*/\n.md_preview .md_hljs {\n color: #ddd;\n background: #444;\n}\n.md_preview .hljs-keyword,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-literal,\n.md_preview .hljs-section,\n.md_preview .hljs-link {\n color: white;\n}\n.md_preview .hljs-subst {\n /* default */\n}\n.md_preview .hljs-string,\n.md_preview .hljs-title,\n.md_preview .hljs-name,\n.md_preview .hljs-type,\n.md_preview .hljs-attribute,\n.md_preview .hljs-symbol,\n.md_preview .hljs-bullet,\n.md_preview .hljs-built_in,\n.md_preview .hljs-addition,\n.md_preview .hljs-variable,\n.md_preview .hljs-template-tag,\n.md_preview .hljs-template-variable {\n color: #d88;\n}\n.md_preview .hljs-comment,\n.md_preview .hljs-quote,\n.md_preview .hljs-deletion,\n.md_preview .hljs-meta {\n color: #777;\n}\n.md_preview .hljs-keyword,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-literal,\n.md_preview .hljs-title,\n.md_preview .hljs-section,\n.md_preview .hljs-doctag,\n.md_preview .hljs-type,\n.md_preview .hljs-name,\n.md_preview .hljs-strong {\n font-weight: bold;\n}\n.md_preview .hljs-emphasis {\n font-style: italic;\n}\n",""]);const s=i},7380:(e,n,l)=>{"use strict";l.r(n),l.d(n,{default:()=>d});var r=l(3379),i=l.n(r),s=l(9721);i()(s.Z,{insert:"head",singleton:!1});const d=s.Z.locals||{}}}]);
\ No newline at end of file
"use strict";(self.webpackChunkmarkdown_editor=self.webpackChunkmarkdown_editor||[]).push([[721],{3386:(e,n,l)=>{l.d(n,{Z:()=>s});var r=l(1522),i=l.n(r)()((function(e){return e[1]}));i.push([e.id,"/*\n\nDark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>\n\n*/\n.md_preview .md_hljs {\n color: #ddd;\n background: #444;\n}\n.md_preview .hljs-keyword,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-literal,\n.md_preview .hljs-section,\n.md_preview .hljs-link {\n color: white;\n}\n.md_preview .hljs-subst {\n /* default */\n}\n.md_preview .hljs-string,\n.md_preview .hljs-title,\n.md_preview .hljs-name,\n.md_preview .hljs-type,\n.md_preview .hljs-attribute,\n.md_preview .hljs-symbol,\n.md_preview .hljs-bullet,\n.md_preview .hljs-built_in,\n.md_preview .hljs-addition,\n.md_preview .hljs-variable,\n.md_preview .hljs-template-tag,\n.md_preview .hljs-template-variable {\n color: #d88;\n}\n.md_preview .hljs-comment,\n.md_preview .hljs-quote,\n.md_preview .hljs-deletion,\n.md_preview .hljs-meta {\n color: #777;\n}\n.md_preview .hljs-keyword,\n.md_preview .hljs-selector-tag,\n.md_preview .hljs-literal,\n.md_preview .hljs-title,\n.md_preview .hljs-section,\n.md_preview .hljs-doctag,\n.md_preview .hljs-type,\n.md_preview .hljs-name,\n.md_preview .hljs-strong {\n font-weight: bold;\n}\n.md_preview .hljs-emphasis {\n font-style: italic;\n}\n",""]);const s=i},721:(e,n,l)=>{l.r(n),l.d(n,{default:()=>d});var r=l(7574),i=l.n(r),s=l(3386);i()(s.Z,{insert:"head",singleton:!1});const d=s.Z.locals||{}}}]);
\ No newline at end of file
dist/index.html
浏览文件 @ f97bff3a
......@@ -35,45 +35,45 @@
const ee = new MdEditor({
el: "#app", // required
value: `\`\`\`java
#include "stdio.h"
void main()
{
/*
完数：所有的因子相加等于这个数本身
6=1+2+3
*/
int i,j,a,b,c;
printf("1000以内的完数如下：\n");
for(i=6;i<=1000;i++)
{
a=0;
//求i对应的所有的因子
for(j=2;j<=i;j++)
{
if(i%j==0)
{
a+=i/j;
}
}
if(i==a){
//该循环语句的作用就是打印结果
for(j=2;j<=i;j++)
{
if(i%j==0)
{
if(i==j){
printf("%d",i/j);
}else{
printf("%d+",i/j);
}
}
}
printf("=%d\n",i);
}
}
}
\`\`\`
`,
#include "stdio.h"
void main()
{
/*
完数：所有的因子相加等于这个数本身
6=1+2+3
*/
int i,j,a,b,c;
printf("1000以内的完数如下：\n");
for(i=6;i<=1000;i++)
{
a=0;
//求i对应的所有的因子
for(j=2;j<=i;j++)
{
if(i%j==0)
{
a+=i/j;
}
}
if(i==a){
//该循环语句的作用就是打印结果
for(j=2;j<=i;j++)
{
if(i%j==0)
{
if(i==j){
printf("%d",i/j);
}else{
printf("%d+",i/j);
}
}
}
printf("=%d\n",i);
}
}
}
\`\`\`
`,
// value: `
// ![pic](https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg=40x40)
// `,
......@@ -85,8 +85,9 @@ void main()
value:
"## edswgdfgdfgdfg\n**dfgdfgdfg**\n_ergdfgdfg_\n> ergergdfg\n```\nwefgdfsfdgdf\n```\n- efwefsdfsdf\n\n\nsdgfdfgdfgdfg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg",
value:
"![file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg '附件')\n[](https://ask.csdn.net/questions/7483791)",
value: "当前问题已结题，不再开放新的回答。",
"![](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg '')",
// value: "当前问题已结题，不再开放新的回答。",
// value: "",
disabled: false,
themeOptions: {
dark: false,
......@@ -95,7 +96,7 @@ void main()
// textColorActive: "#000",
codeTheme: "atom-one-dark"
},
height: 300,
height: 400,
// rows: 'auto',
// height: 40,
toolsOptions: {
......@@ -167,51 +168,69 @@ void main()
setTimeout(() => {
callback(newLinks);
}, 1000);
}
// queryUserList: function(val, callback) {
// const list = [
// {
// id: 1,
// name: "藤原拓海",
// avatar:
// "https://img2.baidu.com/it/u=2380211986,3979961921&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 2,
// name: "高桥凉介",
// avatar:
// "https://img0.baidu.com/it/u=777620324,2343967729&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 3,
// name: "马奎斯",
// avatar:
// "https://img2.baidu.com/it/u=1297316011,1869565258&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 4,
// name: "王一博",
// avatar:
// "https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 5,
// name: "王俊凯",
// avatar:
// "https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
// }
// ];
},
queryUserList: function(val, callback) {
const list = [
{
id: 1,
nickname: "藤原拓海",
username: 'cpongo1',
url: "https://weibo.com/u/5492443184",
avatar:
"https://img2.baidu.com/it/u=2380211986,3979961921&fm=26&fmt=auto&gp=0.jpg"
},
{
id: 2,
nickname: "高桥凉介",
username: 'cpongo2',
url: "https://weibo.com/u/5492443184",
avatar:
"https://img0.baidu.com/it/u=777620324,2343967729&fm=26&fmt=auto&gp=0.jpg"
},
{
id: 3,
nickname: "马奎斯",
username: 'cpongo3',
url: "https://weibo.com/u/5492443184",
avatar:
"https://img2.baidu.com/it/u=1297316011,1869565258&fm=26&fmt=auto&gp=0.jpg"
},
{
id: 4,
nickname: "王一博",
username: 'cpongo4',
url: "https://weibo.com/u/5492443184",
avatar:
"https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
},
{
id: 5,
nickname: "王俊凯",
username: 'cpongo5',
url: "https://weibo.com/tfwangjunkai",
avatar:
"https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
},
{
id: 6,
nickname: "易烊千玺",
username: 'cpongo6',
url: "https://weibo.com/tfyiyangqianxi",
avatar:
"https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg"
},
{
id: 7,
nickname: "白敬亭",
username: 'cpongo7',
url: "https://weibo.com/u/2112496475",
avatar:
"https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
}
];
// if (!val) {
// callback(list);
// return;
// }
// callback(
// list.filter(item => {
// return item.name.includes(val);
// })
// );
// }
callback(list);
}
});
// ee.focus();
document.querySelector("#a").onclick = function() {
......
dist/markdown-editor.js
浏览文件 @ f97bff3a
此差异已折叠。
src/App.vue
浏览文件 @ f97bff3a
......@@ -326,6 +326,7 @@ export default {
emitContent.callUserList = this.callUserList;
}
emitContent.filteredTags = this.filteredTags;
this.$emit("change", emitContent);
this.$emit("input", emitContent);
}
......@@ -410,13 +411,13 @@ export default {
const url = item.csdn
? "https://link.csdn.net/?target=" + item.url
: item.url;
linkEl.id = "md_link_card";
linkEl.className = "md_link_card";
linkEl.setAttribute("target", "_blank");
linkEl.setAttribute("href", url);
const title = getLinkTitle(linkEl);
linkEl.innerHTML = renderLinkCard(title, item);
});
// return vDom.innerHTML;
this.html = vDom.innerHTML;
});
}
......
src/assets/js/utils.js
浏览文件 @ f97bff3a
......@@ -191,11 +191,18 @@ export function removeBlankLine(val) {
// 获取被过滤掉的标签
export function getFilteredTags(oldStr, newStr) {
if (oldStr.length - newStr.length === 0) return [];
const filteredStr = oldStr.replace(newStr.trim(), "");
// if (oldStr.length - newStr.length === 0) return [];
// const filteredStr = oldStr.replace(newStr.trim(), "");
// console.log(11, filteredStr);
const virtualDom = document.createElement("div");
virtualDom.innerHTML = filteredStr;
const filteredTags = Array.from(virtualDom.getElementsByTagName("*"));
virtualDom.innerHTML = oldStr;
const oldTags = Array.from(virtualDom.getElementsByTagName("*"));
virtualDom.innerHTML = newStr;
const newTags = Array.from(virtualDom.getElementsByTagName("*"));
// 待优化
const filteredTags = new Array(oldTags.length - newTags.length).fill(0);
return filteredTags;
}
// 格式刷的规则
......@@ -332,7 +339,7 @@ export function getLinkTags(id, html) {
const virtualDom = document.createElement("div");
virtualDom.innerHTML = html;
const links = Array.from(
virtualDom.querySelectorAll("a:not([download],[type=user])")
virtualDom.querySelectorAll("a:not([download])")
).map((item, index) => {
item.id = id + "_" + index;
return {
......
src/assets/style/card.less
浏览文件 @ f97bff3a
#md_link_card,
.md_link_card {
display: block;
padding: 6px 16px;
padding: 8px 16px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid var(--md-editor-border-color);
background: #f5f7fa;
transition: border 0.3s;
margin: 4px 0;
// max-width: 640px;
max-width: 640px;
* {
line-height: 1;
}
@media (any-hover: hover) {
&:hover {
border: 1px solid var(--md-editor-border-color-active);
......@@ -35,7 +39,7 @@
font-size: 14px;
line-height: 20px;
color: var(--md-editor-text-color);
margin: 6px 0;
margin: 6px 0 8px;
line-height: 20px;
overflow: hidden;
display: -webkit-box;
......@@ -52,6 +56,7 @@
}
}
#md_file_card,
.md_file_card {
display: block;
padding: 10px 16px;
......@@ -62,6 +67,9 @@
transition: border 0.3s;
max-width: 400px;
margin: 4px 0;
* {
line-height: 1;
}
@media (any-hover: hover) {
&:hover {
border: 1px solid var(--md-editor-border-color-active);
......@@ -76,6 +84,8 @@
color: var(--md-editor-border-color-active);
}
.md_file_download {
width: unset;
height: unset;
font-size: 14px;
padding: 8px;
box-sizing: border-box;
......
src/assets/style/global.less
浏览文件 @ f97bff3a
......@@ -66,12 +66,15 @@ textarea {
}
a.md_call_user {
color: var(--md-editor-border-color-active);
cursor: pointer;
@media (any-hover: hover) {
&:hover {
color: var(--md-editor-border-color-active);
opacity: 0.8;
color: var(--md-editor-text-color-active) !important;
&[href] {
color: var(--md-editor-border-color-active) !important;
cursor: pointer;
@media (any-hover: hover) {
&:hover {
color: var(--md-editor-border-color-active) !important;
opacity: 0.8;
}
}
}
}
src/components/content/components/user-select.vue
浏览文件 @ f97bff3a
......@@ -14,7 +14,7 @@
<img class="md_select_user_avatar" :src="item.avatar" />
<div class="md_select_user_info">
<div class="md_select_user_name">{{ item.nickname }}</div>
<div class="md_select_user_desc">最近回答过类似问题</div>
<!-- <div class="md_select_user_desc">最近回答过类似问题</div> -->
</div>
</li>
</ul>
......@@ -110,11 +110,12 @@ export default {
);
}
.md_select_user {
max-height: 214px;
max-height: 196px;
width: 180px;
padding: 6px 0;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
scrollbar-color: transparent transparent;
scrollbar-width: none;
margin: 0 !important;
......@@ -134,9 +135,13 @@ export default {
li {
display: flex;
box-sizing: border-box;
padding: 6px 8px;
padding: 4px 8px;
cursor: pointer;
&:hover,
@media (any-hover: hover) {
&:hover {
background: #f5f7fa;
}
}
&.active {
background: #f5f7fa;
}
......@@ -144,8 +149,8 @@ export default {
// margin-top: 10px;
// }
.md_select_user_avatar {
width: 44px;
height: 44px;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
......@@ -158,6 +163,10 @@ export default {
align-items: flex-start;
.md_select_user_name {
font-size: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--md-editor-text-color-active);
}
.md_select_user_desc {
......
src/components/content/md-textarea.vue
浏览文件 @ f97bff3a
......@@ -8,7 +8,6 @@
@focus="setFocus(true)"
@blur="setFocus(false)"
@paste="pasteFile"
@keydown.stop.50="handleCallUser"
@keydown.stop.up="changeActiveUserIndex($event, 'up')"
@keydown.stop.down="changeActiveUserIndex($event, 'down')"
@keydown.enter="handleEnter"
......@@ -155,6 +154,12 @@ export default {
this.resetPreviewMinHeight();
},
watch: {
// userList: {
// handler: function(val) {
// if (!val.length) return;
// this.activeUserIndex = 0;
// }
// },
isFocus: {
handler: function(val) {
if (val) {
......@@ -228,10 +233,19 @@ export default {
this.activeUserIndex = 0;
}
const index = this.activeUserIndex;
if (index % 3 === 0) {
const activeItem = document.getElementById("md_user_id_" + index);
const activeTop =
activeItem.offsetTop - activeItem.parentNode.scrollTop;
if (index === 0) {
document
.getElementById("md_user_id_" + this.activeUserIndex)
.parentNode.scrollTo(0, 56 * index);
.getElementById("md_user_id_" + index)
.parentNode.scrollTo(0, 0);
}
if (index > 3 && activeTop > 126) {
document
.getElementById("md_user_id_" + index)
.parentNode.scrollTo(0, 40 * (index - 3));
// .scrollIntoView({ behavior: "smooth" });
}
} else {
......@@ -240,9 +254,20 @@ export default {
this.activeUserIndex = max - 1;
}
const index = this.activeUserIndex;
document
.getElementById("md_user_id_" + this.activeUserIndex)
.parentNode.scrollTo(0, 56 * index);
const activeItem = document.getElementById("md_user_id_" + index);
const activeTop =
activeItem.offsetTop - activeItem.parentNode.scrollTop;
if (index === max - 1) {
activeItem.parentNode.scrollTo(
0,
activeItem.parentNode.scrollHeight
);
}
if (activeTop < 46) {
document
.getElementById("md_user_id_" + this.activeUserIndex)
.parentNode.scrollTo(0, 40 * index);
}
// .scrollIntoView({ behavior: "smooth" });
}
}
......@@ -263,6 +288,9 @@ export default {
};
},
input(e) {
if (e.data === "@") {
this.createSelectUserDialog();
}
if (this.showSelectUser) this.handleQueryUser(e);
this.$emit("update:textLength", this.textContent.length);
this.emitText();
......
src/components/content/mixins/render-mixins.js
浏览文件 @ f97bff3a
......@@ -28,7 +28,6 @@ export default {
"script",
"select",
"option",
"input",
"textarea",
"form",
"button"
......@@ -52,15 +51,17 @@ export default {
}
// ![file](...)渲染文件，只可以下载
if (text === "file") {
return `<div class="md_file_card md_flex_card">
<span class="md_file_img icon iconfont icon-doc"></span>
<span class="flex-1">
<span class="md_file_title">${title}</span>
<span class="md_file_desc">16.6KB</span>
</span>
<span class="md_file_controls">
<a href="${href}" type="file" download class="md_file_download icon iconfont icon-xiazai"></a>
</span>
return `<div id="md_file_card" class="md_file_card">
<div class="md_flex_card">
<span class="md_file_img icon iconfont icon-doc"></span>
<span class="flex-1">
<span class="md_file_title">${title}</span>
<span class="md_file_desc">16.6KB</span>
</span>
<span class="md_file_controls">
<a href="${href}" type="file" download class="md_file_download icon iconfont icon-xiazai"></a>
</span>
</div>
</div>`;
}
// ![img](...)渲染图片
......@@ -72,10 +73,10 @@ export default {
return out;
},
text(text) {
const newText = text.replace(/(@.+? )/g, function(val) {
const newText = text.replace(/(\@\S+\s{0,1})/g, function(val) {
const user = _this.getUserByName(val.slice(1).trim());
return `<a type="user" data-user="${user &&
user.username}" href="${user && user.url}" class="md_call_user">${val}</a>`;
return `<a type="user" download data-user="${user &&
user.username}" href="${(user && user.url) || "javascript:void(0)"}" class="md_call_user">${val}</a>`;
});
return newText;
}
......
src/components/content/mixins/select-user-mixins.js
浏览文件 @ f97bff3a
......@@ -37,11 +37,16 @@ export default {
this.queryInfo.keyWord = keyWord;
this.$emit("queryUserList", keyWord);
},
handleCallUser(e) {
if (e.key === "@") {
this.createSelectUserDialog();
}
},
// handleCallUser(e) {
// // console.log('aaa');
// // console.log(e);
// // alert(e.key)
// if (e.key === "@" || (e.key === "Process" && e.code === "Digit2")) {
// this.createSelectUserDialog();
// }
// },
createSelectUserDialog() {
const textEl = document.getElementById(this.id);
if (!textEl) return;
......@@ -79,7 +84,7 @@ export default {
pEl.offsetLeft < frameWidth * (2 / 3)
? pEl.offsetLeft
: pEl.offsetLeft - 200,
tozp: pEl.offsetTop - textEl.scrollTop
top: pEl.offsetTop - textEl.scrollTop
// left: pEl.getBoundingClientRect().left,
// top: pEl.getBoundingClientRect().top
};
......@@ -93,7 +98,10 @@ export default {
this.showSelectUser = true;
this.$nextTick(() => {
const list = textEl.parentNode.querySelector(".md_select_user");
if (list) list.scrollTo(0, 0);
if (list) {
this.activeUserIndex = 0;
list.scrollTo(0, 0);
}
});
});
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或