Skip to content

Commit

Permalink
feat: update animation and default color theme
Browse files Browse the repository at this point in the history 
更新动画文件和默认颜色主题
  • Loading branch information
@yanglbme
yanglbme committed Dec 25, 2019
1 parent 715d035 commit b5d11db
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 73 deletions.
1 change: 0 additions & 1 deletion assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@ section {
align-items: center;
justify-content: center;
display: flex;
/* height: 100%; */
overflow: scroll;
}

Expand Down
110 changes: 47 additions & 63 deletions assets/scripts/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,25 @@ let app = new Vue({
editor: null,
cssEditor: null,
builtinFonts: [
{
label: '无衬线',
value: "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif"
},
{
label: '衬线',
value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"
}
{ label: '无衬线', value: "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif" },
{ label: '衬线', value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" }
],
sizeOption: [
{ label: '13px', value: '13px', desc: '稍小' },
{ label: '14px', value: '14px', desc: '推荐' },
{ label: '15px', value: '15px', desc: '稍大' }
],
colorOption: [
{ label: '经典蓝', value: 'rgba(15, 76, 129, 0.9)', hex: '最新流行色' },
{ label: '翡翠绿', value: 'rgba(0, 152, 116, 0.9)', hex: '清新且优雅' },
{ label: '辣椒红', value: 'rgba(155, 35, 53, 0.9)', hex: '自信且迷人' }
{ label: '经典蓝', value: 'rgba(15, 76, 129, 1)', hex: '最新流行' },
{ label: '翡翠绿', value: 'rgba(0, 152, 116, 1)', hex: '优雅清新' },
{ label: '活力橘', value: 'rgba(250, 81, 81, 1)', hex: '热情活泼' }
],
showBox: true,
aboutDialogVisible: false
};
d.currentFont = d.builtinFonts[0].value;
d.currentSize = d.sizeOption[1].value;
d.currentColor = d.colorOption[2].value;
d.currentColor = d.colorOption[1].value;
d.status = '1';
return d;
},
Expand All @@ -59,26 +53,26 @@ let app = new Vue({
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-F": function autoFormat(editor) {
var totalLines = editor.lineCount();
'Ctrl-F': function autoFormat(editor) {
const totalLines = editor.lineCount();
editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
}
},
}
);
// 自动提示
this.cssEditor.on("keyup", (cm, e) => {
this.cssEditor.on('keyup', (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e);
}
});
this.editor.on("change", (cm, e) => {
this.editor.on('change', (cm, e) => {
this.refresh();
this.saveEditorContent(this.editor, '__editor_content');
});

// 粘贴上传图片并插入
this.editor.on("paste", (cm, e) => {
this.editor.on('paste', (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
Expand All @@ -87,15 +81,14 @@ let app = new Vue({
if (item.kind === 'file') {
const pasteFile = item.getAsFile();
let data = new FormData();
data.append("file", pasteFile);
data.append('file', pasteFile);
axios.post('https://imgkr.com/api/files/upload', data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(resp => {
this.uploaded(resp.data)
}).catch(err => {
})
}).catch(err => { })
}
}
});
Expand All @@ -109,18 +102,11 @@ let app = new Vue({
size: this.currentSize,
status: this.status
});
// 如果有编辑内容被保存则读取，否则加载默认文档
if (localStorage.getItem("__editor_content")) {
this.editor.setValue(localStorage.getItem("__editor_content"));
} else {
this.editor.setValue(DEFAULT_CONTENT);
}

if (localStorage.getItem("__css_content")) {
this.cssEditor.setValue(localStorage.getItem("__css_content"));
} else {
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
}
// 如果有编辑器内容被保存则读取，否则加载默认内容
this.loadLocalStorage(this.editor, '__editor_content', DEFAULT_CONTENT);
this.loadLocalStorage(this.cssEditor, '__css_content', DEFAULT_CSS_CONTENT);

},
methods: {
renderWeChat(source) {
Expand Down Expand Up @@ -189,9 +175,6 @@ let app = new Vue({
});
}
},
failed(error, file, fileList) {
console.log(error)
},
// 刷新右侧预览
refresh() {
this.output = this.renderWeChat(this.editor.getValue(0));
Expand All @@ -216,7 +199,7 @@ let app = new Vue({
statusChanged() {
this.refresh();
},
// 将左侧编辑器内容保存到 LocalStorage
// 将编辑器内容保存到 LocalStorage
saveEditorContent(editor, name) {
const content = editor.getValue(0);
if (content) {
Expand All @@ -225,6 +208,13 @@ let app = new Vue({
localStorage.removeItem(name);
}
},
loadLocalStorage(editor, name, content) {
if (localStorage.getItem(name)) {
editor.setValue(localStorage.getItem(name));
} else {
editor.setValue(content);
}
},
// 下载编辑器内容到本地
downloadEditorContent() {
let downLink = document.createElement('a');
Expand All @@ -240,7 +230,7 @@ let app = new Vue({
// 自定义CSS样式
async customStyle() {
this.showBox = !this.showBox;
let flag = await localStorage.getItem("__css_content")
let flag = await localStorage.getItem('__css_content')
if (!flag) {
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
}
Expand Down Expand Up @@ -268,33 +258,27 @@ let app = new Vue({
e.clipboardData.setData('text/plain', text);
document.removeEventListener('copy', copyCall);
});

if (document.execCommand('copy')) {
// 模拟一个选中的状态
let clipboardDiv = document.getElementById('output');
clipboardDiv.focus();
window.getSelection().removeAllRanges();
let range = document.createRange();
range.setStartBefore(clipboardDiv.firstChild);
range.setEndAfter(clipboardDiv.lastChild);
window.getSelection().addRange(range);
this.refresh()
this.$notify({
showClose: true,
message: '已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴',
offset: 80,
duration: 1600,
type: 'success'
});
} else {
this.$notify({
showClose: true,
message: '未能复制文章到剪贴板，请全选后右键复制',
offset: 80,
duration: 1600,
type: 'warning'
});
}

// 执行复制
document.execCommand('copy');

// 模拟一个全选的状态
let clipboardDiv = document.getElementById('output');
clipboardDiv.focus();
window.getSelection().removeAllRanges();
let range = document.createRange();
range.setStartBefore(clipboardDiv.firstChild);
range.setEndAfter(clipboardDiv.lastChild);
window.getSelection().addRange(range);

// 输出提示
this.$notify({
showClose: true,
message: '已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴',
offset: 80,
duration: 1600,
type: 'success'
});
}
},
updated() {
Expand Down
17 changes: 8 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
<link rel="stylesheet" href="libs/css/codemirror.min.css">
<link rel="stylesheet" href="libs/css/show-hint.css">
<link rel="stylesheet" href="libs/css/style-mirror.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="libs/css/animate.css">

<!-- 默认CSS/JS -->
<script src="assets/scripts/themes/default-theme-css.js"></script>
Expand All @@ -44,8 +45,7 @@
<el-header class="top">
<!-- 图片上传 -->
<el-upload action="https://imgkr.com/api/files/upload" headers="{'Content-Type': 'multipart/form-data'}"
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :on-success="uploaded"
:on-error="failed">
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :on-success="uploaded">
<el-tooltip class="item" effect="dark" content="点击上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium">&nbsp;</i>
</el-tooltip>
Expand Down Expand Up @@ -102,7 +102,7 @@
<el-main class="main-body">
<el-row :gutter="10" class="main-section">
<el-col :span="12">
<textarea id="editor" type="textarea" placeholder="Your markdown here." v-model="source">
<textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
</textarea>
</el-col>
<el-col :span="12" class="preview-wrapper" id="preview">
Expand All @@ -115,7 +115,7 @@
</el-col>
<transition name="custom-classes-transition" enter-active-class="animated bounceInRight">
<el-col id="cssBox" :span="12" v-show="showBox">
<textarea id="cssEditor" type="textarea" placeholder="Custom css here.">
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
</textarea>
</el-col>
</transition>
Expand All @@ -133,14 +133,13 @@ <h3>一款高度简洁的微信 Markdown 编辑器</h3>
</div>
<span slot="footer" class="dialog-footer">
<a href="https://github.com/doocs/md" target="_blank">
<el-button type="success" plain>GitHub 仓库
</el-button>
<el-button type="success" plain>GitHub 仓库</el-button>
</a>
<a href="https://gitee.com/doocs/md" target="_blank">
<el-button type="success" plain>Gitee 仓库
</el-button>
<el-button type="success" plain>Gitee 仓库</el-button>
</a>
</span>

</el-dialog>
</div>

Expand Down
11 changes: 11 additions & 0 deletions libs/css/animate.css
View file

Large diffs are not rendered by default.

0 comments on commit b5d11db

Please sign in to comment.