Skip to content

Commit

Permalink
Merge pull request #16 from li-xiaoqing/dev
Browse files Browse the repository at this point in the history 
feat: 编辑器内容支持滚动,预览同步
  • Loading branch information
@li-xiaoqing
li-xiaoqing authored May 27, 2019
2 parents a71d06e + 9bea6d8 commit d00cf3a
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 143 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "perfect-markdown",
"version": "1.0.12",
"version": "1.0.13",
"main": "src/index.js",
"files": [
"lib",
Expand Down
17 changes: 17 additions & 0 deletions src/utils/scroll.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* 滚动条联动
*/
export function scrollLink(e, vue) {
let element = e.srcElement ? e.srcElement : e.target
let ratio = element.scrollTop / (element.scrollHeight - element.offsetHeight)
if (vue.edit_scroll_height >= 0 && element.scrollHeight !== vue.edit_scroll_height && (element.scrollHeight - element.offsetHeight - element.scrollTop <= 30)) {
// 内容变化 导致 高度增加 且滚动条距离底部小于25px 自动滚动到底部
vue.$refs.inputEdit.scrollTop = element.scrollHeight - element.offsetHeight
ratio = 1
}
vue.edit_scroll_height = element.scrollHeight
// end ----
if (vue.$refs.renderHtml.scrollHeight > vue.$refs.renderHtml.offsetHeight) {
vue.$refs.renderHtml.scrollTop = (vue.$refs.renderHtml.scrollHeight - vue.$refs.renderHtml.offsetHeight) * ratio
}
}
292 changes: 151 additions & 141 deletions src/views/editor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,72 @@
<template>
<div class="editor-box">
<div
:class="[editorIsFullscrean ? 'fullscreen': '','editor']"
>
<div v-show="showToolbar" class="toolbar-box">
<div
:class="[editorIsFullscrean ? 'fullscreen': '','editor']"
>
<div v-show="showToolbar" class="toolbar-box">

<toolbar-left
class="left"
@addImg="addImg"
@addFile="addFile"
:dom="getTextarea"
:customLeftToolbar="customLeftToolbar"
>
<slot name="toolbarLeftBefore" slot="toolbarLeftBefore"></slot>
<slot name="toolbarLeftAfter" slot="toolbarLeftAfter"></slot>
</toolbar-left>
<toolbar-right
class="right"
:dom="getRenderHtml"
:helpDoc="helpDoc"
:customLeftToolbar="customLeftToolbar"
>
<slot name="toolbarRightBefore" slot="toolbarRightBefore"></slot>
<slot name="toolbarRightAfter" slot="toolbarRightAfter"></slot>
</toolbar-right>
<toolbar-left
class="left"
@addImg="addImg"
@addFile="addFile"
:dom="getTextarea"
:customLeftToolbar="customLeftToolbar"
>
<slot name="toolbarLeftBefore" slot="toolbarLeftBefore"></slot>
<slot name="toolbarLeftAfter" slot="toolbarLeftAfter"></slot>
</toolbar-left>
<toolbar-right
class="right"
:dom="getRenderHtml"
:helpDoc="helpDoc"
:customLeftToolbar="customLeftToolbar"
>
<slot name="toolbarRightBefore" slot="toolbarRightBefore"></slot>
<slot name="toolbarRightAfter" slot="toolbarRightAfter"></slot>
</toolbar-right>

</div>
<div class="markdown-body">
<div
v-show="showTextarea"
:class="[editorIsSplit? 'split': 'one', 'markdown-input']"
@scroll="editOnScroll"
ref="inputEdit"
>
<auto-textarea ref="autoTextarea" v-model="localValue"></auto-textarea>
</div>
<div class="markdown-body">
<div
v-show="showTextarea"
:class="[editorIsSplit? 'split': 'one', 'markdown-input']"
>
<auto-textarea ref="autoTextarea" v-model="localValue"></auto-textarea>
</div>
<div
ref="renderHtml"
class="markdown-render"
:class="[showTextarea? editorIsSplit? 'split': 'hidden' : '']"
>
<div v-html="renderValue">
<div
ref="renderHtml"
class="markdown-render"
:class="[showTextarea? editorIsSplit? 'split': 'hidden' : '']"
>
<div v-html="renderValue">

</div>
</div>
<transition name="fade">
<div @click="imgPreviewSrc=null" class="img-preview" v-if="imgPreviewSrc">
<div class="img-box" >
<img
:src="imgPreviewSrc"
alt="预览"
:style="{
height: `${imgHeight}`
}"/>
<div
class="img-op"
@click="opClick"
>
<i class="iconfont icon-zoom-in" @click="zoomIn"></i>
<i class="iconfont icon-zoom-out" @click="zoomOut"></i>
</div>
</div>
<transition name="fade">
<div @click="imgPreviewSrc=null" class="img-preview" v-if="imgPreviewSrc">
<div class="img-box" >
<img
:src="imgPreviewSrc"
alt="预览"
:style="{
height: `${imgHeight}`
}"/>
<div
class="img-op"
@click="opClick"
>
<i class="iconfont icon-zoom-in" @click="zoomIn"></i>
<i class="iconfont icon-zoom-out" @click="zoomOut"></i>
</div>
</div>
</transition>
</div>
</div>
</transition>
</div>

