init
This commit is contained in:
zhaoxuhui
commit
41c04ba5aa
6
.babelrc
Normal file
6
.babelrc
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
["env", { "modules": false }],
|
||||||
|
"stage-3"
|
||||||
|
]
|
||||||
|
}
|
||||||
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
12
.gitignore
vendored
Normal file
12
.gitignore
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
28
.project
Normal file
28
.project
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<projectDescription>
|
||||||
|
<name>markdown-vue</name>
|
||||||
|
<comment></comment>
|
||||||
|
<projects>
|
||||||
|
</projects>
|
||||||
|
<buildSpec>
|
||||||
|
<buildCommand>
|
||||||
|
<name>com.aptana.ide.core.unifiedBuilder</name>
|
||||||
|
<arguments>
|
||||||
|
</arguments>
|
||||||
|
</buildCommand>
|
||||||
|
</buildSpec>
|
||||||
|
<natures>
|
||||||
|
<nature>com.aptana.projects.webnature</nature>
|
||||||
|
</natures>
|
||||||
|
<filteredResources>
|
||||||
|
<filter>
|
||||||
|
<id>1529661132631</id>
|
||||||
|
<name></name>
|
||||||
|
<type>26</type>
|
||||||
|
<matcher>
|
||||||
|
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||||
|
<arguments>1.0-name-matches-false-false-node_modules</arguments>
|
||||||
|
</matcher>
|
||||||
|
</filter>
|
||||||
|
</filteredResources>
|
||||||
|
</projectDescription>
|
||||||
119
README.md
Normal file
119
README.md
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
# vue-Markdown编辑器
|
||||||
|
### 1.简介
|
||||||
|
|
||||||
|
**一款使用marked和highlight.js开发的一款markdown编辑器，目前只支持在vue项目中使用。
|
||||||
|
编辑器涵盖了常用的markdown编辑器功能，工具栏可自定义配置，也可进行二次开发。**
|
||||||
|
|
||||||
|
|
||||||
|
#### 提供的常用功能
|
||||||
|
|
||||||
|
|
||||||
|
#### 多种主题，分别支持 Light、Dark（vsCode）、OneDark、GitHub四种主题风格
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 一键打印
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2.安装
|
||||||
|
|
||||||
|
```
|
||||||
|
npm i -S vue-meditor
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3.在项目中使用
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
import MarkDown from 'vue-meditor'
|
||||||
|
|
||||||
|
...
|
||||||
|
components:{
|
||||||
|
MarkDown
|
||||||
|
}
|
||||||
|
...
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<mark-down/>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4.props
|
||||||
|
|
||||||
|
名称 | 类型|说明|默认值
|
||||||
|
---|---|---|---
|
||||||
|
title|String|编辑器标题，默认为空，不显示
|
||||||
|
titleStyle|Object|标题样式，如果自定义标题时可自行编写样式
|
||||||
|
initialValue|String|编辑器初始化内容
|
||||||
|
width|Number|编辑器宽度|
|
||||||
|
height|Number|编辑器高度，单位 px|600
|
||||||
|
theme|String|代码块主题配置，共有四个值，分别为Light、Dark、OneDark、GitHub|Light
|
||||||
|
autoSave|Boolean|是否自动保存|true
|
||||||
|
interval|Number|自动保存频率，单位毫秒|10000
|
||||||
|
toolbars|Object|工具栏配置，具体功能详见工具栏功能配置表
|
||||||
|
|
||||||
|
### 5.events
|
||||||
|
|
||||||
|
名称 | 说明
|
||||||
|
---|---
|
||||||
|
on-save|自动保存或者手动保存时触发，返回当前编辑器内原始输入内容和转以后的内容
|
||||||
|
|
||||||
|
### 6.工具栏配置
|
||||||
|
|
||||||
|
名称 | 说明 | 默认显示
|
||||||
|
---|---|---
|
||||||
|
strong|粗体|是
|
||||||
|
italic|斜体|是
|
||||||
|
overline |删除线|是
|
||||||
|
h1 |标题1|是
|
||||||
|
h2 |标题2|是
|
||||||
|
h3 |标题3|是
|
||||||
|
h4|标题4|否
|
||||||
|
h5 |标题5|否
|
||||||
|
h6 |标题6|否
|
||||||
|
hr |分割线|是
|
||||||
|
quote|引用|是
|
||||||
|
ul |无序列表|是
|
||||||
|
ol|有序列表|是
|
||||||
|
code |代码块|是
|
||||||
|
link |链接|是
|
||||||
|
image|image|是
|
||||||
|
table |表格|是
|
||||||
|
checked|已完成列表|是
|
||||||
|
notChecked |未完成列表|是
|
||||||
|
shift|预览|是
|
||||||
|
print |打印|是
|
||||||
|
theme|主题切换|是
|
||||||
|
fullscreen |全屏|是
|
||||||
|
|
||||||
|
|
||||||
|
### 7.其他说明
|
||||||
|
**关于保存时返回值**
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
markdownValue // 编辑器输入的原始内容
|
||||||
|
htmlValue // 右侧现实的问转义后的内容
|
||||||
|
theme // 保存时的主题名字
|
||||||
|
```
|
||||||
|
|
||||||
|
**工具栏配置**
|
||||||
|
|
||||||
|
```
|
||||||
|
// 例：
|
||||||
|
const config = {
|
||||||
|
print:false // 隐藏掉打印功能
|
||||||
|
}
|
||||||
|
<MarkDown :toolbars="config"/>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
**关于二次开发**
|
||||||
|
|
||||||
|
原始文件在src/markdown下，可在其基础上自定义开发，也可将markdown文件夹
|
||||||
|
|
||||||
|
复制到新项目中，安装对应依赖 highlight.js和marked即可
|
||||||
|
|
||||||
11
index.html
Normal file
11
index.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>template</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script src="/dist/build.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8300
package-lock.json
generated
Normal file
8300
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "vue-meditor",
|
||||||
|
"description": "一款使用marked和highlight.js开发的一款markdown编辑器",
|
||||||
|
"version": "0.1.1",
|
||||||
|
"author": "zhaoxuhui<1258835133@qq.com>",
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"keywords": [
|
||||||
|
"markdown编辑器",
|
||||||
|
"vue markdown编辑器",
|
||||||
|
"vue 编辑器"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||||
|
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"highlight.js": "^9.12.0",
|
||||||
|
"marked": "^0.4.0",
|
||||||
|
"vue": "^2.5.11"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not ie <= 8"
|
||||||
|
],
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-core": "^6.26.0",
|
||||||
|
"babel-loader": "^7.1.2",
|
||||||
|
"babel-preset-env": "^1.6.0",
|
||||||
|
"babel-preset-stage-3": "^6.24.1",
|
||||||
|
"cross-env": "^5.0.5",
|
||||||
|
"css-loader": "^0.28.11",
|
||||||
|
"file-loader": "^1.1.4",
|
||||||
|
"less": "^3.0.4",
|
||||||
|
"less-loader": "^4.1.0",
|
||||||
|
"vue-loader": "^13.0.5",
|
||||||
|
"vue-template-compiler": "^2.4.4",
|
||||||
|
"webpack": "^3.6.0",
|
||||||
|
"webpack-dev-server": "^2.9.1"
|
||||||
|
},
|
||||||
|
"readmeFilename": "README.md"
|
||||||
|
}
|
||||||
35
src/App.vue
Normal file
35
src/App.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<div class="container">
|
||||||
|
<mark-down @on-save="save" theme="OneDark" ></mark-down>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//import MarkDown from './markdown/index' // 开发文件
|
||||||
|
import MarkDown from '../dist' // 引入打包好的文件
|
||||||
|
export default {
|
||||||
|
name: 'app',
|
||||||
|
components: {
|
||||||
|
MarkDown
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
save(res){
|
||||||
|
console.log(res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
margin: 20px auto;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2
src/index.js
Normal file
2
src/index.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import markdown from './markdown/index'
|
||||||
|
export default markdown
|
||||||
8
src/main.js
Normal file
8
src/main.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
render: h => h(App)
|
||||||
|
})
|
||||||
|
|
||||||
188
src/markdown/css/common.less
Normal file
188
src/markdown/css/common.less
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
*Author zhaoxuhui
|
||||||
|
*/
|
||||||
|
.markdown-preview {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto!important;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0 20px;
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
top: 7px;
|
||||||
|
left: -20px;
|
||||||
|
background: @content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 0 40px;
|
||||||
|
li {
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: @line-height;
|
||||||
|
color: @title;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
input[type="checkbox"] {
|
||||||
|
position: relative;
|
||||||
|
// transform: translateX(-40px);
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
width: @line-height;
|
||||||
|
height: @line-height;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
background: #fff;
|
||||||
|
top: 0;
|
||||||
|
left: -30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
color: @border;
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid @border;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
del,
|
||||||
|
em,
|
||||||
|
strong {
|
||||||
|
display: inline-block;
|
||||||
|
margin: @margin;
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
position: relative;
|
||||||
|
background: @background;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-left: 5px solid @divider;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: @margin;
|
||||||
|
}
|
||||||
|
/*基本样式*/
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: @title;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
border-bottom: 1px solid @border;
|
||||||
|
//text-align: center;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
/* border-bottom: 1px solid @border; */
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 14px !important;
|
||||||
|
color: @content;
|
||||||
|
margin: @margin;
|
||||||
|
line-height: @line-height;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 80%;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid @border;
|
||||||
|
border-bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 20px 0;
|
||||||
|
tr {
|
||||||
|
-webkit-transition: background 0.1s;
|
||||||
|
transition: background 0.1s;
|
||||||
|
text-align: nav;
|
||||||
|
|
||||||
|
}
|
||||||
|
tr td,
|
||||||
|
tr th {
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 39px;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1px solid @border;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background: #f8f8f9;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
tr:nth-of-type(even) {
|
||||||
|
td {
|
||||||
|
background: #f8f8f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr{
|
||||||
|
&:hover{
|
||||||
|
td{
|
||||||
|
background: #eaf5f6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border: 1px solid @border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type="checkbox"] {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: @primary;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: @line-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1600px ) {
|
||||||
|
.markdown-preview {
|
||||||
|
max-width: 60%;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
133
src/markdown/css/dark.less
Normal file
133
src/markdown/css/dark.less
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
*Author zhaoxuhui
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Dark
|
||||||
|
.Dark {
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
padding: 20px !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #DCDCDC;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
overflow-x: scroll !important;
|
||||||
|
font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace !important;
|
||||||
|
* {
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-symbol {
|
||||||
|
color: #659bd1;
|
||||||
|
}
|
||||||
|
.hljs-keyword{
|
||||||
|
color: #bc89bd;
|
||||||
|
}
|
||||||
|
.hljs-link {
|
||||||
|
color: #569CD6;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-type {
|
||||||
|
color: #4EC9B0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-class,
|
||||||
|
.hljs-number {
|
||||||
|
color: #B8D7A3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta-string,
|
||||||
|
.hljs-string {
|
||||||
|
color: #D69D85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-template-tag {
|
||||||
|
color: #9A5334;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-formula,
|
||||||
|
.hljs-function,
|
||||||
|
.hljs-params,
|
||||||
|
.hljs-subst,
|
||||||
|
.hljs-title {
|
||||||
|
color: #DCDCDC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #57A64A;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag {
|
||||||
|
color: #608B4E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-meta-keyword,
|
||||||
|
.hljs-tag {
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-variable {
|
||||||
|
color: #BD63C5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-builtin-name {
|
||||||
|
color: #9CDCFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section {
|
||||||
|
color: gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-selector-tag {
|
||||||
|
color: #D7BA7D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
background-color: #144212;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
background-color: #600;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.hljs-comment{
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
112
src/markdown/css/gitHub.less
Normal file
112
src/markdown/css/gitHub.less
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
*Author zhaoxuhui
|
||||||
|
*/
|
||||||
|
// gitHub 风格
|
||||||
|
.GitHub {
|
||||||
|
pre {
|
||||||
|
padding: 20px 20px 30px !important;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
color: #333;
|
||||||
|
background: #f7f8fa !important;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
overflow-x: scroll !important;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: Consolas !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #998;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.hljs-keyword{
|
||||||
|
color: #d73a49;
|
||||||
|
}
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-tag .hljs-attr,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-variable {
|
||||||
|
color: #008080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-string {
|
||||||
|
color: #d73a49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-title {
|
||||||
|
color: #900;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-subst {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-class .hljs-title,
|
||||||
|
.hljs-type {
|
||||||
|
color: #458;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-tag {
|
||||||
|
color: #000080;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-regexp {
|
||||||
|
color: #009926;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-symbol {
|
||||||
|
color: #990073;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-builtin-name {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta {
|
||||||
|
color: #999;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
background: #fdd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
background: #dfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
219
src/markdown/css/index.less
Normal file
219
src/markdown/css/index.less
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
|
||||||
|
.markdown {
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
&.fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #eaeaea;
|
||||||
|
min-height: 400px;
|
||||||
|
.markdown-toolbars {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
background: #fff;
|
||||||
|
color: #464c5b;
|
||||||
|
height: 46px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 2px 3px #ddd;
|
||||||
|
padding-left: 4px;
|
||||||
|
border-bottom: 1px solid @border;
|
||||||
|
>li {
|
||||||
|
position: relative;
|
||||||
|
cursor: default;
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
content: attr(name);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
top: 34px;
|
||||||
|
left: 30%;
|
||||||
|
background: #e6e6e6;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 0 6px;
|
||||||
|
border: 1px solid @border;
|
||||||
|
transition: all 0.3s;
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
&:after{
|
||||||
|
right: 20%;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.empty {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
padding: 0 8px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
font-size: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 32px;
|
||||||
|
&:hover {
|
||||||
|
color: @primary;
|
||||||
|
background: @background;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
li:last-child {
|
||||||
|
span {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shift-theme {
|
||||||
|
|
||||||
|
height: 46px;
|
||||||
|
//width: 80px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
padding: 0 8px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
font-size: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 32px;
|
||||||
|
&:hover {
|
||||||
|
color: @primary;
|
||||||
|
background: @background;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999999;
|
||||||
|
top: 46px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -41px;
|
||||||
|
background: #fff;
|
||||||
|
list-style: none;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s;
|
||||||
|
transform-origin: top left;
|
||||||
|
transform: scaleY(0);
|
||||||
|
border: 1px solid @border;
|
||||||
|
border-top: 0;
|
||||||
|
&.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
transition: all 0.3s;
|
||||||
|
padding: 0 15px;
|
||||||
|
width: 82px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-bottom: 1px dashed @border;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: @background;
|
||||||
|
color: @primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.markdown-content {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 12px;
|
||||||
|
.markdown-editor {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.index {
|
||||||
|
background: #272727;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 36px;
|
||||||
|
line-height: @line-height;
|
||||||
|
padding: 12px 0;
|
||||||
|
li {
|
||||||
|
background: #272727;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Consolas;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
outline: none;
|
||||||
|
border: 0;
|
||||||
|
background: #2d2d2d;
|
||||||
|
line-height: @line-height;
|
||||||
|
caret-color: #ccc;
|
||||||
|
color: #669acc;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Consolas;
|
||||||
|
resize: none;
|
||||||
|
padding: 12px 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
&::selection {
|
||||||
|
background: #999;
|
||||||
|
color: @primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.markdown-preview {
|
||||||
|
min-height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px 12px;
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
110
src/markdown/css/light.less
Normal file
110
src/markdown/css/light.less
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
*Author zhaoxuhui
|
||||||
|
*/
|
||||||
|
// 默认风格
|
||||||
|
.Light {
|
||||||
|
pre {
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: #f7f8fb !important;
|
||||||
|
padding: 20px !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
overflow-x: scroll !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
code {
|
||||||
|
line-height: @line-height !important;
|
||||||
|
font-family: Consolas !important;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: @line-height !important;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
color: #525252;
|
||||||
|
padding: 15px;
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
|
}
|
||||||
|
.hljs-doctype {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.hljs-tag {
|
||||||
|
color: #3e76f6;
|
||||||
|
}
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #e96900;
|
||||||
|
}
|
||||||
|
.hljs-value {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
.hljs-keyword {
|
||||||
|
color: #e96900;
|
||||||
|
}
|
||||||
|
.hljs-string {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
.hljs-comment {
|
||||||
|
color: #b3b3b3;
|
||||||
|
}
|
||||||
|
.hljs-operator .hljs-comment {
|
||||||
|
color: #525252;
|
||||||
|
}
|
||||||
|
.hljs-regexp {
|
||||||
|
color: #af7dff;
|
||||||
|
}
|
||||||
|
.hljs-built_in {
|
||||||
|
color: #2db7f5;
|
||||||
|
}
|
||||||
|
.css .hljs-class {
|
||||||
|
color: #e96900;
|
||||||
|
}
|
||||||
|
.css .hljs-number,
|
||||||
|
.javascript .hljs-number {
|
||||||
|
color: #fc1e70;
|
||||||
|
}
|
||||||
|
.css .hljs-attribute {
|
||||||
|
color: #af7dff;
|
||||||
|
}
|
||||||
|
.css .hljs-important {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.actionscript .hljs-literal,
|
||||||
|
.javascript .hljs-literal {
|
||||||
|
color: #fc1e70;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: @background !important;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
display: inline-block;
|
||||||
|
background: #f7f7f7;
|
||||||
|
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #666;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
display: inline;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
pre.bg code {
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
91
src/markdown/css/oneDark.less
Normal file
91
src/markdown/css/oneDark.less
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
*Author zhaoxuhui
|
||||||
|
*/
|
||||||
|
.OneDark {
|
||||||
|
pre {
|
||||||
|
padding: 20px 20px 30px !important;
|
||||||
|
display: block;
|
||||||
|
color: #abb2bf;
|
||||||
|
font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace;
|
||||||
|
background: #292c34;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
overflow-x: scroll !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
* {
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #5c6370;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-formula,
|
||||||
|
.hljs-keyword {
|
||||||
|
color: #c678dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
color: #56b6c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-meta-string,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-string {
|
||||||
|
color: #98c379;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-class .hljs-title {
|
||||||
|
color: #e6c07b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-variable {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-title {
|
||||||
|
color: #61aeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
21
src/markdown/css/theme.less
Normal file
21
src/markdown/css/theme.less
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
*Author zhaoxuhui
|
||||||
|
*/
|
||||||
|
@primary: #1890ff;
|
||||||
|
@line-height: 22px; //主体颜色
|
||||||
|
@primary: #2d8cf0;
|
||||||
|
@lightPrimary: #5cadff;
|
||||||
|
@darkPrimary: #2b85e4; //
|
||||||
|
@info: #2d8cf0;
|
||||||
|
@success: #19be6b;
|
||||||
|
@warning: #ff9900;
|
||||||
|
@error: #ed3f14; //
|
||||||
|
@title: #1c2438;
|
||||||
|
@content: #333;
|
||||||
|
@subColor: #80848f;
|
||||||
|
@disabled: #bbbec4;
|
||||||
|
@border: #dddee1;
|
||||||
|
@divider: #e9eaec;
|
||||||
|
@background: #f8f8f9;
|
||||||
|
@margin: 8px 0;
|
||||||
67
src/markdown/font/iconfont.css
Normal file
67
src/markdown/font/iconfont.css
Normal file
File diff suppressed because one or more lines are too long
BIN
src/markdown/font/iconfont.eot
Normal file
BIN
src/markdown/font/iconfont.eot
Normal file
Binary file not shown.
101
src/markdown/font/iconfont.svg
Normal file
101
src/markdown/font/iconfont.svg
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<!--
|
||||||
|
2013-9-30: Created.
|
||||||
|
-->
|
||||||
|
<svg>
|
||||||
|
<metadata>
|
||||||
|
Created by iconfont
|
||||||
|
</metadata>
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
<font id="iconfont" horiz-adv-x="1024" >
|
||||||
|
<font-face
|
||||||
|
font-family="iconfont"
|
||||||
|
font-weight="500"
|
||||||
|
font-stretch="normal"
|
||||||
|
units-per-em="1024"
|
||||||
|
ascent="896"
|
||||||
|
descent="-128"
|
||||||
|
/>
|
||||||
|
<missing-glyph />
|
||||||
|
|
||||||
|
<glyph glyph-name="md" unicode="" d="M471.289899 141.73866699999996c-6.827051 16.384-16.043051 37.205333-27.648 62.464-10.923008 25.258667-22.869683 52.565333-35.839991 81.92-12.970995 29.354667-26.965649 59.392-41.984 90.112-14.336286 31.402667-27.989606 60.757333-40.96 88.064-12.970914 27.989333-25.258901 52.906667-36.864 74.752-10.92288 21.841067-19.797538 38.5664-26.624 50.176-7.509521-80.554667-13.653517-167.936-18.432-262.144-4.778842-93.525333-8.874837-188.074667-12.288-283.648l-97.28 0c2.730581 61.44 5.80259 123.221333 9.216 185.344 3.413248 62.805333 7.167915 124.245333 11.264 184.32 4.778573 60.757333 9.557235 119.808 14.336 177.152 5.461222 57.339733 11.263885 111.611733 17.408 162.816l87.04 0c18.431774-30.0416 38.229086-65.540267 59.392-106.496 21.162377-40.964267 42.325022-83.972267 63.488-129.024 21.162313-44.373333 41.642274-89.088 61.439991-134.144 19.796949-44.373333 37.887573-84.992 54.272-121.856 16.383531 36.864 34.474197 77.482667 54.272 121.856 19.796821 45.056 40.276821 89.770667 61.44 134.144 21.162112 45.051733 42.324736 88.059733 63.488 129.024 21.162027 40.955733 40.95936 76.4544 59.392 106.496l87.04 0c22.126421-218.018133 38.979968-435.549867 50.560683-667.84 0.56704-11.370667 44.931072 2.005333 45.472853-9.412267l-82.925739-85.713067-109.592363 85.713067c-0.523093 14.647467 50.366165-3.114667 49.810987 11.485867-3.06816 80.661333-6.62464 160.5888-10.670421 239.7824-4.779349 94.208-10.923349 181.589333-18.432 262.144-6.827349-11.6096-16.043349-28.334933-27.648-50.176-10.923307-21.845333-22.869973-46.762667-35.84-74.752-12.971264-27.306667-26.965931-56.661333-41.984-88.064-14.336555-30.72-27.989888-60.757333-40.96-90.112-12.971179-29.354667-25.259179-56.661333-36.864-81.92-10.923179-25.258667-19.797803-46.08-26.624-62.464l-79.872 0" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="editor" unicode="" d="M358.165868 341.37520400000005c-0.533143-0.680499-1.066285-1.391696-1.303692-2.25127399l-41.104163-150.70025701c-2.400676-8.772804 0.059352-18.226107 6.550183-24.89294701 4.860704-4.742001 11.261485-7.350408 18.077727-7.350408 2.252297 0 4.50459401 0.267083 6.72721499 0.86060101l149.63090201 40.808428c0.23842999 0 0.35713399-0.207731 0.53416599-0.207731 1.718131 0 3.408633 0.62216999 4.683672 1.927909l400.11374701 400.054395c11.883655 11.897981 18.40416201 28.10919799 18.404162 45.74280999 0 19.989263-8.476045 39.963177-23.324218 54.767348l-37.786605 37.84493301c-14.81644999 14.848173-34.822087 23.338544-54.797024 23.338544-17.63156599 0-33.842783-6.520507-45.75816-18.388812L358.75836201 342.767923C358.34494599 342.384184 358.46262601 341.82034199 358.165868 341.37520400000005M862.924953 638.80222l-39.74214299-39.71349001-64.42838201 65.45168802 39.180348 39.179324c6.193049 6.222725 18.194384 5.31812199 25.308409-1.822508l37.813211-37.845956c3.94382201-3.941775 6.195096-9.18622 6.195096-14.372336C867.22386201 645.42505799 865.710392 641.57231001 862.924953 638.80222M429.322487 335.09210399999995l288.712541 288.72891399 64.459081-65.49568999L494.314711 270.16127900000004 429.322487 335.09210399999995zM376.718409 218.02996800000005l20.863167 76.580143 55.656601-55.657624L376.718409 218.02996800000005zM888.265084 480.264461c-15.144932 0-27.562752-12.313443-27.62005801-27.66508301l0-372.98282999c0-19.559475-15.885805-35.444257-35.47597899-35.444257L194.22095801 44.17229099999997c-19.559475 0-35.504632 15.883759-35.50463202 35.444257L158.71632599 688.39777799c0 19.575848 15.945157 35.474956 35.50463202 35.47495602l406.36717099 0c15.231913 0 27.592428 12.371772 27.592428 27.60675499 0 15.202237-12.360516 27.59038201-27.592428 27.590382L190.013123 779.069871c-47.68402199 0-86.49290999-38.779212-86.49291-86.49291L103.520213 75.40769001000001c0-47.71369799 38.808888-86.47756 86.49291-86.47756l639.33408301-2e-8c47.715745 0 86.509283 38.76386201 86.50928299 86.47756L915.856489 452.777433C915.794068 467.951017 903.408993 480.264461 888.265084 480.264461" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="checked-false" unicode="" d="M837.91129067 746.24712c9.45807787 0 18.40968747-3.7428448 25.206624-10.53978133 6.79693653-6.79693653 10.53978133-15.74854613 10.53978133-25.206624l0-652.727456c0-9.45807787-3.7428448-18.40968747-10.53978133-25.206624-6.79693653-6.79693653-15.74854613-10.53978133-25.206624-10.53978134L185.18383467 22.026853329999994c-9.45807787 0-18.40968747 3.7428448-25.206624 10.53978134-6.79693653 6.79693653-10.53978133 15.74854613-10.53978134 25.206624L149.43742933 710.49962347c0 9.45807787 3.7428448 18.40968747 10.53978134 25.206624 6.79693653 6.79693653 15.74854613 10.53978133 25.206624 10.53978133L837.91129067 746.24602773M837.91129067 792.09123733L185.18383467 792.09123733c-44.8748416 0-81.59052267-36.71568107-81.59052267-81.59052266l0-652.727456c0-44.8748416 36.71568107-81.59052267 81.59052267-81.59052267l652.727456 0c44.8748416 0 81.59052267 36.71568107 81.59052266 81.59052267L919.50181333 710.49962347C919.50181333 755.37446507 882.78613227 792.09123733 837.91129067 792.09123733L837.91129067 792.09123733z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="yanse" unicode="" d="M190.35392 343.57557333m-26.88 0a26.25 26.25 0 1 1 53.76 0 26.25 26.25 0 1 1-53.76 0ZM246.99392 479.34453333m-42.15456 0a41.1665625 41.1665625 0 1 1 84.30912 0 41.1665625 41.1665625 0 1 1-84.30912 0ZM414.98144 589.8136533300001m-54.39456 0a53.1196875 53.1196875 0 1 1 108.78912 0 53.1196875 53.1196875 0 1 1-108.78912 0ZM634.66496 589.8136533300001m-68.31456 0a66.7134375 66.7134375 0 1 1 136.62912 0 66.7134375 66.7134375 0 1 1-136.62912 0ZM980.85344 656.35125333l-0.7248 0.62976c-10.00608 8.69088-25.16544 7.62432-33.85632-2.38272L584.2784 237.78645332999997l-45.76224-89.9808 82.09824 57.15168 362.62272 417.5376C991.928 632.50197333 990.86048 647.6613333299999 980.85344 656.35125333zM918.83552 424.53333333c-12.87456 0-23.42016-9.9408-24.3984-22.5648l-0.08064 0.00576c0 0-33.92064-179.84064-181.76064-275.83968-159.50016-103.57056-342.07872-56.9616-375.9984 2.87808-18.63936 32.88288-47.04 88.32-63.19968 101.76096-43.39584 36.09408-153.12-13.92-176.16 40.8-42.82176 101.7024 58.24032 365.28 308.80032 430.56 175.3008 46.46592 324.56736-9.50976 399.43872-71.88l0 0.0096c4.152-3.5424 9.53568-5.68608 15.42144-5.68608 13.1328 0 23.77824 10.64544 23.77824 23.77824 0 7.88352-3.83904 14.86752-9.74784 19.19424C803.3984 694.0542933300001 604.4912 846.17397333 326.6768 721.3336533300001c-303.36-136.32-322.56-420.48-259.2-491.52s156.09408-14.84736 176.64-38.4c13.12032-15.04032 30.21408-54.96576 52.63968-91.20096 32.47968-52.47936 194.92416-162.68352 442.7184-15.67872 148.69824 88.21536 201.91968 291.35904 203.83968 313.59936l-0.0816 0.00672c0.04896 0.63168 0.0816 1.26912 0.0816 1.91328C943.31552 413.57301333 932.3552 424.53333333 918.83552 424.53333333z" horiz-adv-x="1037" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="group" unicode="" d="M34.45656213 145.22855360000005l397.95204694 0L432.408608 622.7725376000001 34.45656213 622.7725376000001 34.45656213 145.22855360000005zM87.5167616 569.71233813l291.83055467 0 0-371.4224928-291.83055467 0L87.5167616 569.71233813zM591.58920853 622.7725376000001l0-477.543984 397.95313814 0L989.54234667 622.7725376000001 591.58920853 622.7725376000001zM936.4832384 198.28875413000003l-291.83055467 0L644.65268373 569.71233813l291.83055467 0L936.4832384 198.28875413000003zM565.0585632 808.48378347c0 29.302032-23.73088 53.06020053-53.05910827 53.06020053-29.27583573 0-53.06020053-23.75816853-53.06020053-53.06020053 0-19.63110613 10.68167893-36.75934187 26.53064533-45.93689707L485.46989973 5.454204799999957c-15.8489664-9.17755627-26.53064533-26.3068832-26.53064533-45.93689707 0-29.3031232 23.7843648-53.06020053 53.06020053-53.06020053 29.32822827 0 53.05910827 23.75816853 53.05910827 53.06020053 0 19.63983787-10.66748907 36.77571413-26.53064533 45.95108694L538.5279168 762.5326965300001C554.39107307 771.70697813 565.0585632 788.8428544 565.0585632 808.48378347z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="img" unicode="" d="M427.6145024 231.03597014000002L349.16493547 339.57724800999995C338.77152641 353.95736426999997 321.92075947 353.95721601 311.52745601 339.57724800999995L166.90305387 139.47777068000005C156.5096448 125.09765333999997 162.71110507 113.44053226999995 180.7541664 113.44053226999995L443.41864427 113.44053226999995 843.36921812 113.44053226999995C861.4224096 113.44053226999995 867.48577707 125.07215999000005 856.99141332 139.42049921L627.80094081 452.779408C617.23710081 467.22273919 600.2918496 467.1277472 589.79748587 452.779408L427.6145024 231.03597014000002 427.6145024 231.03597014000002ZM257.35579521 559.0678912000001a62.29333333 62.29333333 0 1 1 127.32210239 0 62.29333333 62.29333333 0 1 1-127.32210239 0ZM82.22029653 718.22051947L941.77970453 718.22051947C932.83477333 718.22051947 925.79683307 725.3427648100001 925.79683307 734.07920001L925.79683307 33.92079998999998C925.79683307 42.675572269999975 932.86973547 49.77948053 941.77970453 49.77948053L82.22029653 49.77948053C91.16522667 49.77948053 98.20316693 42.65723519000005 98.20316693 33.92079998999998L98.20316693 734.07920001C98.20316693 725.32442773 91.1302656 718.22051947 82.22029653 718.22051947ZM34.54211628 33.92079998999998C34.54211628 7.666775479999956 55.83539627-13.88157013 82.22029653-13.88157013L941.77970453-13.88157013C968.0912512-13.88157013 989.45788372 7.578731729999959 989.45788372 33.92079998999998L989.45788372 734.07920001C989.45788372 760.3332245199999 968.16460373 781.88157013 941.77970453 781.88157013L82.22029653 781.88157013C55.9087488 781.88157013 34.54211628 760.42126827 34.54211628 734.07920001L34.54211628 33.92079998999998Z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="theme" unicode="" d="M729.70091738 17.595877340000015H293.3217916c-36.16065 0-65.57925498 29.41950498-65.57925498 65.57925498V460.01782636l-29.80466191-19.06706514c-6.30739336-4.35731221-15.04721513-7.00571513-23.93011934-7.00571513-21.30601377 0-38.35100479 14.15631445-41.45655674 34.4508416l-3.0578581 19.16335371c-5.03133662 31.12841338-11.9407623 73.76473828-12.0136544 100.1506834-0.07199209 26.14477148 22.36519512 51.35184844 36.52150957 61.10135596L324.83536279 765.62269824c6.71684766 4.47789815 12.66338144 4.47789815 18.94647744 4.47789814l38.90444326-0.21687539 14.56486875 0.04859473c6.86173184 0.91519717 12.88025771-2.527817 17.50213917-7.12630195a24.68423496 24.68423496 0 0 0 7.31888086-17.45444531c0.14398417-48.79973408 38.92873974-87.03015293 88.30620966-87.03015206 49.37746992 0 88.18562286 38.23041797 88.30620967 87.03015206a24.76342617 24.76342617 0 0 0 7.29458262 17.45444531c4.64617969 4.62188232 10.66470557 8.30607012 17.5264374 7.12630195l14.61346348-0.04859473 39.0250292 0.21687539c6.42798018 0 12.49510078 0 19.04276689-4.52559287l174.78292412-116.64223593c22.9915248-16.49155253 32.7419332-35.34174141 32.33247891-61.63139707-0.57773496-5.97083115-10.15986182-89.70285323-15.14350372-119.17005293-3.22613877-19.16335372-21.6911707-33.60853565-42.94948974-33.60853652-8.42575606 0-16.32237188 2.35953545-22.87093886 6.86173183l-27.05996865 17.28526377v-375.49464434c0.0027-36.15975-29.41680498-65.57925498-65.57745587-65.57925498z m-477.3065414 512.14253994c4.06844473 0 8.13688857-1.01148662 11.82107548-3.03355986 7.92091318-4.30961748 12.83166299-12.61478672 12.83166299-21.61917862v-421.91054648c0-8.98009453 7.29458261-16.27467714 16.27467716-16.27467715h436.37912578c8.98009453 0 16.27467714 7.29458261 16.27467714 16.27467715V503.64134052a24.6644376 24.6644376 0 0 0 12.80736563 21.61917862c7.94431055 4.28532011 17.50214004 3.99645263 25.1098875-0.84230596l57.41806992-36.66549375c5.05563398 34.78830381 12.7596709 101.98107773 12.85595947 102.72709512-0.02429737 6.28309599-0.98718926 10.54501875-11.24334052 17.91159345L674.49750049 720.77172119l-8.01720264-0.04769385c-5.68196367-0.04769472-12.71107617-0.12058682-20.80027002-0.14398418-11.89306758-63.36460283-68.08367461-111.56230459-135.29984678-111.56230547-67.1927748 0-123.38338096 48.19770176-135.29984589 111.56230547-8.04059912 0.02429737-14.99862041 0.09628945-20.65628672 0.14398418l-7.82462373 0.04769385-164.69595352-112.59808858c-6.21110479-4.28532011-14.85463623-15.91381758-15.11920723-20.36741923 0.07199209-22.43808721 6.6205582-62.85885996 11.38732471-92.37465352l1.25176026-7.82462373 59.68131503 38.23041796a24.5546499 24.5546499 0 0 0 13.28971201 3.90106319z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="strong" unicode="" d="M270.528 1.5359999999999445V766.4639999999999h224.704c67.136 0 120.768-16.064 160.896-48.128 40.256-32.064 60.224-74.624 60.224-127.616 0-42.176-11.904-79.36-35.776-111.616-23.872-32.256-56.768-55.168-98.496-68.672v-1.984c52.032-5.888 93.504-25.6 124.608-59.008s46.72-75.84 46.72-127.104c0-65.856-23.616-119.104-70.848-159.744-47.232-40.704-107.776-60.992-181.504-60.992H270.528zM369.28 680v-239.488h89.856c47.744 0 85.184 11.648 112.32 34.816 27.2 23.232 40.768 55.424 40.768 96.576 0 72.064-48.064 108.16-144.192 108.16H369.28z m0-325.376v-266.624h118.528c51.648 0 91.584 11.968 119.68 35.776 28.096 23.872 42.24 57.088 42.24 99.52 0 87.552-59.392 131.392-178.24 131.392H369.28z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="italic" unicode="" d="M529.86255689 686.13901881c3.17041097 15.82995963 0.67384989 27.45111514-7.63328765 34.97393593-8.28504494 7.5228208-25.17549033 12.83629586-50.46144746 16.00670683-11.09091393 2.37504665-16.60323006 8.69377339-16.60323005 18.96723041 0 2.35295277 0.38663585 4.9157929 1.25932683 7.72166188 0.77327042 2.75063491 1.55758845 6.11988697 2.33085887 10.07461464 23.71732241-2.36399906 46.9817286-4.14252247 69.94787316-5.34661653 22.95509827-1.14886 44.27528016-1.77852341 64.03787359-1.77852212 16.61427636 0 36.78559952 0.62966341 60.41454768 1.77852212 23.72836869 1.20409277 46.31892499 2.99366247 67.63910688 5.34661653 1.53549456-7.90945667 2.30876628-13.84154884 2.30876629-17.79627652 0-11.04672615-5.47917596-16.98986592-16.59218376-17.75209006-25.28595715-3.18145726-43.02699962-8.73796115-53.35568941-16.59218377-10.25136183-7.90945667-16.97881834-19.77364101-20.14922928-35.60359934L515.67855995 76.77948738999999c-3.19250356-15.82995963-0.38663585-27.25227405 8.29609124-34.38846029 8.6716808-7.10304476 26.41272325-12.64850238 53.3556894-16.59218375 10.22926924-2.37504665 15.41018358-8.30713883 15.41018359-17.75208876 0-4.78323218-0.83955078-11.09091393-2.39713924-18.96723041a1387.5240922 1387.5240922 0 0 1-72.25663816 5.30242877 1364.38120044 1364.38120044 0 0 1-66.4681543 1.7785234c-16.59218377 0-36.57571215-0.57442935-59.82907074-1.7785234-23.34173284-1.14886-45.63402752-2.949476-66.95421069-5.30242877-1.6349151 7.87631649-2.41923312 14.18399693-2.41923312 18.96723041 0 9.44495123 4.750092 14.99040754 14.19504452 16.59218247 25.37433139 3.95472769 43.51305602 9.64379231 54.59292235 17.17766069 10.99149339 7.5338671 18.13872462 19.14397761 21.30913558 34.97393594l117.34937651 609.34848512z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="overline" unicode="" d="M837.8784338 392.6585736h-651.7568676a27.61681602 27.61681602 0 1 1 0-55.23363334h651.7568676a27.61681602 27.61681602 0 1 1 0 55.23363334zM642.50602786 31.309099859999947c-29.74883513 3.32506427-55.68654829 8.08620386-68.2466764 14.39388431-12.57117442 6.27454027-23.59580798 17.00091221-23.59580798 32.23434862V293.23803435h-88.37381311v-215.30070156c0-15.23343638-4.28612948-25.78305985-17.50906121-31.73724592s-33.51576802-10.91416543-63.28669702-14.89098701c-6.60594207-1.3145609-9.32343681-6.62803595-9.32343681-15.86309981 0-4.63962516 0.91687873-10.25136183 2.27562481-16.8462576 21.14343469 1.3145609 43.93283205 2.46341959 68.09202309 3.46867258a1716.09792816 1716.09792816 0 0 0 141.91729601 0c23.45220097-1.01629929 45.78868212-2.15411168 66.96525698-3.46867258 1.29246701 6.60594207 1.99945709 12.20663245 1.99945708 16.8462576 0 10.58276364-3.63437348 15.86309981-10.91416544 15.86309981zM224.48684676 623.9217942099999a12.15139967 12.15139967 0 0 1 6.42919486 6.93734386 656.28602594 656.28602594 0 0 0 22.80044368 43.65666433c7.29083955 12.53803424 15.88519239 22.81148996 25.80515373 30.73199292 9.89786746 7.94259684 21.64053738 11.40022183 35.21696479 15.36599712 13.53223964 3.96577526 30.24593782 3.44657869 50.0748116 3.44657869H462.28973037v-287.21489162h88.37381311v287.21489162h111.67135817c19.82887378 0 36.53152438 0.51919658 50.07481162-3.44657869 13.55433353-3.95472769 25.10920996-8.6716808 34.74195597-16.61427765a109.78236923 109.78236923 0 0 0 25.26386326-30.10232951 442.53186655 442.53186655 0 0 0 21.83937845-43.33630882c1.3145609-3.31401797 3.62332589-5.46812965 6.92629757-6.78268926 3.32506427-1.3256072 6.29663415-1.90003654 8.93680224-1.90003783 3.96577526 0 7.44549414 0.69594378 10.41706274 2.02155095 2.98261618 1.3256072 6.10883937 2.67330827 9.43390493 3.98786917-7.29083955 22.46904187-12.40547351 42.99385943-15.388091 61.50817362a997.55255074 997.55255074 0 0 1-8.43969824 46.61718533c-2.65121438 12.56012813-5.45708336 22.31438726-8.41760566 29.26277871-2.98261618 6.93734386-7.78794224 10.40601645-14.39388559 10.40601646-5.29138246 0-12.08511932-0.3424481-20.3259765-1.0052517-8.28504494-0.66280359-17.34336031-1.3256072-27.27436793-1.98841079-9.91996004-0.66280359-19.85096767-2.05469115-29.74883512-2.72854103-9.91996004-0.66280359-18.83466839-1.71224305-26.77726525-1.71224306H347.93401634c-8.58330656 0-17.840463 1.06048575-27.74937675 1.71224306-9.94205392 0.67384989-19.67422048 1.69014917-29.27382502 2.35295276-9.57751195 0.67384989-18.68001508 1.51340197-27.27436795 2.17620428-8.58330656 0.66280359-15.21134251 1.09362593-19.82887507 1.09362593-6.62803595 0-11.41126813-3.28087779-14.39388431-9.88681987-2.96052229-6.62803595-5.77743757-16.00670683-8.41760565-28.24647944-2.65121438-12.22872633-5.63383056-27.60576973-8.93680224-46.10903763-3.32506427-18.51431419-8.28504494-39.65774886-14.890987-63.46344422 5.30242877-3.96577526 11.56592274-5.95418606 18.85676227-5.95418477 2.65121438 0.01104629 5.45708336 0.66280359 8.46179214 1.99945708z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="exit-full-screen" unicode="" d="M142.4 799.2l-44.8-44.8 173.6-174.4-68-68H384V692.8l-67.2-67.2zM752.8 580l173.6 174.4-44.8 44.8-174.4-173.6-67.2 67.2V512h180.8zM270.4 188.79999999999995l-169.6-170.4 44.8-49.6 170.4 174.4 68-68V256H203.2zM820.8 256H640v-180.8l68 68 170.4-174.4 44.8 49.6-169.6 170.4z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="horizontal" unicode="" d="M962.23301298 384c0-28.40586801-23.07976821-51.48563623-51.48563622-51.48563623l-804.59622112 0c-28.40586801 0-51.48563623 23.07976821-51.48563623 51.48563623s23.07976821 51.48563623 51.48563623 51.48563623L910.74737676 435.48563623c28.40586801 0 51.48563623-23.07976821 51.48563622-51.48563623z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="quote" unicode="" d="M310.726085 360.026512h151.998727v-290.768856H171.941361V326.98420899999996c-8.876637 162.934578 72.698904 286.334186 244.522282 370.071112l66.084604-99.123259c-110.173443-57.307705-167.481148-136.606312-171.825811-237.90555h0.003649z m370.084491 0h152.001159v-290.768856h-290.783451V326.98420899999996c-8.883935 162.934578 72.696471 286.334186 244.519849 370.071112l66.087038-99.123259c-114.611762-61.754538-171.824595-141.054361-171.824595-237.90555z m0 0" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="bg" unicode="" d="M789.751935 411.598762a37.500578 37.500578 0 0 1-6.911369 43.772005L519.312613 718.834726a37.244601 37.244601 0 0 1-52.667194 0.383965L175.983941 428.621208a37.116613 37.116613 0 0 1-7.807287-40.508303c10.559036 10.879007 29.757285 17.790377 56.954803 18.750289l508.945558 17.5344c26.237606 0.895918 44.987895-3.83965 55.67492-12.798832zM473.4288 764.718539L373.597909 864.54943a18.558307 18.558307 0 0 0 0.447959 25.917635 18.558307 18.558307 0 0 0 25.981629 0.447959l178.799685-178.799685 230.378978-230.378977c29.181337-29.245331 29.309326-76.473022 0.383965-105.462377l-290.661477-290.597483a74.553197 74.553197 0 0 0-105.462377 0.319971L150.002312 349.52442599999995a74.617191 74.617191 0 0 0-0.383965 105.462376L440.279824 745.520291a73.593285 73.593285 0 0 0 33.21297 19.198248z m0 0a74.873168 74.873168 0 0 0 72.313401-19.518219l33.084981-33.084981 33.084981-33.148975a18.558307 18.558307 0 0 0-0.383965-25.917635 18.558307 18.558307 0 0 0-25.981629-0.447959L473.4288 764.718539z m387.996595-576.779368c0-34.684835-27.709472-62.714277-61.882353-62.714278a62.330312 62.330312 0 0 0-61.818359 62.714278c0 34.620841 61.818359 118.773162 61.818359 118.773161s61.882353-84.152321 61.882353-118.773161zM0-0.01167899999995825h1023.906569v-127.988321H0v127.988321z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="table" unicode="" d="M513.7 775.9h385.5c44.3 0 59.5-15 59.5-59 0-221.1 0-442.3-0.1-663.4 0-44.6-14.8-59.6-58.8-59.6-259.2-0.1-518.5-0.1-777.7 0-41 0-57.1 15.7-57.1 56.8-0.2 223.4-0.2 446.8 0 670.1 0 39.6 16.2 55 56.5 55.1 130.7 0.1 261.4 0 392.2 0zM345.3 202.79999999999995h-222v-150.7h222V202.79999999999995z m277-151.6V202.10000000000002H401.5v-150.9h220.8z m55.9 1.2h222.2V202.5H678.2v-150.1zM123.6 405.1v-149.4h221V405.1h-221zM678 253.70000000000005c72.4 0 142.3-0.2 212.2 0.5 3.8 0 10.7 6.6 10.7 10.3 0.7 46.7 0.5 93.3 0.5 139.8H677.9c0.1-50.4 0.1-98.7 0.1-150.6z m-277.5 1.8h222.1V404.4H400.5v-148.9z m-55.7 200.9V606.6H121.9c0-46.8-0.5-91.5 0.6-136.1 0.1-4.8 9.2-13.4 14.2-13.5 68.6-0.9 137.3-0.6 208.1-0.6z m56.3 2.1h221V607.2h-221v-148.7z m498.8-0.7V607.3H678.5v-149.5h221.4z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="preview" unicode="" d="M510.72 226.88c-90.24 0-164.8 73.06666667-164.8 164.8s74.45333333 163.30666667 164.8 163.30666667 164.8-73.06666667 164.8-164.8-73.17333333-163.30666667-164.8-163.30666667z m0 277.97333333c-63.04 0-113.17333333-50.13333333-113.17333333-113.17333333s50.13333333-113.17333333 113.17333333-113.17333333 113.17333333 50.13333333 113.17333333 113.17333333-50.13333333 113.17333333-113.17333333 113.17333333zM787.94666667 592.3199999999999m-26.66666667 0a26.66666667 26.66666667 0 1 1 53.33333333 0 26.66666667 26.66666667 0 1 1-53.33333333 0ZM896.32 526.0799999999999l-38.4-34.24c37.86666667-42.66666667 59.73333333-81.6 59.73333333-100.90666667 0-55.89333333-183.36-276.48-406.93333333-276.48S103.78666667 336.53333333 103.78666667 390.93333333s183.36 276.48 406.93333333 276.48c97.70666667 0 187.84-42.24 258.24-94.29333333l33.70666667 41.28c-79.46666667 61.01333333-181.33333333 109.01333333-291.94666667 109.01333333C258.56 723.41333333 52.26666667 474.13333333 52.26666667 390.93333333c0-110.29333333 206.29333333-332.37333333 458.45333333-332.37333333s458.45333333 249.28 458.45333333 332.37333333c0 29.97333333-26.77333333 81.49333333-72.85333333 135.14666667zM879.68 505.92m-25.81333333 0a25.81333333 25.81333333 0 1 1 51.62666666 0 25.81333333 25.81333333 0 1 1-51.62666666 0Z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="full-screen" unicode="" d="M611.03217778 453.90506667c-8.73813333 0-14.56355555 2.91271111-20.38897778 8.73813333-11.65084445 11.65084445-11.65084445 29.12711111 0 40.77795555l250.49315555 250.49315556c11.65084445 11.65084445 29.12711111 11.65084445 40.77795556 0s11.65084445-29.12711111 0-40.77795556l-250.49315556-250.49315555c-5.82542222-5.82542222-14.56355555-8.73813333-20.38897777-8.73813333zM867.35075555 573.32622222c-17.47626667 0-29.12711111 11.65084445-29.1271111 29.12711111V710.2236444499999h-107.77031112c-17.47626667 0-29.12711111 11.65084445-29.12711111 29.1271111s11.65084445 29.12711111 29.12711111 29.12711112h136.89742222c17.47626667 0 29.12711111-11.65084445 29.12711112-29.12711112v-136.89742222c0-17.47626667-11.65084445-29.12711111-29.12711112-29.12711111zM159.56195555 5.347555550000038c-8.73813333 0-14.56355555 2.91271111-20.38897777 8.73813334-11.65084445 11.65084445-11.65084445 29.12711111 0 40.77795556l250.49315555 250.49315555c11.65084445 11.65084445 29.12711111 11.65084445 40.77795556 0s11.65084445-29.12711111 0-40.77795555l-250.49315556-250.49315556c-5.82542222-5.82542222-11.65084445-8.73813333-20.38897778-8.73813334zM293.54666667-0.4778666700000258H156.64924445c-17.47626667 0-29.12711111 11.65084445-29.12711112 29.12711112v136.89742222c0 17.47626667 11.65084445 29.12711111 29.12711112 29.12711111s29.12711111-11.65084445 29.1271111-29.12711111v-107.77031112h107.77031112c17.47626667 0 29.12711111-11.65084445 29.12711111-29.1271111s-11.65084445-29.12711111-29.12711111-29.12711112zM861.52533333 2.434844450000014c-8.73813333 0-14.56355555 2.91271111-20.38897778 8.73813333l-250.49315555 250.49315555c-11.65084445 11.65084445-11.65084445 29.12711111 0 40.77795556s29.12711111 11.65084445 40.77795555 0l250.49315556-250.49315556c11.65084445-11.65084445 11.65084445-29.12711111 0-40.77795555-5.82542222-5.82542222-14.56355555-8.73813333-20.38897778-8.73813333zM867.35075555-0.4778666700000258h-136.89742222c-17.47626667 0-29.12711111 11.65084445-29.12711111 29.12711112s11.65084445 29.12711111 29.12711111 29.1271111h107.77031112v107.77031112c0 17.47626667 11.65084445 29.12711111 29.1271111 29.12711111s29.12711111-11.65084445 29.12711112-29.12711111v-136.89742222c0-17.47626667-11.65084445-29.12711111-29.12711112-29.12711112zM412.96782222 453.90506667c-8.73813333 0-14.56355555 2.91271111-20.38897777 8.73813333L139.17297778 713.13635555c-11.65084445 11.65084445-11.65084445 29.12711111 0 40.77795556s29.12711111 11.65084445 40.77795555 0l250.49315556-250.49315556c11.65084445-11.65084445 11.65084445-29.12711111 0-40.77795555-2.91271111-5.82542222-11.65084445-8.73813333-17.47626667-8.73813333zM156.64924445 573.32622222c-17.47626667 0-29.12711111 11.65084445-29.12711112 29.12711111V739.35075555c0 17.47626667 11.65084445 29.12711111 29.12711112 29.12711112h136.89742222c17.47626667 0 29.12711111-11.65084445 29.12711111-29.12711112s-11.65084445-29.12711111-29.12711111-29.1271111H185.77635555v-107.77031112c0-17.47626667-14.56355555-29.12711111-29.1271111-29.12711111z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="checked" unicode="" d="M883.37066667 806.34346667H177.03786667c-43.69066667 0-80.0992-36.4096-80.0992-80.10026667V12.629333330000009c0-43.69066667 36.40853333-80.0992 80.0992-80.0992h713.61493333c43.69066667 0 80.0992 36.40853333 80.0992 80.0992V726.2432c-7.28213333 43.69066667-43.69066667 80.10026667-87.38133333 80.10026667z m29.12746666-786.432c0-14.56426667-14.56426667-29.12746667-29.12746666-29.12746667H177.03786667c-14.5632 0-29.1264 14.5632-29.1264 29.12746667V726.2432c0 14.56426667 14.5632 29.12746667 29.1264 29.12746667h713.61493333c14.5632 0 29.1264-14.5632 29.1264-29.12746667v-706.33173333h-7.28106667zM468.30933333 143.70133333c-14.5632 0-29.12746667 7.28213333-36.40853333 14.5632l-174.76266667 174.76266667c-21.84533333 21.84533333-21.84533333 58.25493333 0 80.10026667 21.84533333 21.84533333 58.25386667 21.84533333 80.0992 0l167.48053334-167.4816c21.84533333-21.84533333 21.84533333-58.25386667 0-80.0992-7.28106667-14.5632-21.84533333-21.84533333-36.40853334-21.84533334zM468.30933333 143.70133333c-14.5632 0-29.12746667 7.28213333-36.40853333 14.5632-29.12746667 29.12746667-29.12746667 58.25493333 0 80.10026667L766.86186667 580.608c21.84533333 21.84533333 58.25493333 21.84533333 80.10026666 0 21.84533333-21.84533333 21.84533333-58.25386667 0-80.0992L504.71786667 158.26453332999995c-7.28106667-7.28106667-21.84533333-14.5632-36.40853334-14.5632z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="html" unicode="" d="M626.7 777H173c-15.4 0-28 12.6-28 28s12.6 28 28 28h453.7c15.4 0 28-12.6 28-28s-12.6-28-28-28zM851.3-62.60000000000002H173.5c-15.4 0-28 12.6-28 28s12.6 28 28 28h677.8c15.4 0 28-12.6 28-28s-12.6-28-28-28zM173-62.60000000000002c-15.4 0-28 12.6-28 28V801.1c0 15.4 12.6 28 28 28s28-12.6 28-28v-835.6c0-15.5-12.6-28.1-28-28.1zM854.3-62.60000000000002c-15.4 0-28 12.6-28 28v591c0 15.4 12.6 28 28 28s28-12.6 28-28v-591c0-15.4-12.6-28-28-28zM847 547.3H629c-15.4 0-28 12.6-28 28V803.8c0 15.4 29.1 19.7 44.5 19.7L875 575.3c0-15.4-12.6-28-28-28zM412.8 263.29999999999995L305 330.20000000000005V356l107.8 72.2v-38.3l-77.5-46.3 77.5-43.7v-36.6zM533.1 454.9l-33.9-228.1H476l33.9 228.1h23.2zM596.3 263.29999999999995v36.5l76.6 43.7-76.6 46.3v38.3L704.1 356v-25.8l-107.8-66.9z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="ul" unicode="" d="M149.3 746.7c47.1 0 85.3-38.2 85.3-85.3 0-47.1-38.2-85.3-85.3-85.3S64 614.2 64 661.3c0 47.2 38.2 85.4 85.3 85.4zM149.3 469.3c47.1 0 85.3-38.2 85.3-85.3s-38.2-85.3-85.3-85.3S64 336.9 64 384s38.2 85.3 85.3 85.3zM149.3 192c47.1 0 85.3-38.2 85.3-85.3 0-47.1-38.2-85.3-85.3-85.3S64 59.5 64 106.70000000000005c0 47.1 38.2 85.3 85.3 85.3zM362.7 704h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7zM362.7 426.7h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7zM362.7 149.29999999999995h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="link" unicode="" d="M878 750C812 822 692 822 626 750L524 654c-60-66-66-162-18-234l-30-30c-72 48-168 42-234-18L146 270C74 198 74 84 146 18c72-72 186-72 252 0 0 0 108 108 108 114 48 60 54 150 6 216l30 30c72-48 168-42 228 18 0 0 108 108 108 114 72 72 66 174 0 240z m-420-594l-96-96c-48-48-126-48-168 0-48 48-48 126 0 168L290 324c42 42 102 48 144 18-12-12-12-30 0-42s30-12 42 0c24-42 18-102-18-144z m378 384L740 444c-36-36-96-42-144-18l6 6c12 12 12 30 0 42s-30 6-42-6l-6-6c-30 48-24 108 12 150l96 96c48 48 126 48 168 0 54-48 54-120 6-168z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="dayin" unicode="" d="M866.0764448 618.38222187h-50.51733333V748.08888853a96.0284448 96.0284448 0 0 1-101.03466667 91.02222294H299.008a86.92622187 86.92622187 0 0 1-91.02222187-91.02222294v-129.70666666H147.91111147a86.92622187 86.92622187 0 0 1-91.02222294-91.02222187v-346.79466667a95.11822187 95.11822187 0 0 1 91.02222294-100.1244448h60.52977706v-55.97866666a95.57333333 95.57333333 0 0 1 95.57333334-95.57333334h415.97155626a95.57333333 95.57333333 0 0 1 95.57333334 95.57333334v55.97866666h50.51733333a104.2204448 104.2204448 0 0 1 101.03466667 100.1244448V527.36a96.0284448 96.0284448 0 0 1-101.03466667 91.02222187zM263.9644448 748.08888853a32.768 32.768 0 0 0 35.0435552 35.95377814h415.5164448c20.02488853 0 45.51111147-12.288 45.5111104-35.95377814v-129.70666666H263.9644448z m496.0711104-723.62666666a40.04977813 40.04977813 0 0 0-40.04977707-40.50488854H304.01422187a40.04977813 40.04977813 0 0 0-40.04977707 40.50488854v182.0444448a40.04977813 40.04977813 0 0 0 40.04977707 40.96h415.97155626a40.04977813 40.04977813 0 0 0 40.04977707-40.50488854z m152.00711147 156.10311146a48.69688853 48.69688853 0 0 0-45.51111147-45.51111146h-50.97244373v70.54222293a95.57333333 95.57333333 0 0 1-95.57333334 95.57333333H304.01422187a95.57333333 95.57333333 0 0 1-95.57333334-95.57333333v-69.632H147.91111147a40.04977813 40.04977813 0 0 0-35.49866667 45.5111104v345.8844448A33.22311147 33.22311147 0 0 0 147.91111147 563.31377813h718.16533333c20.48 0 45.51111147-12.288 45.5111104-35.95377813z m-682.66666667 299.91822187h-40.04977813a14.1084448 14.1084448 0 0 0 0 27.76177813h41.41511146a14.1084448 14.1084448 0 1 0 0-27.76177813z m100.5795552 0H284.4444448a14.1084448 14.1084448 0 1 0 0 27.76177813h45.5111104a14.1084448 14.1084448 0 0 0 0-27.76177813z m455.11111147-124.24533333H230.74133333a14.1084448 14.1084448 0 0 0 0 27.76177813H785.06666667a14.1084448 14.1084448 0 0 0 0-27.76177813z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="code" unicode="" d="M288.145625 154.39312500000005c-7.205625 0-14.431875 2.60625-20.165625 7.865625L45.374375 367.25250000000005a29.806875 29.806875 0 0 0-9.58875 21.890625 29.8125 29.8125 0 0 0 9.58875 21.890625l222.60375 204.995625c12.1275 11.1 30.9375 10.35375 42.05625-1.734375 11.139375-12.088125 10.363125-30.9075-1.725-42.046875L109.458125 389.143125l198.855-183.105c12.088125-11.139375 12.8625-29.95875 1.725-42.046875a29.67375 29.67375 0 0 0-21.8925-9.598125zM735.854375 148.27125c-8.019375 0-16.02 3.225-21.890625 9.598125-11.139375 12.088125-10.363125 30.91875 1.74375 42.046875l198.834375 183.095625-198.855 183.105c-12.088125 11.139375-12.8625 29.95875-1.725 42.046875 11.158125 12.0975 29.949375 12.834375 42.05625 1.734375l222.60375-204.995625a29.75625 29.75625 0 0 0-0.020625-43.78125l-222.6-204.98625a29.664375 29.664375 0 0 0-20.146875-7.86375zM394.20875 48.94124999999997c-3.6225 0-7.303125 0.6675-10.88625 2.071875-15.285 6.015-22.820625 23.285625-16.815 38.58L606.52625 700.18125c6.024375 15.30375 23.24625 22.820625 38.589375 16.805625 15.285-6.015 22.820625-23.285625 16.815-38.58L421.91 67.81875000000002c-4.610625-11.720625-15.826875-18.8775-27.70125-18.8775z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="underline" unicode="" d="M784.72727281-19.636364060000005h-523.63636406a32.72727281 32.72727281 0 0 0 0 65.45454562h523.63636406a32.72727281 32.72727281 0 0 0 0-65.45454562z m-261.81818156 98.18181844C360.49454563 78.54545438000002 228.36363594 210.67636405999997 228.36363594 373.09090875000004v370.90909125a32.72727281 32.72727281 0 0 0 65.45454562 0v-370.90909125C293.81818156 246.76363593999997 396.58181844 144 522.90909125 144S752 246.76363593999997 752 373.09090875000004v370.90909125a32.72727281 32.72727281 0 0 0 65.45454562 0v-370.90909125C817.45454562 210.67636405999997 685.32363594 78.54545438000002 522.90909125 78.54545438000002z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="ol" unicode="" d="M349.29890773 763.63588267h542.33697494a54.23369707 54.23369707 0 0 0 0-108.4673952h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.4673952z m0-325.4021856h542.33697494a54.23369707 54.23369707 0 0 0 0-108.46739414h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.46739414z m0-325.40218454h542.33697494a54.23369707 54.23369707 0 0 0 0-108.4673952h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.4673952zM97.1122144 760.3818602700001v25.48983786a167.03978773 167.03978773 0 0 1 24.9475008 0 35.25190293 35.25190293 0 0 1 18.43945707 10.30440214 33.08255573 33.08255573 0 0 1 7.59271786 13.55842453 31.45554453 31.45554453 0 0 1 0 7.59271787H182.801456v-189.27560427h-40.67527253V760.3818602700001z m0-420.3111552a108.4673952 108.4673952 0 0 0 37.96358827 40.6752736 279.8458784 279.8458784 0 0 1 33.6248928 26.57451093 39.59059947 39.59059947 0 0 1 11.93141333 27.65918613 30.3708704 30.3708704 0 0 1-6.50804373 20.06646827 23.86282667 23.86282667 0 0 1-19.5241312 8.13505387 23.3204896 23.3204896 0 0 1-26.03217494-12.4737504 63.45342613 63.45342613 0 0 1-4.33869546-23.3204896h-35.251904a92.7396224 92.7396224 0 0 0 8.677392 39.59059946 54.23369707 54.23369707 0 0 0 54.23369706 28.7438592 67.7921216 67.7921216 0 0 0 48.26799147-16.81244586 58.5723936 58.5723936 0 0 0 17.89712-44.471632 60.7417408 60.7417408 0 0 0-12.4737504-37.96358827 126.90685227 126.90685227 0 0 0-27.65918613-24.40516373l-15.18543467-10.8467392-19.5241312-14.64309867a42.8446208 42.8446208 0 0 1-8.677392-10.30440213h83.5198944v-33.08255574H86.80781227a90.02793813 90.02793813 0 0 0 8.67739093 37.4212512z m27.11684907-304.2510432a43.38695787 43.38695787 0 0 1 3.7963584-18.98179414 25.48983787 25.48983787 0 0 1 24.9475008-14.10076053 27.65918613 27.65918613 0 0 1 17.35478293 5.4233696 28.2015232 28.2015232 0 0 1 8.13505493 21.6934784 24.9475008 24.9475008 0 0 1-15.18543466 25.48983787 78.0965248 78.0965248 0 0 1-27.11684907 7.0503808v27.11684906a71.58848107 71.58848107 0 0 1 25.48983787 3.7963584 22.23581547 22.23581547 0 0 1 12.4737504 23.32049067 24.9475008 24.9475008 0 0 1-6.50804374 17.89712 23.3204896 23.3204896 0 0 1-17.89712 7.0503808 22.77815253 22.77815253 0 0 1-19.5241312-8.677392 35.79424 35.79424 0 0 1-5.96570666-22.77815253h-35.251904a94.90897067 94.90897067 0 0 0 4.8810336 27.116848 61.28407787 61.28407787 0 0 0 14.6430976 20.60880533 50.97967573 50.97967573 0 0 0 17.354784 10.30440213 76.4695136 76.4695136 0 0 0 24.9475008 2.71168534 66.70744747 66.70744747 0 0 0 44.47163093-14.1007616 47.18331627 47.18331627 0 0 0 16.81244693-37.96358827 42.30228373 42.30228373 0 0 0-10.3044032-28.7438592 34.16722987 34.16722987 0 0 0-13.01608746-9.76206613 27.11684907 27.11684907 0 0 0 14.64309866-8.67739094 47.18331627 47.18331627 0 0 0 14.64309867-36.33657706 61.28407787 61.28407787 0 0 0-16.81244587-42.84462187 64.53810027 64.53810027 0 0 0-49.89500266-18.43945707 60.7417408 60.7417408 0 0 0-54.23369707 26.574512 79.18119787 79.18119787 0 0 0-9.219728 36.87891414z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</font>
|
||||||
|
</defs></svg>
|
||||||
|
After Width: | Height: | Size: 36 KiB |
BIN
src/markdown/font/iconfont.ttf
Normal file
BIN
src/markdown/font/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/markdown/font/iconfont.woff
Normal file
BIN
src/markdown/font/iconfont.woff
Normal file
Binary file not shown.
142
src/markdown/index.vue
Normal file
142
src/markdown/index.vue
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<template lang="html">
|
||||||
|
<div :class="isFullscreen?'markdown fullscreen':'markdown' " ref="markdown" :style="{height:`${editorHeight}px`}">
|
||||||
|
<!-- 头部工具栏 -->
|
||||||
|
<ul class="markdown-toolbars">
|
||||||
|
<li class="title" v-if="title" :style="{titleStyle}">{{title}}</li>
|
||||||
|
<li v-if="tools.strong" name="粗体">
|
||||||
|
<span @click="insertStrong" class="iconfont icon-strong"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.italic" name="斜体">
|
||||||
|
<span @click="insertItalic" class="iconfont icon-italic"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.overline" name="删除线">
|
||||||
|
<span @click="insertOverline" class="iconfont icon-overline"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.h1" name="标题1">
|
||||||
|
<span @click="insertTitle(1)">h1</span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.h2"name="标题2">
|
||||||
|
<span @click="insertTitle(2)">h2</span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.h3"name="标题3">
|
||||||
|
<span @click="insertTitle(3)">h3</span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.h4"name="标题4">
|
||||||
|
<span @click="insertTitle(4)">h4</span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.h5"name="标题5">
|
||||||
|
<span @click="insertTitle(5)">h5</span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.h6"name="标题6">
|
||||||
|
<span @click="insertTitle(6)">h6</span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.hr" name="分割线">
|
||||||
|
<span @click="insertLine" class="iconfont icon-horizontal"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.quote" name="引用">
|
||||||
|
<span @click="insertContent('\n> ')" class="iconfont icon-quote"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.ul" name="无序列表">
|
||||||
|
<span @click="insertContent('- ')" class="iconfont icon-ul"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.ol" name="有序列表">
|
||||||
|
<span @click="insertContent('1. ')" class="iconfont icon-ol"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.code" name="代码块">
|
||||||
|
<span @click="insertCode" class="iconfont icon-code"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.notChecked" name="未完成列表">
|
||||||
|
<span @click="insertContent('- [ ] ')" class="iconfont icon-checked-false"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.checked" name="已完成列表">
|
||||||
|
<span @click="insertContent('- [x] ')" class="iconfont icon-checked"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.link" name="链接">
|
||||||
|
<span @click="insertContent('\n[插入链接](https://github.com/coinsuper)')" class="iconfont icon-link"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.image" name="图片">
|
||||||
|
<span @click="insertContent('\n')" class="iconfont icon-img"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.table" name="表格">
|
||||||
|
<span
|
||||||
|
@click="insertContent(`\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n`)"
|
||||||
|
class="iconfont icon-table"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.print" name="打印">
|
||||||
|
<span class="iconfont icon-dayin" @click="print"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.theme" class="shift-theme" name="代码块主题">
|
||||||
|
<div>
|
||||||
|
<span class="iconfont icon-theme" @click="toggleSlideDown"></span>
|
||||||
|
<ul :class="{active:slideDown}">
|
||||||
|
<li @click="setThemes('Light')">Light</li>
|
||||||
|
<li @click="setThemes('Dark')">Dark</li>
|
||||||
|
<li @click="setThemes('OneDark')">OneDark</li>
|
||||||
|
<li @click="setThemes('GitHub')">GitHub</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.shift&&preview===1" name="预览">
|
||||||
|
<span @click="preview=2" class="iconfont icon-preview"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.shift&&preview===2" name="编辑">
|
||||||
|
<span @click="preview=3" class="iconfont icon-md"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.shift&&preview===3" name="分屏显示">
|
||||||
|
<span @click="preview=1" class="iconfont icon-group"></span>
|
||||||
|
</li>
|
||||||
|
<li class="empty"></li>
|
||||||
|
|
||||||
|
<li v-if="tools.fullscreen&&!isFullscreen" name="全屏">
|
||||||
|
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-full-screen"></span>
|
||||||
|
</li>
|
||||||
|
<li v-if="tools.fullscreen&&isFullscreen" name="退出全屏">
|
||||||
|
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- 编辑器 -->
|
||||||
|
<div class="markdown-content">
|
||||||
|
<div v-show="preview===1||preview===3" class="markdown-editor" ref="markdownContent" @scroll="markdownScroll"
|
||||||
|
@mouseenter="mousescrollSide('markdown')">
|
||||||
|
<ul class="index" ref="index" :style="{height:scrollHeight?`${scrollHeight}px`:'100%'}">
|
||||||
|
<li v-for="(item,index) in indexLenth">{{index+1}}</li>
|
||||||
|
</ul>
|
||||||
|
<textarea
|
||||||
|
v-model="value"
|
||||||
|
@keydown.tab="tab"
|
||||||
|
@keydown.meta.83="save"
|
||||||
|
@keyup.enter="enter"
|
||||||
|
@keyup.delete="onDelete"
|
||||||
|
ref="textarea"
|
||||||
|
:style="{height:scrollHeight?`${scrollHeight}px`:'100%'}"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div v-show="preview==1" class="empty" style="width:12px;"></div>
|
||||||
|
<div
|
||||||
|
v-show="preview===1||preview===2"
|
||||||
|
:class="`markdown-preview ${themeName}`"
|
||||||
|
v-html="previewMarkdown"
|
||||||
|
ref="preview"
|
||||||
|
@scroll="previewScroll"
|
||||||
|
@mouseenter="mousescrollSide('preview')">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import markdown from './markdown';
|
||||||
|
|
||||||
|
export default markdown;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import "css/theme";
|
||||||
|
@import "css/light";
|
||||||
|
@import "css/dark";
|
||||||
|
@import "css/oneDark";
|
||||||
|
@import "css/gitHub";
|
||||||
|
@import "css/common";
|
||||||
|
@import "css/index";
|
||||||
|
@import "font/iconfont.css";
|
||||||
|
</style>
|
||||||
120
src/markdown/js/print.js
Normal file
120
src/markdown/js/print.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
var Print = function (dom, options) {
|
||||||
|
if (! (this instanceof Print)) return new Print(dom, options);
|
||||||
|
|
||||||
|
this.options = this.extend({
|
||||||
|
'noPrint' : '.no-print'
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
if ((typeof dom) === 'string') {
|
||||||
|
this.dom = document.querySelector(dom);
|
||||||
|
} else {
|
||||||
|
this.dom = dom;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
Print.prototype = {
|
||||||
|
init : function () {
|
||||||
|
var content = this.getStyle() + this.getHtml();
|
||||||
|
this.writeIframe(content);
|
||||||
|
},
|
||||||
|
extend : function (obj, obj2) {
|
||||||
|
for (var k in obj2) {
|
||||||
|
obj[k] = obj2[k];
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
|
||||||
|
getStyle : function () {
|
||||||
|
var str = '',
|
||||||
|
styles = document.querySelectorAll('style,link');
|
||||||
|
for (var i = 0 ; i<styles.length ; i ++) {
|
||||||
|
str += styles[i].outerHTML;
|
||||||
|
}
|
||||||
|
str += '<style>' + (this.options.noPrint ? this.options.noPrint: '.no-print') + '{display:none;}</style>';
|
||||||
|
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
|
||||||
|
getHtml : function () {
|
||||||
|
var inputs = document.querySelectorAll('input');
|
||||||
|
var textareas = document.querySelectorAll('textarea');
|
||||||
|
var selects = document.querySelectorAll('select');
|
||||||
|
|
||||||
|
for (var k in inputs) {
|
||||||
|
if (inputs[k].type == 'checkbox' || inputs[k].type == 'radio') {
|
||||||
|
if (inputs[k].checked == true) {
|
||||||
|
inputs[k].setAttribute('checked', 'checked')
|
||||||
|
} else {
|
||||||
|
inputs[k].removeAttribute('checked')
|
||||||
|
}
|
||||||
|
} else if (inputs[k].type == 'text') {
|
||||||
|
inputs[k].setAttribute('value', inputs[k].value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var k2 in textareas) {
|
||||||
|
if (textareas[k2].type == 'textarea') {
|
||||||
|
textareas[k2].innerHTML = textareas[k2].value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var k3 in selects) {
|
||||||
|
if (selects[k3].type == 'select-one') {
|
||||||
|
var child = selects[k3].children;
|
||||||
|
for (var i in child) {
|
||||||
|
if (child[i].tagName == 'OPTION') {
|
||||||
|
if (child[i].selected == true) {
|
||||||
|
child[i].setAttribute('selected', 'selected')
|
||||||
|
} else {
|
||||||
|
child[i].removeAttribute('selected')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.dom.outerHTML;
|
||||||
|
},
|
||||||
|
|
||||||
|
writeIframe : function (content) {
|
||||||
|
var w, doc, iframe = document.createElement('iframe'),
|
||||||
|
f = document.body.appendChild(iframe);
|
||||||
|
iframe.id = 'myIframe';
|
||||||
|
iframe.style = 'position:absolute;width:0;height:0;top:-10px;left:-10px;';
|
||||||
|
|
||||||
|
w = f.contentWindow || f.contentDocument;
|
||||||
|
doc = f.contentDocument || f.contentWindow.document;
|
||||||
|
doc.open();
|
||||||
|
doc.write(content);
|
||||||
|
doc.close();
|
||||||
|
this.toPrint(w);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
document.body.removeChild(iframe)
|
||||||
|
}, 100)
|
||||||
|
},
|
||||||
|
|
||||||
|
toPrint : function (frameWindow) {
|
||||||
|
try {
|
||||||
|
setTimeout(function () {
|
||||||
|
frameWindow.focus();
|
||||||
|
try {
|
||||||
|
if (! frameWindow.document.execCommand('print', false, null)) {
|
||||||
|
frameWindow.print();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
frameWindow.print();
|
||||||
|
}
|
||||||
|
frameWindow.close();
|
||||||
|
}, 10);
|
||||||
|
} catch (err) {
|
||||||
|
console.log('err', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.Print = Print;
|
||||||
|
|
||||||
|
export default function _Print(dom) {
|
||||||
|
Print(dom);
|
||||||
|
}
|
||||||
131
src/markdown/js/range.js
Normal file
131
src/markdown/js/range.js
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
// 获取光标位置
|
||||||
|
function getCursortPosition(textDom) {
|
||||||
|
var cursorPos = 0;
|
||||||
|
if (document.selection) {
|
||||||
|
// IE Support
|
||||||
|
textDom.focus();
|
||||||
|
var selectRange = document.selection.createRange();
|
||||||
|
selectRange.moveStart('character', -textDom.value.length);
|
||||||
|
cursorPos = selectRange.text.length;
|
||||||
|
} else if (textDom.selectionStart || textDom.selectionStart == '0') {
|
||||||
|
// Firefox support
|
||||||
|
cursorPos = textDom.selectionStart;
|
||||||
|
}
|
||||||
|
return cursorPos;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置光标位置
|
||||||
|
function setCaretPosition(textDom, pos) {
|
||||||
|
if (textDom.setSelectionRange) {
|
||||||
|
// IE Support
|
||||||
|
textDom.focus();
|
||||||
|
textDom.setSelectionRange(pos, pos);
|
||||||
|
} else if (textDom.createTextRange) {
|
||||||
|
// Firefox support
|
||||||
|
var range = textDom.createTextRange();
|
||||||
|
range.collapse(true);
|
||||||
|
range.moveEnd('character', pos);
|
||||||
|
range.moveStart('character', pos);
|
||||||
|
range.select();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 获取选中文字
|
||||||
|
function getSelectText() {
|
||||||
|
var userSelection,
|
||||||
|
text;
|
||||||
|
if (window.getSelection) {
|
||||||
|
// Firefox support
|
||||||
|
userSelection = window.getSelection();
|
||||||
|
} else if (document.selection) {
|
||||||
|
// IE Support
|
||||||
|
userSelection = document.selection.createRange();
|
||||||
|
}
|
||||||
|
if (!(text = userSelection.text)) {
|
||||||
|
text = userSelection;
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选中特定范围的文本
|
||||||
|
* 参数：
|
||||||
|
* textDom [JavaScript DOM String] 当前对象
|
||||||
|
* startPos [Int] 起始位置
|
||||||
|
* endPos [Int] 终点位置
|
||||||
|
*/
|
||||||
|
function setSelectText(textDom, startPos, endPos) {
|
||||||
|
var startPos = parseInt(startPos),
|
||||||
|
endPos = parseInt(endPos),
|
||||||
|
textLength = textDom.value.length;
|
||||||
|
if (textLength) {
|
||||||
|
if (!startPos) {
|
||||||
|
startPos = 0;
|
||||||
|
}
|
||||||
|
if (!endPos) {
|
||||||
|
endPos = textLength;
|
||||||
|
}
|
||||||
|
if (startPos > textLength) {
|
||||||
|
startPos = textLength;
|
||||||
|
}
|
||||||
|
if (endPos > textLength) {
|
||||||
|
endPos = textLength;
|
||||||
|
}
|
||||||
|
if (startPos < 0) {
|
||||||
|
startPos = textLength + startPos;
|
||||||
|
}
|
||||||
|
if (endPos < 0) {
|
||||||
|
endPos = textLength + endPos;
|
||||||
|
}
|
||||||
|
if (textDom.createTextRange) {
|
||||||
|
// IE Support
|
||||||
|
var range = textDom.createTextRange();
|
||||||
|
range.moveStart("character", -textLength);
|
||||||
|
range.moveEnd("character", -textLength);
|
||||||
|
range.moveStart("character", startPos);
|
||||||
|
range.moveEnd("character", endPos);
|
||||||
|
range.select();
|
||||||
|
} else {
|
||||||
|
// Firefox support
|
||||||
|
textDom.setSelectionRange(startPos, endPos);
|
||||||
|
textDom.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在光标后插入文本
|
||||||
|
* 参数：
|
||||||
|
* textDom [JavaScript DOM String] 当前对象
|
||||||
|
* value [String] 要插入的文本
|
||||||
|
*/
|
||||||
|
function insertAfterText(textDom, value) {
|
||||||
|
var selectRange;
|
||||||
|
if (document.selection) {
|
||||||
|
// IE Support
|
||||||
|
textDom.focus();
|
||||||
|
selectRange = document.selection.createRange();
|
||||||
|
selectRange.text = value;
|
||||||
|
textDom.focus();
|
||||||
|
} else if (textDom.selectionStart || textDom.selectionStart == '0') {
|
||||||
|
// Firefox support
|
||||||
|
var startPos = textDom.selectionStart;
|
||||||
|
var endPos = textDom.selectionEnd;
|
||||||
|
var scrollTop = textDom.scrollTop;
|
||||||
|
textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length);
|
||||||
|
textDom.focus();
|
||||||
|
textDom.selectionStart = startPos + value.length;
|
||||||
|
textDom.selectionEnd = startPos + value.length;
|
||||||
|
textDom.scrollTop = scrollTop;
|
||||||
|
} else {
|
||||||
|
textDom.value += value;
|
||||||
|
textDom.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getCursortPosition,
|
||||||
|
setCaretPosition,
|
||||||
|
getSelectText,
|
||||||
|
setSelectText,
|
||||||
|
insertAfterText
|
||||||
|
};
|
||||||
386
src/markdown/markdown.js
Normal file
386
src/markdown/markdown.js
Normal file
@ -0,0 +1,386 @@
|
|||||||
|
import hljs from 'highlight.js';
|
||||||
|
import marked from 'marked';
|
||||||
|
import range from './js/range';
|
||||||
|
import Print from './js/print';
|
||||||
|
|
||||||
|
hljs.initHighlightingOnLoad();
|
||||||
|
|
||||||
|
marked.setOptions({
|
||||||
|
renderer : new marked.Renderer(),
|
||||||
|
gfm : true,
|
||||||
|
tables : true,
|
||||||
|
breaks : false,
|
||||||
|
pedantic : false,
|
||||||
|
sanitize : true,
|
||||||
|
smartLists : true,
|
||||||
|
highlight : function (code) {
|
||||||
|
return hljs.highlightAuto(code).value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name : 'markdown',
|
||||||
|
props : {
|
||||||
|
title : { // 标题
|
||||||
|
type : String,
|
||||||
|
default : ''
|
||||||
|
},
|
||||||
|
titleStyle:{
|
||||||
|
type:Object,
|
||||||
|
default(){
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
theme : { // 默认主题
|
||||||
|
type : String,
|
||||||
|
default : 'Light'
|
||||||
|
},
|
||||||
|
width : {// 宽度
|
||||||
|
type:[Number,String],
|
||||||
|
default:'auto'
|
||||||
|
},
|
||||||
|
height : { // 高度
|
||||||
|
type : Number,
|
||||||
|
default : 600
|
||||||
|
}, // 宽度
|
||||||
|
toolbars : { // 工具栏
|
||||||
|
type : Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
autoSave : {// 是否自动保存
|
||||||
|
type : Boolean,
|
||||||
|
default : true
|
||||||
|
},
|
||||||
|
interval : { // 自动保存频率 单位：毫秒
|
||||||
|
type : Number,
|
||||||
|
default : 10000
|
||||||
|
},
|
||||||
|
initialValue:{ // 初始化值
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value : '', // 输入框内容
|
||||||
|
timeoutId : null,
|
||||||
|
hljsInit : null,
|
||||||
|
indexLenth : 1,
|
||||||
|
previewMarkdown : '',
|
||||||
|
preview : 1, // 是否是预览状态
|
||||||
|
isFullscreen : false,
|
||||||
|
scrollHeight : null,
|
||||||
|
scroll : 'markdown',// 哪个半栏在滑动
|
||||||
|
allTools : { // 显示隐藏的工具栏
|
||||||
|
strong : true,
|
||||||
|
italic : true,
|
||||||
|
overline : true,
|
||||||
|
h1 : true,
|
||||||
|
h2 : true,
|
||||||
|
h3 : true,
|
||||||
|
h4 : false,
|
||||||
|
h5 : false,
|
||||||
|
h6 : false,
|
||||||
|
hr : true,
|
||||||
|
quote : true,
|
||||||
|
ul : true,
|
||||||
|
ol : true,
|
||||||
|
code : true,
|
||||||
|
link : true,
|
||||||
|
image : true,
|
||||||
|
table : true,
|
||||||
|
checked : true,
|
||||||
|
notChecked : true,
|
||||||
|
shift : true,
|
||||||
|
fullscreen : true,
|
||||||
|
print : true,
|
||||||
|
theme:true
|
||||||
|
},
|
||||||
|
slideDown : false,
|
||||||
|
themeName : 'Light',// 主题名称
|
||||||
|
lastInsert : '',
|
||||||
|
timerId : null,// 定时器id
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed : {
|
||||||
|
editorHeight() {
|
||||||
|
if (this.isFullscreen) {
|
||||||
|
return window.innerHeight;
|
||||||
|
} else {
|
||||||
|
return this.height;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tools() {
|
||||||
|
const {allTools,toolbars} = this ;
|
||||||
|
return Object.assign(allTools,toolbars)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.$refs.textarea.focus();
|
||||||
|
})
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods : {
|
||||||
|
init() {
|
||||||
|
this.themeName = this.theme;
|
||||||
|
const {autoSave, interval,theme,initialValue} = this;
|
||||||
|
this.value = initialValue ;
|
||||||
|
this.previewMarkdown = marked(initialValue, {
|
||||||
|
sanitize : true
|
||||||
|
});
|
||||||
|
if (autoSave) {
|
||||||
|
this.timerId = setInterval(() => {
|
||||||
|
this.$emit('on-save', {
|
||||||
|
markdownValue : this.value,
|
||||||
|
htmlValue : this.previewMarkdown,
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
}, interval)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
markdownScroll() {
|
||||||
|
if (this.scroll === 'markdown') {
|
||||||
|
const markdownContent = this.$refs.markdownContent;
|
||||||
|
const preview = this.$refs.preview;
|
||||||
|
const markdownScrollHeight = markdownContent.scrollHeight;
|
||||||
|
const markdownScrollTop = markdownContent.scrollTop;
|
||||||
|
const previewScrollHeight = preview.scrollHeight;
|
||||||
|
preview.scrollTop = parseInt((markdownScrollTop / markdownScrollHeight) * previewScrollHeight);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
previewScroll() {
|
||||||
|
if (this.scroll === 'preview') {
|
||||||
|
const markdownContent = this.$refs.markdownContent;
|
||||||
|
const preview = this.$refs.preview;
|
||||||
|
const markdownScrollHeight = markdownContent.scrollHeight;
|
||||||
|
const previewScrollHeight = preview.scrollHeight;
|
||||||
|
const previewScrollTop = preview.scrollTop;
|
||||||
|
markdownContent.scrollTop = parseInt((previewScrollTop / previewScrollHeight) * markdownScrollHeight);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mousescrollSide(side) {// 设置究竟是哪个半边在主动滑动
|
||||||
|
this.scroll = side;
|
||||||
|
},
|
||||||
|
insertContent(str) { // 插入文本
|
||||||
|
const {preview} = this ;
|
||||||
|
if(preview===2){
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
this.lastInsert = str;
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
const lastFourCharts = this.value.substring(point - 4, point);
|
||||||
|
if (lastChart != '\n' && this.value != '' && lastFourCharts != ' ') {
|
||||||
|
str = '\n' + str;
|
||||||
|
this.insertAfterText(str);
|
||||||
|
} else {
|
||||||
|
this.insertAfterText(str);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getCursortPosition() { // 获取光标位置
|
||||||
|
const textDom = this.$refs.textarea;
|
||||||
|
let cursorPos = 0;
|
||||||
|
if (document.selection) {
|
||||||
|
textDom.focus();
|
||||||
|
let selectRange = document.selection.createRange();
|
||||||
|
selectRange.moveStart('character', - this.value.length);
|
||||||
|
cursorPos = selectRange.text.length;
|
||||||
|
} else if (textDom.selectionStart || textDom.selectionStart == '0') {
|
||||||
|
cursorPos = textDom.selectionStart;
|
||||||
|
}
|
||||||
|
return cursorPos;
|
||||||
|
},
|
||||||
|
insertAfterText(value) { // 插入文本
|
||||||
|
const textDom = this.$refs.textarea;
|
||||||
|
let selectRange;
|
||||||
|
if (document.selection) {
|
||||||
|
textDom.focus();
|
||||||
|
selectRange = document.selection.createRange();
|
||||||
|
selectRange.text = value;
|
||||||
|
textDom.focus();
|
||||||
|
} else if (textDom.selectionStart || textDom.selectionStart == '0') {
|
||||||
|
const startPos = textDom.selectionStart;
|
||||||
|
const endPos = textDom.selectionEnd;
|
||||||
|
const scrollTop = textDom.scrollTop;
|
||||||
|
textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length);
|
||||||
|
textDom.focus();
|
||||||
|
textDom.selectionStart = startPos + value.length;
|
||||||
|
textDom.selectionEnd = startPos + value.length;
|
||||||
|
textDom.scrollTop = scrollTop;
|
||||||
|
} else {
|
||||||
|
textDom.value += value;
|
||||||
|
textDom.focus();
|
||||||
|
}
|
||||||
|
this.$set(this, 'value', textDom.value);
|
||||||
|
},
|
||||||
|
setCaretPosition(position) { // 设置光标位置
|
||||||
|
const textDom = this.$refs.textarea;
|
||||||
|
if (textDom.setSelectionRange) {
|
||||||
|
textDom.focus();
|
||||||
|
textDom.setSelectionRange(position, position);
|
||||||
|
} else if (textDom.createTextRange) {
|
||||||
|
var range = textDom.createTextRange();
|
||||||
|
range.collapse(true);
|
||||||
|
range.moveEnd('character', position);
|
||||||
|
range.moveStart('character', position);
|
||||||
|
range.select();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tab(e) { // 屏蔽teatarea tab默认事件
|
||||||
|
this.insertContent(' ', this);
|
||||||
|
if (e.preventDefault) {
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
e.returnValue = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertLine() { // 插入分割线
|
||||||
|
this.insertContent(`\n----\n`);
|
||||||
|
},
|
||||||
|
insertTitle(level) { // 插入标题
|
||||||
|
const titleLevel = {
|
||||||
|
1 : '\n# ',
|
||||||
|
2 : '\n## ',
|
||||||
|
3 : '\n### ',
|
||||||
|
4 : '\n#### ',
|
||||||
|
5 : '\n##### ',
|
||||||
|
6 : '\n###### '
|
||||||
|
};
|
||||||
|
this.insertContent(titleLevel[level]);
|
||||||
|
},
|
||||||
|
insertCode() { // 插入code
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
this.insertContent('\n```\n\n```');
|
||||||
|
if (lastChart != '\n' && this.value != '') {
|
||||||
|
this.setCaretPosition(point + 5);
|
||||||
|
} else {
|
||||||
|
this.setCaretPosition(point + 5);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertStrong() { // 粗体
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
this.insertContent('****');
|
||||||
|
if (lastChart != '\n' && this.value != '') {
|
||||||
|
this.setCaretPosition(point + 2);
|
||||||
|
} else {
|
||||||
|
this.setCaretPosition(point + 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertItalic() { // 斜体
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
this.insertContent('**');
|
||||||
|
if (lastChart != '\n' && this.value != '') {
|
||||||
|
this.setCaretPosition(point + 1);
|
||||||
|
} else {
|
||||||
|
this.setCaretPosition(point + 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertBg() { // 背景色
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
this.insertContent('====');
|
||||||
|
if (lastChart != '\n' && this.value != '') {
|
||||||
|
this.setCaretPosition(point + 5);
|
||||||
|
} else {
|
||||||
|
this.setCaretPosition(point + 5);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertUnderline() { // 下划线
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
this.insertContent('<u></u>');
|
||||||
|
if (lastChart != '\n' && this.value != '') {
|
||||||
|
this.setCaretPosition(point + 3);
|
||||||
|
} else {
|
||||||
|
this.setCaretPosition(point + 5);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertOverline() { // overline
|
||||||
|
const textareaDom = this.$refs.textarea;
|
||||||
|
const point = this.getCursortPosition();
|
||||||
|
const lastChart = this.value.substring(point - 1, point);
|
||||||
|
this.insertContent('~~~~');
|
||||||
|
if (lastChart != '\n' && this.value != '') {
|
||||||
|
this.setCaretPosition(point + 2);
|
||||||
|
} else {
|
||||||
|
this.setCaretPosition(point + 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertTitle(level) { // 插入标题
|
||||||
|
const titleLevel = {
|
||||||
|
1 : '# ',
|
||||||
|
2 : '## ',
|
||||||
|
3 : '### ',
|
||||||
|
4 : '#### ',
|
||||||
|
5 : '##### ',
|
||||||
|
6 : '###### '
|
||||||
|
};
|
||||||
|
this.insertContent(titleLevel[level]);
|
||||||
|
},
|
||||||
|
save(e) { // 保存
|
||||||
|
e.preventDefault();
|
||||||
|
this.$emit('on-save', {
|
||||||
|
markdownValue : this.value,
|
||||||
|
htmlValue : this.previewMarkdown,
|
||||||
|
theme:this.theme
|
||||||
|
});
|
||||||
|
},
|
||||||
|
insertLine() { // 插入分割线
|
||||||
|
this.insertContent(`\n----\n`);
|
||||||
|
},
|
||||||
|
toggleSlideDown() { // 显示主题选项
|
||||||
|
this.slideDown = ! this.slideDown;
|
||||||
|
},
|
||||||
|
setThemes(name) { // 设置主题
|
||||||
|
this.themeName = name;
|
||||||
|
this.slideDown = false;
|
||||||
|
},
|
||||||
|
enter(e) { // 回车事件
|
||||||
|
const {lastInsert} = this;
|
||||||
|
const list = ['- ', '1. ', '- [ ] ', '- [x] ']
|
||||||
|
if (list.includes(lastInsert)) {
|
||||||
|
this.insertContent(lastInsert);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onDelete() { // 删除时,以回车为界分割，如果数组最后一个元素为''时，将行一次插入的共嗯那个置为空，避免回车时再次插入
|
||||||
|
const lines = this.value.split('\n');
|
||||||
|
if (lines[lines.length - 1] == '') {
|
||||||
|
this.lastInsert = '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
print() { // 打印文件
|
||||||
|
const dom = this.$refs.preview;
|
||||||
|
Print(dom);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch : {
|
||||||
|
value() {
|
||||||
|
clearTimeout(this.timeoutId);
|
||||||
|
this.previewMarkdown = marked(this.value, {
|
||||||
|
sanitize : true
|
||||||
|
});
|
||||||
|
this.indexLenth = this.value.split('\n').length;
|
||||||
|
const height_1 = this.indexLenth * 22;
|
||||||
|
const height_2 = this.$refs.textarea.scrollHeight;
|
||||||
|
const height_3 = this.$refs.preview.scrollHeight;
|
||||||
|
this.scrollHeight = Math.max(height_1, height_2, height_3);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() { // 销毁时清除定时器
|
||||||
|
clearInterval(this.timerId);
|
||||||
|
}
|
||||||
|
};
|
||||||
81
webpack.config.js
Normal file
81
webpack.config.js
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
var path = require('path')
|
||||||
|
var webpack = require('webpack')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/main.js',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, './dist'),
|
||||||
|
publicPath: '/dist/',
|
||||||
|
filename: 'build.js',
|
||||||
|
libraryTarget: 'umd',
|
||||||
|
library: 'markdown-vue',
|
||||||
|
umdNamedDefine: true
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader'
|
||||||
|
],
|
||||||
|
}, {
|
||||||
|
test: /\.vue$/,
|
||||||
|
loader: 'vue-loader',
|
||||||
|
options: {
|
||||||
|
loaders: {
|
||||||
|
}
|
||||||
|
// other vue-loader options go here
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
|
||||||
|
loader: 'file-loader',
|
||||||
|
options: {
|
||||||
|
name: '[name].[ext]?[hash]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'vue$': 'vue/dist/vue.esm.js'
|
||||||
|
},
|
||||||
|
extensions: ['*', '.js', '.vue', '.json']
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
historyApiFallback: true,
|
||||||
|
noInfo: true,
|
||||||
|
overlay: true
|
||||||
|
},
|
||||||
|
performance: {
|
||||||
|
hints: false
|
||||||
|
},
|
||||||
|
devtool: '#eval-source-map'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
module.exports.devtool = '#source-map'
|
||||||
|
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||||
|
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env': {
|
||||||
|
NODE_ENV: '"production"'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
|
sourceMap: true,
|
||||||
|
compress: {
|
||||||
|
warnings: false
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.LoaderOptionsPlugin({
|
||||||
|
minimize: true
|
||||||
|
})
|
||||||
|
])
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user