Skip to content

Awesome-Markdown-Editor
Awesome-Markdown-Editor

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

Fork自 gitcode_dev / Awesome-Markdown-Editor

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

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

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

fix:修复样式问题

上级 5e516f8d
展开全部 隐藏空白更改
内联 并排
Showing with 135 addition and 48 deletion
dist/index.html
浏览文件 @ b519cce3
......@@ -23,14 +23,39 @@
<script>
const ee = new MdEditor({
el: "#app", // required
value: "![pic](https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg)\n\n<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />",
themeOptions: {
dark: false,
borderColor: "#dbdbdb",
borderColorActive: "#409eff",
textColor: "#303030",
textColorActive: "#000"
},
value: `![pic](https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg)\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
<a href='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg'>图片</a>\n\n
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg' />\n\n
`,
value: "",
// themeOptions: {
// dark: false,
// borderColor: "green",
// borderColorActive: "#409eff",
// textColor: "#303030",
// textColorActive: "#000"
// },
toolsOptions: {
bold: true,
italic: true,
......@@ -41,13 +66,13 @@
ol: true,
task: true,
table: true,
file: true,
fullScreen: false
file: true,
fullScreen: true
},
zIndex: 7000,
maxLength: 1000,
showWordLimit: true,
rows: "8",
rows: "10",
filePathRule: /^https:\/\/ss2\.bdstatic\.com/,
canPreview: true,
// canAttachFile: true,
......@@ -57,17 +82,16 @@
// console.log(res);
// },
onLoad: function(res) {
console.log('load',res);
console.log("load", res);
},
onBlur: function(res) {
console.log(res);
},
onInput: function(res) {
console.log("input",res);
console.log("input", res);
},
onChange: function(res) {
console.log("change",res);
console.log("change", res);
},
onSubmit: function(res) {
console.log(res);
......@@ -87,16 +111,12 @@
}
});
document.querySelector('#a').onclick = function() {
ee.setValue(234523453245345)
}
document.querySelector('#b').onclick = function() {
ee.setValue(222222222222)
}
document.querySelector("#a").onclick = function() {
ee.focus();
};
document.querySelector("#b").onclick = function() {
ee.setValue("");
};
</script>
</body>
</html>
dist/markdown-editor.js
浏览文件 @ b519cce3
此差异已折叠。
src/App.vue
浏览文件 @ b519cce3
......@@ -24,7 +24,13 @@
id="md-upload-file"
@change="upload"
/>
<markdownPreview :text="text" :html.sync="html" v-show="showPreview" />
<markdownPreview
:id="textareaId"
:fullScreen.sync="fullScreen"
:text="text"
:html.sync="html"
v-show="showPreview"
/>
<markdown-editor
:selectionInfo.sync="selectionInfo"
:text.sync="text"
......@@ -40,7 +46,7 @@
@submit="submit"
v-show="!showPreview"
/>
<div v-if="maxLength && showWordLimit" class="word_limit">
<div v-if="maxLength && showWordLimit && !showPreview" class="word_limit">
<span>{{ textLength }}</span
>/<span>{{ maxLength }}</span>
</div>
......@@ -269,7 +275,7 @@ export default {
width: 100vw;
height: 100vh;
margin: 0;
border: none !important;
border: 1px solid transparent !important;
z-index: var(--md-editor-fullScrren-zIndex);
}
&.active {
......
src/assets/style/markdown.less
浏览文件 @ b519cce3
......@@ -10,6 +10,7 @@
.htmledit_views {
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
img {
max-width: 100%;
height: auto;
......@@ -400,9 +401,14 @@ p[align="center"] {
text-align: center;
}
.htmledit_views strong,
.htmledit_views strong span {
.htmledit_views strong span,
.htmledit_views strong em {
font-weight: 700;
}
.htmledit_views em strong {
font-style: italic;
}
.htmledit_views h1,
.htmledit_views h2,
.htmledit_views h3,
......
src/components/content/md-preview.vue
浏览文件 @ b519cce3
<template>
<div class="htmledit_views">
<div v-html="html"></div>
<div :class="['htmledit_views', { fullScreen }]">
<div v-html="html" :style="{ 'min-height': htmlHeight + 'px' }"></div>
</div>
</template>
<script>
......@@ -8,9 +8,15 @@ import marked from "marked";
import "highlight.js/styles/github.css";
export default {
data() {
return {};
return {
htmlHeight: 150
};
},
props: {
id: {
type: String,
default: ""
},
text: {
type: [String, Number],
default: ""
......@@ -18,8 +24,15 @@ export default {
html: {
type: String,
default: ""
},
fullScreen: {
type: Boolean,
default: false
}
},
mounted() {
this.resetHeight();
},
methods: {
transferMarkdown(val) {
marked.setOptions({
......@@ -32,6 +45,12 @@ export default {
// if (!str.trim()) return;
const html = marked(str);
this.$emit("update:html", html);
},
resetHeight() {
const textEl = document.getElementById(this.id);
if (!textEl) return;
const height = textEl.offsetHeight;
this.htmlHeight = height;
}
},
watch: {
......@@ -46,10 +65,14 @@ export default {
</script>
<style lang="less" scoped>
.htmledit_views {
min-height: 170px;
padding: 10px 0;
// min-height: 148px;
padding: 14px 0;
box-sizing: border-box;
color: var(--md-editor-text-color);
word-break: break-all;
&.fullScreen {
max-height: calc(100% - 42px);
overflow-y: auto;
}
}
</style>
src/components/content/md-textarea.vue
浏览文件 @ b519cce3
......@@ -16,11 +16,6 @@
:style="{ height: editorHeight, overflow: editorOverFlow }"
>
</textarea>
<span
@click="$emit('update:fullScreen', false)"
v-if="fullScreen"
class="icon iconfont icon-quxiaoquanping_o"
></span>
</div>
</template>
<script>
......@@ -92,9 +87,13 @@ export default {
},
fullScreen: {
immediate: true,
handler: function() {
handler: function(val) {
if (val) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
setTimeout(() => {
// if (!this.autoSize) return;
this.reSizeHeight();
}, 0);
}
......
src/components/header/md-header.vue
浏览文件 @ b519cce3
......@@ -19,7 +19,7 @@
<tool-button
:info="item"
:fullScreen="fullScreen"
@setFullScreen="$emit('update:fullScreen', true)"
@setFullScreen="$emit('update:fullScreen', $event)"
@updateText="updateText"
@upload="$emit('upload')"
v-for="(item, index) in toolsShow"
......@@ -63,8 +63,8 @@ export default {
default: () => {}
},
zIndex: {
type: [String,Number],
default: ''
type: [String, Number],
default: ""
},
text: {
type: [String, Number],
......@@ -85,8 +85,32 @@ export default {
});
}
},
watch: {
fullScreen: {
handler: function(val) {
console.log(val);
if (val) {
this.toolButtonList.pop();
this.toolButtonList.push(this.cancelFullScreenBtn);
} else {
this.toolButtonList.pop();
this.toolButtonList.push(this.fullScreenBtn);
}
}
}
},
data() {
return {
cancelFullScreenBtn: {
name: "cancelFullScreen",
icon: "quxiaoquanping_o",
tip: "退出全屏"
},
fullScreenBtn: {
name: "fullScreen",
icon: "fullScreen",
tip: "全屏模式"
},
toolButtonList: [
{
name: "bold",
......
src/components/header/tool-button.vue
浏览文件 @ b519cce3
......@@ -8,7 +8,7 @@
</div>
<div
v-else
v-tip.top="options"
v-tip.bottom="options"
@click="handleTool(info.name, info.startStr, info.endStr)"
class="tool_button"
>
......@@ -89,6 +89,9 @@ export default {
case "fullScreen":
this.$emit("setFullScreen", true);
break;
case "cancelFullScreen":
this.$emit("setFullScreen", false);
break;
default:
break;
}
......@@ -111,6 +114,10 @@ export default {
&:hover {
color: var(--md-editor-text-color-active);
}
&.icon-quxiaoquanping_o {
font-size: 24px;
margin: 0 -4px;
}
}
}
</style>
src/main.js
浏览文件 @ b519cce3
......@@ -64,6 +64,7 @@ function initMdEditor(obj) {
input(val) {
onInput(val);
_this.value = val;
props.value = val.text;
},
load(val) {
onLoad(val);
......@@ -76,6 +77,8 @@ function initMdEditor(obj) {
blur(val) {
onBlur(val);
_this.value = val;
props.focus = false;
_this.vEl.$forceUpdate();
},
submit(val) {
onSubmit(val);
......@@ -103,8 +106,7 @@ function initMdEditor(obj) {
};
this.setValue = function(val) {
if (!val) return;
props.value = val + "";
props.value = (val || "") + "";
this.vEl.$forceUpdate();
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或