<div ref="copyHtml" class="copy-html">
<div v-html="renderValue">
<div ref="copyHtml" class="copy-html">
<div v-html="renderValue">

</div>
</div>
</div>
</div>
Expand All @@ -84,6 +84,7 @@ import { insertContentAtCaret } from '../utils/insert'
import loader from '../utils/loader'
import external from '../config/external'
import md from '../utils/md'
import { scrollLink } from '../utils/scroll'
export default {
name: 'editor',
data() {
Expand Down Expand Up @@ -307,6 +308,9 @@ export default {
let width = +this.imgHeight.split('%')[0]
let result = width + this.zoomStep > 0 ? width + this.zoomStep : 0
this.imgHeight = `${result}%`
},
editOnScroll(e) {
scrollLink(e, this)
}
},
watch: {
Expand All @@ -317,108 +321,114 @@ export default {
}
</script>
<style lang="less" scoped>
.editor-box {
.editor {
display: flex;
flex-direction: column;
width: 100%;
border: none;
box-shadow: 0 0px 3px#ccc;
background: #fff;
min-height: 400px;
margin: 20px auto;
.fullscreen {
&.fullscreen {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
height: auto;
z-index: 1501;
margin: 0;
}
.editor {
width: 100%;
border: none;
box-shadow: 0 0px 3px#ccc;
background: #fff;
overflow: auto;
.toolbar-box {
display: flex;
flex-wrap: wrap;
padding: 10px;
border-bottom: 1px solid #ccc;
.left {
flex: 3;
justify-content: flex-start;
}
.right {
flex: 1;
justify-content: flex-end;
}
.toolbar-box {
display: flex;
flex-wrap: wrap;
padding: 10px;
border-bottom: 1px solid #ccc;
.left {
flex: 3;
justify-content: flex-start;
}
.right {
flex: 1;
justify-content: flex-end;
}
.markdown-body {
}
.markdown-body {
display: flex;
// min-height: 400px;
flex: 1;
overflow: hidden;
.img-preview {
display: flex;
min-height: 400px;
.img-preview {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1600;
transition: all 0.1s linear 0s;
.img-box {
width: 100%;
height: 100%;
overflow: auto;
img {
max-width: initial;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img-op {
position: absolute;
left: 50%;
bottom: 20px;
background-color: #333333;
border-radius: 5px;
padding: 0 12px;
i {
display: inline-block;
font-size: 20px;
padding: 10px;
color: #fff;
&:hover {
background: #e9e8e8;
color: #333;
}
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1600;
transition: all 0.1s linear 0s;
.img-box {
width: 100%;
height: 100%;
overflow: auto;
img {
max-width: initial;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img-op {
position: absolute;
left: 50%;
bottom: 20px;
background-color: #333333;
border-radius: 5px;
padding: 0 12px;
i {
display: inline-block;
font-size: 20px;
padding: 10px;
color: #fff;
&:hover {
background: #e9e8e8;
color: #333;
}
}
}
}
}
.markdown-input {
padding: 10px 20px;
}
.split {
width: 50%;
box-shadow: 0 0px 3px#ccc;
}
.one {
width: 100%;
}
.hidden {
display: none;
}
.markdown-render {
text-align: left;
padding: 10px 26px;
}
.markdown-input {
padding: 10px 20px;
overflow-y: auto;
overflow-x: hidden;
}
.split {
width: 50%;
box-shadow: 0 0px 3px#ccc;
}
.copy-html {
.one {
width: 100%;
}
.hidden {
display: none;
}
.markdown-render {
text-align: left;
padding: 10px 26px;
overflow-y: auto;
overflow-x: hidden;
}
}
.copy-html {
display: none;
}
}
</style>
6 changes: 5 additions & 1 deletion src/views/markdown-editor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<div class="editor-box">
<div class="editor-demo">
<h1>{{title}}</h1>
<div
class="pmd-editor"
>
<pmd
class="editor-box"
:showTextarea="true"
:showToolbar="true"
v-model="value"
Expand Down Expand Up @@ -44,5 +45,8 @@ export default {
.pmd-editor {
width: 75%;
margin: 0 auto;
.editor-box {
height: 500px;
}
}
</style>

0 comments on commit d00cf3a

Please sign in to comment.