提交 b519cce3 编写于 作者: 璃白.'s avatar 璃白. 🌻

fix:修复样式问题

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