Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
风云海OL
Awesome-Markdown-Editor
提交
7dfee441
Awesome-Markdown-Editor
项目概览
风云海OL
/
Awesome-Markdown-Editor
与 Fork 源项目一致
Fork自
gitcode_dev / Awesome-Markdown-Editor
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Awesome-Markdown-Editor
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
7dfee441
编写于
7月 06, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加高度
上级
686ed18d
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
65 addition
and
13 deletion
+65
-13
src/App.vue
src/App.vue
+16
-1
src/assets/js/utils.js
src/assets/js/utils.js
+11
-1
src/components/content/md-preview.vue
src/components/content/md-preview.vue
+15
-1
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+16
-6
src/components/header/md-header.vue
src/components/header/md-header.vue
+4
-4
src/components/header/tool-button.vue
src/components/header/tool-button.vue
+1
-0
src/main.js
src/main.js
+2
-0
未找到文件。
src/App.vue
浏览文件 @
7dfee441
...
...
@@ -31,6 +31,7 @@
:id=
"textareaId"
:fullScreen.sync=
"fullScreen"
:text=
"text"
:height=
"textareaHeight"
:html.sync=
"html"
:htmlMinHeight=
"htmlMinHeight"
v-if=
"showPreview"
...
...
@@ -47,12 +48,14 @@
:maxLength=
"maxLength"
:textLength.sync=
"textLength"
:rows=
"rows"
:height=
"textareaHeight"
:html.sync=
"html"
:id=
"textareaId"
:ref=
"'md_textarea' + id"
@
tab=
"$refs['md_header' + id].tab()"
@
submit=
"submit"
@
enter=
"$refs['md_header' + id].resetUlNum()"
@
getFilteredTags=
"filteredTags = $event"
v-else
/>
<div
v-if=
"maxLength && showWordLimit && !showPreview"
class=
"word_limit"
>
...
...
@@ -101,7 +104,7 @@ export default {
// 初始化时赋值
value
:
{
type
:
[
String
,
Number
],
default
:
"
"
default
:
""
},
// 全屏时的z-index
zIndex
:
{
...
...
@@ -145,6 +148,11 @@ export default {
type
:
[
Number
,
String
],
default
:
""
},
// 高度
height
:
{
type
:
Number
,
default
:
0
},
// 最大长度
maxLength
:
{
type
:
[
Number
,
String
],
...
...
@@ -164,6 +172,11 @@ export default {
computed
:
{
textareaId
()
{
return
"
textarea_
"
+
this
.
id
;
},
textareaHeight
()
{
const
height
=
this
.
height
;
if
(
!
height
)
return
0
;
return
height
-
83
;
}
},
data
()
{
...
...
@@ -172,6 +185,7 @@ export default {
isFocus
:
false
,
showPreview
:
false
,
fileList
:
[],
filteredTags
:
[],
text
:
""
,
html
:
""
,
ulNum
:
1
,
...
...
@@ -242,6 +256,7 @@ export default {
const
checkResult
=
checktUrl
(
val
,
this
.
filePathRule
);
emitContent
.
invalidList
=
checkResult
;
}
emitContent
.
filteredTags
=
this
.
filteredTags
;
this
.
$emit
(
"
change
"
,
emitContent
);
this
.
$emit
(
"
input
"
,
emitContent
);
}
...
...
src/assets/js/utils.js
浏览文件 @
7dfee441
...
...
@@ -173,8 +173,18 @@ export function checkBoswer() {
);
return
agent
!==
null
;
}
// 去除头部空格行
export
function
removeBlankLine
(
val
)
{
if
(
!
val
)
return
""
;
return
val
.
replace
(
/^
\n
/
,
""
);
}
// 获取被过滤掉的标签
export
function
getFilteredTags
(
oldStr
,
newStr
)
{
if
(
oldStr
.
length
-
newStr
.
length
===
0
)
return
[];
const
filteredStr
=
oldStr
.
replace
(
newStr
.
trim
(),
""
);
const
virtualDom
=
document
.
createElement
(
"
div
"
);
virtualDom
.
innerHTML
=
filteredStr
;
const
filteredTags
=
Array
.
from
(
virtualDom
.
getElementsByTagName
(
"
*
"
));
return
filteredTags
;
}
src/components/content/md-preview.vue
浏览文件 @
7dfee441
<
template
>
<div
:class=
"['md_preview',
{ fullScreen }]">
<div
v-html=
"html"
:style=
"
{ 'min-height': htmlMinHeight + 'px' }">
</div>
<div
v-html=
"html"
:style=
"
{
height: height > 0 ? height + 'px' : 'auto',
'min-height': htmlMinHeight + 'px'
}"
>
</div>
</div>
</
template
>
<
script
>
...
...
@@ -21,6 +27,10 @@ export default {
htmlMinHeight
:
{
default
:
""
},
height
:
{
type
:
Number
,
default
:
0
},
html
:
{
type
:
String
,
default
:
""
...
...
@@ -56,6 +66,10 @@ export default {
box-sizing: border-box;
color: var(--md-editor-text-color);
word-break: break-all;
overflow-y: auto;
& > div {
overflow-y: auto;
}
&.fullScreen {
max-height: calc(100% - 42px);
overflow-y: auto;
...
...
src/components/content/md-textarea.vue
浏览文件 @
7dfee441
...
...
@@ -24,6 +24,7 @@
import
{
getSelectionInfo
,
getPosition
,
getFilteredTags
,
throttle
as
throttleFn
}
from
"
@/assets/js/utils
"
;
import
marked
from
"
marked
"
;
...
...
@@ -72,6 +73,10 @@ export default {
type
:
[
String
,
Number
],
default
:
""
},
height
:
{
type
:
Number
,
default
:
0
},
selectionInfo
:
{
type
:
Object
,
default
:
()
=>
{}
...
...
@@ -159,11 +164,7 @@ export default {
gfm
:
true
,
langPrefix
:
"
language-
"
,
highlight
:
function
(
code
,
lang
,
callback
)
{
const
html
=
require
(
"
highlight.js
"
).
highlightAuto
(
code
).
value
;
// const html = require("highlight.js").highlight(code, {
// language: lang || "xml"
// }).value;
let
html
=
require
(
"
highlight.js
"
).
highlightAuto
(
code
).
value
;
return
html
;
}
});
...
...
@@ -174,13 +175,18 @@ export default {
virtualDom
.
innerHTML
=
html
;
virtualDom
.
querySelectorAll
(
"
code
"
).
forEach
(
item
=>
{
if
(
!
/language-/
.
test
(
item
.
className
))
{
item
.
className
=
"
language-
x
ml
"
;
item
.
className
=
"
language-
ht
ml
"
;
}
});
const
DOMPurify
=
require
(
"
dompurify
"
);
const
cleanHtml
=
DOMPurify
.
sanitize
(
virtualDom
.
innerHTML
,
{
FORBID_TAGS
:
[
"
style
"
,
"
script
"
]
});
// console.log(html.length);
// console.log(cleanHtml.length);
const
filteredTags
=
getFilteredTags
(
html
,
cleanHtml
);
this
.
$emit
(
"
getFilteredTags
"
,
filteredTags
);
this
.
$emit
(
"
update:html
"
,
cleanHtml
);
},
input
()
{
...
...
@@ -188,6 +194,8 @@ export default {
this
.
emitText
();
},
reSizeTextareaHeight
()
{
console
.
log
(
"
setHeight
"
);
const
textEl
=
document
.
getElementById
(
this
.
id
);
if
(
!
textEl
)
return
;
const
fontSize
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
font-size
"
);
...
...
@@ -213,6 +221,8 @@ export default {
const
contentHeight
=
hideEl
.
offsetHeight
;
this
.
editorHeight
=
this
.
fullScreen
?
"
calc(100% - 42px)
"
:
this
.
height
?
this
.
height
+
"
px
"
:
this
.
autoSize
?
`
${
contentHeight
+
parseFloat
(
fontSize
)
*
1.2
}
px`
:
"
auto
"
;
...
...
src/components/header/md-header.vue
浏览文件 @
7dfee441
...
...
@@ -200,7 +200,7 @@ export default {
icon
:
"
biaoge
"
,
tip
:
"
添加表格
"
,
startStr
:
"
\n
\n
| header | header |
\n
| ------ | ------ |
\n
| cell | cell |
\n
| cell | cell |
\n\n
"
,
"
\n
| header | header |
\n
| ------ | ------ |
\n
| cell | cell |
\n
| cell | cell |
\n\n
"
,
endStr
:
""
},
{
...
...
@@ -231,14 +231,14 @@ export default {
};
const
newText
=
formatText
(
originalText
,
selectionInfo
,
startStr
,
endStr
);
const
len
=
newText
.
length
-
originalText
.
length
;
this
.
updateText
(
newText
,
len
,
cursorPoint
);
this
.
updateText
(
newText
,
len
);
},
setShowPreview
(
val
)
{
this
.
$emit
(
"
update:showPreview
"
,
val
);
},
handleUpdateText
({
val
,
len
})
{
const
cursorPoint
=
getPosition
(
this
.
id
);
this
.
updateText
(
val
,
len
,
cursorPoint
);
//
const cursorPoint = getPosition(this.id);
this
.
updateText
(
val
,
len
);
},
updateText
(
val
,
len
=
0
)
{
const
textEl
=
document
.
getElementById
(
this
.
id
);
...
...
src/components/header/tool-button.vue
浏览文件 @
7dfee441
...
...
@@ -111,6 +111,7 @@ export default {
selectionInfo
.
selectionEnd
-
selectionInfo
.
selectionStart
+
startStr
.
length
;
this
.
$emit
(
"
updateText
"
,
{
val
:
newText
,
len
});
}
}
...
...
src/main.js
浏览文件 @
7dfee441
...
...
@@ -27,6 +27,7 @@ function initMdEditor(obj) {
zIndex
=
2000
,
filePathRule
,
rows
=
6
,
height
,
tabSize
=
2
,
maxLength
,
showWordLimit
,
...
...
@@ -47,6 +48,7 @@ function initMdEditor(obj) {
themeOptions
,
filePathRule
,
rows
,
height
:
parseInt
(
height
),
id
,
throttle
,
canPreview
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录