Showing preview only (427K chars total). Download the full file or copy to clipboard to get everything.
Repository: hinesboy/mavonEditor
Branch: master
Commit: aaaafa97c43c
Files: 104
Total size: 399.4 KB
Directory structure:
gitextract_k4v0_48_/
├── .babelrc
├── .eslintrc.js
├── .gitattributes
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_template.md
│ │ ├── feature_template.md
│ │ └── question_template.md
│ └── workflows/
│ └── gha.yml
├── .gitignore
├── .npmignore
├── LICENSE
├── LOG.md
├── README-EN.md
├── README.md
├── SECURITY.md
├── _config.yml
├── doc/
│ ├── cn/
│ │ ├── images.md
│ │ ├── markdown.md
│ │ ├── no-cnd.md
│ │ ├── upload-images.md
│ │ └── use.md
│ └── en/
│ ├── images.md
│ ├── markdown.md
│ ├── no-cnd.md
│ ├── upload-images.md
│ └── use.md
├── jest.config.js
├── mavon-editor.d.ts
├── package.json
├── src/
│ ├── components/
│ │ ├── md-toolbar-left.vue
│ │ └── md-toolbar-right.vue
│ ├── dev/
│ │ ├── app.vue
│ │ ├── assets/
│ │ │ ├── config.js
│ │ │ └── lang/
│ │ │ ├── de/
│ │ │ │ ├── help_de.md
│ │ │ │ └── words_de.json
│ │ │ ├── en/
│ │ │ │ ├── help_en.md
│ │ │ │ └── words_en.json
│ │ │ ├── fr/
│ │ │ │ ├── help_fr.md
│ │ │ │ └── words_fr.json
│ │ │ ├── pt-BR/
│ │ │ │ ├── help_pt-BR.md
│ │ │ │ └── words_pt-BR.json
│ │ │ ├── ru/
│ │ │ │ ├── help_ru.md
│ │ │ │ └── words_ru.json
│ │ │ ├── zh-CN/
│ │ │ │ ├── help_zh-CN.md
│ │ │ │ └── words_zh-CN.json
│ │ │ └── zh-TW/
│ │ │ ├── help_zh-TW.md
│ │ │ └── words_zh-TW.json
│ │ ├── demo.vue
│ │ ├── editor.vue
│ │ ├── index.html
│ │ └── index.js
│ ├── index.js
│ ├── lib/
│ │ ├── config.js
│ │ ├── core/
│ │ │ ├── extra-function.js
│ │ │ ├── highlight.js
│ │ │ ├── hljs/
│ │ │ │ ├── lang.hljs.css.js
│ │ │ │ └── lang.hljs.js
│ │ │ ├── keydown-listen.js
│ │ │ ├── markdown.js
│ │ │ ├── onecolumn-event.js
│ │ │ ├── sanitizer.js
│ │ │ └── to-markdown.js
│ │ ├── css/
│ │ │ ├── markdown.css
│ │ │ ├── mavon-editor.styl
│ │ │ ├── md.css
│ │ │ └── scroll.styl
│ │ ├── font/
│ │ │ ├── LICENSE.txt
│ │ │ ├── README.txt
│ │ │ ├── config.json
│ │ │ ├── css/
│ │ │ │ ├── animation.css
│ │ │ │ ├── fontello-codes.css
│ │ │ │ ├── fontello-embedded.css
│ │ │ │ ├── fontello-ie7-codes.css
│ │ │ │ ├── fontello-ie7.css
│ │ │ │ └── fontello.css
│ │ │ └── demo.html
│ │ ├── lang/
│ │ │ ├── de/
│ │ │ │ ├── help_de.md
│ │ │ │ └── words_de.json
│ │ │ ├── en/
│ │ │ │ ├── help_en.md
│ │ │ │ └── words_en.json
│ │ │ ├── fr/
│ │ │ │ ├── help_fr.md
│ │ │ │ └── words_fr.json
│ │ │ ├── ja/
│ │ │ │ ├── help_ja.md
│ │ │ │ └── words_ja.json
│ │ │ ├── kr/
│ │ │ │ ├── help_kr.md
│ │ │ │ └── words_kr.json
│ │ │ ├── pt-BR/
│ │ │ │ ├── help_pt-BR.md
│ │ │ │ └── words_pt-BR.json
│ │ │ ├── ru/
│ │ │ │ ├── help_ru.md
│ │ │ │ └── words_ru.json
│ │ │ ├── zh-CN/
│ │ │ │ ├── help_zh-CN.md
│ │ │ │ └── words_zh-CN.json
│ │ │ └── zh-TW/
│ │ │ ├── help_zh-TW.md
│ │ │ └── words_zh-TW.json
│ │ ├── mixins/
│ │ │ └── markdown.js
│ │ ├── toolbar_left_click.js
│ │ ├── toolbar_right_click.js
│ │ └── util.js
│ └── mavon-editor.vue
├── tests/
│ └── unit/
│ ├── __snapshots__/
│ │ └── mavon-editor.spec.js.snap
│ ├── base.spec.js
│ └── mavon-editor.spec.js
└── webpack/
├── webpack.base.js
├── webpack.build.js
└── webpack.dev.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["env", {
"modules": false
}],
[
"babel-preset-env",
{
"targets": {
"node": "current"
}
}
],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false
}
================================================
FILE: .eslintrc.js
================================================
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 忽略;
'semi':0,
// 忽略缩进
'indent':0,
// camel case
'camelcase':0,
// 键值对:后强制空格
'key-spacing':0,
// ,前不允许空格
'comma-spacing':0,
// 函数空格
'space-before-function-paren':0,
//
'no-unused-vars':0,
// else 强制换行
'brace-style':0,
'no-unneeded-ternary': 0,
'quotes': 0,
'no-useless-escape': 0,
'no-eval': 0,
// 允许多个空格
'no-multi-spaces': 0
}
}
================================================
FILE: .gitattributes
================================================
*.js linguist-language=Vue
*.css linguist-language=Vue
*.html linguist-language=Vue
*.vue linguist-language=Vue
*.less linguist-language=Vue
*.sass linguist-language=Vue
================================================
FILE: .github/ISSUE_TEMPLATE/bug_template.md
================================================
---
name: 🐛 Bug report
about: Create a report to help us improve
title: '[Bug] XYZ'
labels: ':bug: Bug'
---
## 🐛 Bug Report
<!-- A clear and concise description of what the bug is, and what version are you using-->
**Steps To Reproduce**
<!-- The exact steps required to reproduce the issue, ideally with a code example -->
**Screenshots**
<!-- If applicable, add screenshots to help explain your problem. -->
**The expected behaviour**
<!-- A clear and concise description of what you expected to happen. -->
**Possible solution (optional, but very helpful)**
================================================
FILE: .github/ISSUE_TEMPLATE/feature_template.md
================================================
---
name: 🚀 Feature Proposal
title: '[Feature] XYZ'
labels: ':rocket: Feature Request'
about: Submit a proposal for a new feature
---
## 🚀 Feature Proposal
A clear and concise description of what the feature is.
**Motivation**
Please outline the motivation for the proposal.
**Example**
Please provide an example for how this feature would be used.
================================================
FILE: .github/ISSUE_TEMPLATE/question_template.md
================================================
---
name: 💬 Questions / Help
title: '[Question] XYZ'
label: ':speech_balloon: Question'
about: Ask us a question
---
## 💬 Questions and Help
<!-- Have a question about mavonEditor? Need help using it a certain way that our README does not seem to explain? Ask away!-->
<!-- Please keep in mind that we're unpaid open souce volunteers, so it will help us greatly if you add as many details as possible to your question and describe what other approaches you've tried out so far. And of course, we'd love for you to contribute back the answer to our README via a pull request! -->
================================================
FILE: .github/workflows/gha.yml
================================================
name: CI
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: install dependence
run: |
yarn install --no-lockfile
- name: run eslint
run: |
yarn lint
- name: run test
run: |
yarn test
================================================
FILE: .gitignore
================================================
/node_modules/*
/.idea/*
npm-debug.log
git-debug.log
package-lock.json
.idea/
.DS_Store
.ftpconfig
*.swp
/tests/unit/coverage/*
dist
================================================
FILE: .npmignore
================================================
/node_modules/*
/.idea/*
/.git/*
/img/*
/src/dev/*
LICENSE
npm-debug.log
git-debug.log
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 hinesboy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: LOG.md
================================================
# 更新日志
- **2.10.4** (21.12.16)
- refactor: provides a standard interface to get markdown-it by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/750
- doc: update maekdown.md by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/751
- **2.10.3** (21.12.14)
- fix: error while uploading image by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/748
- **2.10.2** (21.12.14)
- fix: Add sanitizer for filtering HTML tags by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/744
- **2.10.1** (21.12.04)
- fix build warnings and optimize console output by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/728
- fix: image cannot be previewed by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/738
- fix: Fix the content of code blocks to be displayed outside the pre container by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/730
- **2.10.0** (21.11.23)
Enable XSS defense by default, It also fixes the invalidity of codestyle caused by XSS protection.
- fix eslint error by @ygj6 in https://github.com/hinesboy/mavonEditor/pull/637
- Test framework by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/668
- fix issue#658,重构插入代码块逻辑 by @ygj6 in https://github.com/hinesboy/mavonEditor/pull/661
- Bump elliptic from 6.5.3 to 6.5.4 by @dependabot in https://github.com/hinesboy/mavonEditor/pull/677
- Fixed pop-up style issues when pages use multiple editors by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/667
- fix eslint error and testcase by @ygj6 in https://github.com/hinesboy/mavonEditor/pull/679
- fix: codeStyle not working by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/717
- feat: Add support for highlightjs v11.3.1 by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/718
- Update upload-images.md [replace `in` by `of` for multiple files upload] by @Sequoya42 in https://github.com/hinesboy/mavonEditor/pull/698
- Clean up invalid code by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/720
- update highlight style list by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/721
- Bump y18n from 3.2.1 to 3.2.2 by @dependabot in https://github.com/hinesboy/mavonEditor/pull/681
- Bump lodash from 4.17.19 to 4.17.21 by @dependabot in https://github.com/hinesboy/mavonEditor/pull/694
- Bump hosted-git-info from 2.8.8 to 2.8.9 by @dependabot in https://github.com/hinesboy/mavonEditor/pull/695
- Bump path-parse from 1.0.6 to 1.0.7 by @dependabot in https://github.com/hinesboy/mavonEditor/pull/708
- Bump dns-packet from 1.3.1 to 1.3.4 by @dependabot in https://github.com/hinesboy/mavonEditor/pull/700
- Adjust the list of npm install package by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/722
- Optimization project by @jiawulin001 in https://github.com/hinesboy/mavonEditor/pull/724
- Feat: Enable XSS defense by default by @XLCYun in https://github.com/hinesboy/mavonEditor/pull/611
- test: add xss test by @wangsongc in https://github.com/hinesboy/mavonEditor/pull/726
- **2.9.1** (20.12.28)
- 修复codestyle切换不生效bug PR #650
- 插入代码块时增加换行 PR #641
- 修复帮助文档区域点击锚点导致页面关闭 PR #640
- 对传入的value增加空处理 PR #639
- **2.9.0** (20.4.20)
- 将xss组件设置为prop
- 去除 markdown-it-sanitizer
- **2.8.3** (20.4.5)
- 调整整体默认字号为14px
- **2.8.2** (20.4.5)
- 语言切换bug
- **2.8.1** (20.4.5)
- xss 过滤规则改进
- **2.8.0** (20.4.1)
- 合并PR(感谢帮助维护mavon的朋友)
- 更新部分依赖
- 部署演示网页
- **2.7.7** (19.10.23)
- 修复图片预览覆盖不生效问题
- **2.7.6** (19.9.12)
- [pr #478](https://github.com/hinesboy/mavonEditor/pull/478)
- **2.7.5** (19.6.12)
- [pr #421](https://github.com/hinesboy/mavonEditor/pull/421)
- [pr #428](https://github.com/hinesboy/mavonEditor/pull/428)
- [pr #430](https://github.com/hinesboy/mavonEditor/pull/430)
- **2.7.4** (19.4.30)
- [pr #415](https://github.com/hinesboy/mavonEditor/pull/415)
- [pr #417](https://github.com/hinesboy/mavonEditor/pull/417)
- **2.7.3** (19.3.28)
- 添加shortCut控制快捷键的开关
- 修复自定义图片上传bug
- 修复多次触发change事件bug
- **2.7.2** 合并Pull Request(19.3.19)
- [pr #404](https://github.com/hinesboy/mavonEditor/pull/404)
- **2.7.0** 合并Pull Request(19.3.12)
- [pr #400](https://github.com/hinesboy/mavonEditor/pull/400)
- **2.7.0** 合并Pull Request(19.3.5)
- [pr #394](https://github.com/hinesboy/mavonEditor/pull/394)
- [pr #377](https://github.com/hinesboy/mavonEditor/pull/377)
- [pr #395](https://github.com/hinesboy/mavonEditor/pull/395)
- [pr #342](https://github.com/hinesboy/mavonEditor/pull/342)
- [pr #369](https://github.com/hinesboy/mavonEditor/pull/369)
- [pr #339](https://github.com/hinesboy/mavonEditor/pull/339)
- [pr #332](https://github.com/hinesboy/mavonEditor/pull/339)
- [pr #331](https://github.com/hinesboy/mavonEditor/pull/331)
- **2.6.16** 合并Pull Request(18.8.18)
- [pr #303](https://github.com/hinesboy/mavonEditor/pull/303)
- [pr #302](https://github.com/hinesboy/mavonEditor/pull/302)
- **2.6.12** 修复issues(18.7.3)
- [issue #276](https://github.com/hinesboy/mavonEditor/pull/276)
- [issue #275](https://github.com/hinesboy/mavonEditor/pull/275)
- **2.6.11** [pr #274](https://github.com/hinesboy/mavonEditor/pull/274)(18.7.1)
- **2.6.9** 增加toc插件(18.6.15)
- **2.6.7** 处理粗体+斜体不生效问题(18.6.15)
- [issue #264](https://github.com/hinesboy/mavonEditor/pull/264)
- **2.6.6** PR合并(18.6.15)
- [pr #266](https://github.com/hinesboy/mavonEditor/pull/266)
- [pr #265](https://github.com/hinesboy/mavonEditor/pull/265)
- **2.6.5** 修复issues(18.6.6)
- [issue #257](https://github.com/hinesboy/mavonEditor/pull/257)
- [issue #256](https://github.com/hinesboy/mavonEditor/pull/256)
- [issue #255](https://github.com/hinesboy/mavonEditor/pull/255)
- [issue #253](https://github.com/hinesboy/mavonEditor/pull/253)
- [issue #246](https://github.com/hinesboy/mavonEditor/pull/246)
- **2.6.4** [issue #248](https://github.com/hinesboy/mavonEditor/pull/48)(18.6.1)
- **2.6.3** [issue #231](https://github.com/hinesboy/mavonEditor/pull/231)(18.5.10)
- **2.6.2** (18.5.9)
- 修改添加链接与添加图片的弹出框文字描述
- 添加todo list语法插件
- 默认图片预览的关闭修改为点击即关闭
- 略微调整获取markdownIt对象的方式
- readme添加语法拓展的板块
- **2.6.0** 优化图片上传 (18.5.7)
- **2.5.10** 添加props: boxShadow控制样式 (18.5.1)
- **2.5.9** 添加删除行快捷键 [Ctrl + D](18.4.24)
- **2.5.8** 有序、无序列表优化(18.4.24)
- 添加【Enter】、【Tab】、【Shift+Tab】键对列表的操作，简化编写过程
- 允许选中多行文本添加列表样式
- TAB修改为插入制表符（原为4个空格）
- **2.5.6** 工具栏按钮修改(18.4.22)
- 将【标题按钮】修改为【标题下拉选择】，可以选择1~6级标题
- 将`click`触发下拉框，修改为`hover`触发
- 标题语法去除闭合#
- **2.5.5** PR合并(18.4.19)
- [#213](https://github.com/hinesboy/mavonEditor/pull/213)
- **2.5.4** 问题修复 / PR合并(18.4.18)
- [issue #210](https://github.com/hinesboy/mavonEditor/pull/210)
- [issue #208](https://github.com/hinesboy/mavonEditor/pull/208)
- [pr #211](https://github.com/hinesboy/mavonEditor/pull/211)
- [pr #206](https://github.com/hinesboy/mavonEditor/pull/206)
- **2.5.3** 问题修复(18.4.11)
- [#203](https://github.com/hinesboy/mavonEditor/pull/203)
- [#202](https://github.com/hinesboy/mavonEditor/pull/202)
- 个别类选择器名称更换
- 图标样式垂直居中
- **2.5.2** 合并PR(18.3.14)
- [#160](https://github.com/hinesboy/mavonEditor/pull/160)
- [#161](https://github.com/hinesboy/mavonEditor/pull/161)
- **2.5.1** 问题修复(18.3.5)
- 点击图片自定义事件
- 添加Prop navigation 默认展示目录
- 修改Prop 以及 Event 的命名规范(老版本不兼容)
- **2.4.15** 解决图片下拉菜单在火狐浏览器兼容性问题(17.12.22)
- **2.4.14** 细节性调整(17.12.20)
- 在mavon最外层添加样式`text-align: left`，防止受到外部样式影响
- 单双栏切换逻辑调整，单双栏切换更加合理
- 去除自动切换单双栏逻辑(在 `width < 768px`变单栏)
- 添加链接、图片链接弹出页面优化，支持TAB键、回车键操作
- 上传图片限制文件格式为`gif,jpeg,jpg,png,svg`
- fix [#157](https://github.com/hinesboy/mavonEditor/issues/157)(17.12.19 [CHENXCHEN](https://github.com/CHENXCHEN))
- fix [#156](https://github.com/hinesboy/mavonEditor/issues/156)(17.12.19 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.13** 修复bug[#79](https://github.com/hinesboy/mavonEditor/issues/79), 修改`markdown-it`实例获取方式，引入插件`markdown-it-highlightjs-external`(17.12.12 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.11** 修复bug[#147](https://github.com/hinesboy/mavonEditor/issues/147)(17.12.7 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.10** 添加图片名正则过滤(17.12.6)
- **2.4.9** 删除上传图片时同时删除其文本(17.12.2)
- **2.4.8** 将链接打开方式调整为新界面打开, 整改图片上传样式, 增加直接添加链接方式(17.12.2)
- **2.4.7** 修改外链使用方式，将`katex`提取出来作为外链(17.11.27 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.6** 修复导出markdownIt不正确的错误(17.11.25 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.5** 修改webpack配置,修复编译导出时的`const`问题(17.11.25 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.3** 添加图片点击预览原图、开放markdown-it对象(17.11.24)
- **2.4.2** 修复`github-markdown-css`与`hljs-css`的冲突，提供一种自定义按需加载`hljs`以及`markdown`相关文件的方式(17.11.24 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.4.0** 抛弃集成`hljs`，改为使用`cdnjs`外链，代码高亮方案也改为使用`cdnjs`外链(17.11.22 [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.3.1** 修复帮助文档链接无法跳转问题 [#125](https://github.com/hinesboy/mavonEditor/issues/125)(17.11.14 )
- **2.3.0** 解决const关键字报错问题 (17.10.27 / [lwdgit](https://github.com/lwdgit))
- **2.2.10** 更新babel-preset-env配置 (17.10.17)
- **2.2.8** 添加TAB缩进[#75](https://github.com/hinesboy/mavonEditor/issues/75) (17.9.29)
- **2.2.7** 修复[#88](https://github.com/hinesboy/mavonEditor/issues/88) (17.9.26)
- **2.2.6** 修复[#57](https://github.com/hinesboy/mavonEditor/issues/57) (17.9.11)
- **2.2.5** 合并贡献[65](https://github.com/hinesboy/mavonEditor/pull/65), 修复[#66](https://github.com/hinesboy/mavonEditor/issues/66), [#61](https://github.com/hinesboy/mavonEditor/issues/61)(17.9.10 / [cyy0418](https://github.com/cyy0418)， [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.2.4** 合并贡献[52](https://github.com/hinesboy/mavonEditor/pull/52), 给 <style> 标签添加了 scoped 属性 , 防止其样式影响页面上的其他元素(17.8.11 / [wzdxy](https://github.com/wzdxy))
- **2.2.3** 修复语言选择的问题[#50](https://github.com/hinesboy/mavonEditor/issues/50)(17.8.10 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.2.2** 修复快捷键监听错乱(17.8.5)
- **2.2.1** 修复[#48](https://github.com/hinesboy/mavonEditor/issues/48) [#45](https://github.com/hinesboy/mavonEditor/issues/45)的bug , 新增功能键【单双栏切换】(17.8.5)
- **2.1.13** 修复[#46](https://github.com/hinesboy/mavonEditor/issues/46)的bug(17.8.4 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.12** 修复**2.1.11**的编辑区没有占满的bug，拖动滚动条导致input没有移动的bug(17.7.28 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.11** 添加`$imgAddByUrl`, `$img2Url`, `$imglst2Url`操作[#31](https://github.com/hinesboy/mavonEditor/issues/31)，修复编辑区没有占满显示区的bug[#31](https://github.com/hinesboy/mavonEditor/issues/31)，更新帮助文档(17.7.28 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.10** 操作失误，发布2.1.9的Release(17.7.24 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.9** 修复显示问题，更新帮助文档(17.7.24 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.8** 添加居中、居左、居右快捷键(17.7.18 / [AdrienCasta](https://github.com/AdrienCasta))
- **2.1.7** 修正`$imgUpdateByFilename`触发`imgAdd`事件时返回filename错误的bug[#25](https://github.com/hinesboy/mavonEditor/issues/25)(17.7.14 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.6** 添加`$imgAddByFilename`, `$imgDelByFilename`, `$imgUpdateByUrl`方法用以直接操作图片[#25](https://github.com/hinesboy/mavonEditor/issues/25)(17.7.14 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.5** 添加`$imgUpdateByUrl`方法，用来替换相对路径为绝对路径[#25](https://github.com/hinesboy/mavonEditor/issues/25#issuecomment-314947131)(17.7.13 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.4** 修复`imgAdd`事件于`change`前响应的bug，导致`imgAdd`响应时无法获取改变后的value[#25](https://github.com/hinesboy/mavonEditor/issues/25#issuecomment-314947131)(17.7.13 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.3** ishljs默认设置为false(17.7.8)
- **2.1.2** 将help文档添加至document.body的末尾，修复flex嵌套样式错误(17.7.7 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.1.1** 添加法语语言包(17.6.30 / [dimalusa](https://github.com/dimalusa))
- **2.0.9** 添加subfiled , default_open 的watch事件(17.6.26)
- 修复预览模式不设置高度情况下，高度过大问题
- **2.0.6** 添加选项是否高亮代码，详见 props: ishljs(17.6.25 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **2.0.2** 调整编辑模式，详见 props: subfield、default_open(17.6.24)
- 新增props: placeholder 输入框为空时默认提示文本
- 整理代码状态机
- **2.0.0** highlight.js语言高亮文件异步调用渲染(17.6.20 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **1.7.3** 更改事件监听方式，修正粗体样式(17.6.15 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **1.7.0** 取消单栏编辑模式实时渲染(17.6.14 / [CHENXCHEN](https://github.com/CHENXCHEN))
- 添加图片预览(粘贴板图片复制粘贴本地预览、图片拖拽本地预览、手动选择图片本地预览)
- 添加图片文件添加删除事件
- 删除to-markdown部分
- **1.6.3** 新增Markdown样式选择 props：code_style(17.6.9 / [yyyybzzzz PR](https://github.com/yyyybzzzz))
- **1.6.1** 新增props：enabled编辑开关、toolbarsFlag工具栏是否显示(17.5.26)
- 修复subfield = true初始化时候不显示内容
- **1.5.6** 支持语言切换 ， 新增英文文档(17.5.11)
- **1.5.3** 拓展markdown渲染规则——KaTeX$公式 ， 修改help文档(17.5.6 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **1.5.2** 优化项目结构(17.5.6 / [CHENXCHEN](https://github.com/CHENXCHEN))
- 将toolbar抽离为两个单独vue文件，事件提取为toolbar_left.js和toolbar_right.js
- 抽离stylus样式为mavon-editor.styl
- 调整md.css位置至lib/css
- **1.5.1** 添加postcss插件，压缩插件体积，分离markdown样式(样式需单独引入，参考上述用法)(17.5.6 / [CHENXCHEN](https://github.com/CHENXCHEN))
- **1.4.8** 优化项目结构,添加webpack-dev-server的开发测试(17.5.4 / [CHENXCHEN](https://github.com/CHENXCHEN)）
- **1.4.7** 图标局部引入,减少文件体积(17.4.26）
- **1.4.2** 支持开启标题导航 ,快捷键监听对象更改为document（17.4.25）
- **1.4.0** 重构代码（17.4.24）
- **1.3.5** 增加撤销键、清空键、保存按钮 , 修复底部展示不完整BUG
- **1.3.4** 多个编辑器快捷键/组合键监听覆盖 , props.toolbars 传递规则纠正(传入值整体覆盖默认值)
- **1.3.3** 多个编辑器z-index冲突
- **1.3.2** props 传递方法 更改为 v-on 绑定方法
================================================
FILE: README-EN.md
================================================
# mavonEditor
| Vue2 | [](https://www.npmjs.com/package/mavon-editor/v/latest) |
| ---- | ------------------------------------------------------------ |
| **Vue3** | [](https://www.npmjs.com/package/mavon-editor/v/next) |
> A markdown editor based on Vue
### [中文说明](./README.md)
## Example Pictures
### PC
> [more images...](./doc/en/images.md)
## Use Setup
### Install mavon-editor
```
$ npm install mavon-editor --save
```
### Use
`index.js`:
```javascript
// Global Registration
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
```
`index.html`
```html
// The same below
<div id="main">
<mavon-editor v-model="value"/>
</div>
```
### Use in nuxt.js
> new file: vue-mavon-editor.js
```javascrpt
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
```
> nuxt.config.js
```javascript
plugins: [
...
{ src: '@/plugins/vue-mavon-editor', ssr: false }
],
```
> page
```vue
<template>
<div class="mavonEditor">
<no-ssr>
<mavon-editor :toolbars="markdownOption" v-model="handbook"/>
</no-ssr>
</div>
</template>
<script>
export default {
data() {
return {
markdownOption: {
bold: true,
... // more params
},
handbook: "#### how to use mavonEditor in nuxt.js"
};
}
};
</script>
<style scoped>
.mavonEditor {
width: 100%;
height: 100%;
}
</style>
```
> [more ways...](./doc/en/use.md)
> [set markdown-it object...](./doc/en/markdown.md)
## API
### props
| name | type | default value | describe |
| -------- | :---------: | :------------: | ------- |
| value | String | | Initial value |
| language | String | zh-CN | Language switch, zh-CN: Simplified Chinese, zh-TW: Traditional Chinese, en: English， fr: French, pt-BR: Brazilian Portuguese, ru: Russian, de: German, ja: Japanese |
| fontSize | String | 14px | font-size of edit area |
| scrollStyle| Boolean | true | Open the scroll bar style(Temp only support chrome) |
| boxShadow | Boolean | true | css: box-shadow of mavonEditor |
| subfield | Boolean | true | true: Double columns - Edit preview same screen , Single Columns - otherwise not |
| defaultOpen | String | |Default display area in single columns (subfield=false).<br/> edit: default show edit area<br/> preview: default show preview area<br/> other = edit |
| placeholder | String | Begin editing... | The default prompt text when the textarea is empty |
| editable | Boolean | true | Edit switch |
| codeStyle | String | code-github | markdown Style: default github, [option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js) |
| toolbarsFlag | Boolean | true | Show toolbars |
| navigation | Boolean | false | Show navigation |
| shortCut | Boolean | true | shortcut switch |
| ishljs | Boolean | true | highlight code switch |
| imageFilter | Function | null | Image file filter Function, params is a `File Object`, you should return `Boolean` about the test result |
| imageClick | function | null | Image Click Function |
| tabSize | Number | null | How many spaces equals one tab, default \t |
| html | Boolean | true | Enable HTML tags in source, for historical reasons this tag has always been true by default, but it is recommended to turn it off if you don't need this feature, as doing so it eliminates the security vulnerabilities altogether. |
| xssOptions | Object | {} | xss rules configuration, enabled by default, set to false to turn off, enabled will filter HTML tags, the default filter all HTML tag attributes, it is recommended to configure the whitelist on demand to reduce the possibility of being attacked.<br/> - custom rule reference: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)<br/>- Demo: [dev-demo](./src/dev/editor.vue) |
| toolbars | Object | As in the following example | toolbars |
#### toolbars
The default toolbar properties are all true, You can customize the object to cover them.
```javascript
/*
eg: {
bold: true,
italic: true,
header: true,
}
At this point, the toolbar only displays the three function keys.
*/
toolbars: {
bold: true,
italic: true,
header: true,
underline: true,
strikethrough: true,
mark: true,
superscript: true,
subscript: true,
quote: true,
ol: true,
ul: true,
link: true,
imagelink: true,
code: true,
table: true,
fullscreen: true,
readmodel: true,
htmlcode: true,
help: true,
/* 1.3.5 */
undo: true,
redo: true,
trash: true,
save: true,
/* 1.4.2 */
navigation: true,
/* 2.1.8 */
alignleft: true,
aligncenter: true,
alignright: true,
/* 2.2.1 */
subfield: true,
preview: true
}
```
If you need to customize and add toolbar buttons, you can do the following:
```vue
<mavon-editor>
<!-- Add a custom button in front of the left toolbar -->
<template slot="left-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
<!-- Add a custom button after the left toolbar -->
<template slot="left-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
<!-- Add a custom button in front of the right toolbar -->
<template slot="right-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
<!-- Add a custom button behind the right toolbar -->
<template slot="right-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="custom"
></button>
</template>
</mavon-editor>
```
### events
| name | params | describe|
| -------- | :---------: | ------- |
| change | String: value , String: reder | Edit area change callback event (render: Html source code) |
| save | String: value , String: reder | Ctrl+s and click save button |
| fullScreen | Boolean: status , String: value | Fullscreen editing toggle callback event(boolean: Fullscreen status) |
| readModel | Boolean: status , String: value | Reading mode toggle callback event(boolean: Reading mode status) |
| htmlCode | Boolean: status , String: value |Html code mode toggle callback event(boolean: status) |
| subfieldToggle | Boolean: status , String: value | Double columns edit mode toggle callback event(boolean: double columns status) |
| previewToggle | Boolean: status , String: value | Preview & Edit toggle callback event(boolean: preview status) |
| helpToggle | Boolean: status , String: value | Help-me toggle callback event(boolean: help status) |
| navigationToggle | Boolean: status , String: value | Navigation mode toggle callback event(boolean: nav status) |
| imgAdd | Number: pos, [File](https://developer.mozilla.org/en-US/docs/Web/API/File): imgfile | Add image file callback event(pos: position in the list of images, File: File Object) |
| imgDel | Array(2):[Number: pos,[File](https://developer.mozilla.org/en-US/docs/Web/API/File):imgfile ] | Delete image file callback event(Array(2): An array of length 2,the first is `pos`: position in the list of images, the second is `file`: File Object) |
### Hightlight
> If you do not need code highlighting, you need set ishljs to false
Set ishljs = true
```vue
<!-- default value is true -->
<mavon-editor :ishljs="true"></mavon-editor>
```
For optimize the size of pack, since **v2.4.2**, the following files will default to using `cdnjs` outside the chain:
+ `highlight.js`
+ `github-markdown-css`
+ `katex`(**v2.4.7**)
The language parsing files and code highlighting in Code Highlighting `highlight.js` will be loaded on demand.
`github-markdown-css` and` katex` will load only when mounted.
**Notice**:
[Option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js) and [Supported language](./src/lib/core/hljs/lang.hljs.js) is export from [highlight.js/9.12.0](https://github.com/isagalaev/highlight.js/tree/master/src)
> [without cdn, Click here to local on-demand loading...](./doc/en/no-cnd.md)
### Upload images
```vue
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
<script>
exports default {
methods: {
// bind @imgAdd event
$imgAdd(pos, $file){
// step 1. upload image to server.
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
// step 2. replace url  -> 
$vm.$img2Url(pos, url);
})
}
}
}
</script>
```
> [more info about upload images ...](./doc/en/upload-images.md)
### Note
- **Default size: min-height: 300px , min-width: 300px , Can be covered**
- **z-index: 1500**
- **Just for show html of md: toolbarsFlag: false , subfield: false, defaultOpen: "preview"**
### keyboard shortcuts
| key | keycode | fun |
| ---------------- | :----------------: | :-----------------------------: |
| F8 | 119 | toggle navigation |
| F9 | 120 | toggle [edit/preview] |
| F10 | 121 | toggle fullscreen |
| F11 | 122 | toggle readModel |
| F12 | 123 | toggle [double columns / single column] |
| TAB | 9 | \t |
| CTRL + S | 17 + 83 | @save |
| CTRL + D | 17 + 68 | remove selected lines |
| CTRL + Z | 17 + 90 | prev step |
| CTRL + Y | 17 + 89 | next step |
| CTRL + BreakSpace | 17 + 8 | trash |
| CTRL + B | 17 + 66 | \*\*Bold\*\* |
| CTRL + I | 17 + 73 | \*Italic\* |
| CTRL + H | 17 + 72 | # Header |
| CTRL + U | 17 + 85 | ++Underline++ |
| CTRL + M | 17 + 77 | ==Mark== |
| CTRL + Q | 17 + 81 | > Quote |
| CTRL + O | 17 + 79 | 1. OL |
| CTRL + L | 17 + 76 | \[Link title\](Link url) |
| CTRL + ALT + S | 17 + 18 + 83 | ^Superscript^ |
| CTRL + ALT + U | 17 + 18 + 85 | - UL |
| CTRL + ALT + C | 17 + 18 + 67 | \`\`\` Code block |
| CTRL + ALT + L | 17 + 18 + 76 | \!\[Image title\](Image link) |
| CTRL + ALT + T | 17 + 18 + 84 | Table |
| CTRL + SHIFT + S | 17 + 16 + 83 | ~Subscript~ |
| CTRL + SHIFT + D | 17 + 16 + 68 | \~\~Strikethrough\~\~ |
| CTRL + SHIFT + C | 17 + 16 + 67 | align center |
| CTRL + SHIFT + L | 17 + 16 + 76 | align left |
| CTRL + SHIFT + R | 17 + 16 + 82 | align right |
| SHIFT + TAB | 16 + 9 | remove \t |
## Dependencies
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [auto-textarea](https://github.com/hinesboy/auto-textarea)
## Syntax extensions
- [emoji](https://github.com/markdown-it/markdown-it-emoji)
- [subscript](https://github.com/markdown-it/markdown-it-sub)
- [superscript](https://github.com/markdown-it/markdown-it-sup)
- [container](https://github.com/markdown-it/markdown-it-container)
- [definition list](https://github.com/markdown-it/markdown-it-deflist)
- [abbreviation](https://github.com/markdown-it/markdown-it-abbr)
- [footnote](https://github.com/markdown-it/markdown-it-footnote)
- [insert](https://github.com/markdown-it/markdown-it-ins)
- [mark](https://github.com/markdown-it/markdown-it-mark)
- [todo list](https://github.com/revin/markdown-it-task-lists)
- [highlight](https://github.com/isagalaev/highlight.js)
- [katex](https://github.com/Khan/KaTeX)
- [images preview](https://github.com/CHENXCHEN/markdown-it-images-preview)
- [toc](https://github.com/tylerlong/markdown-it-toc)
> 可通过获取[markdown-it](./doc/cn/markdown.md)对象引入[其他语法插件](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)
## Collaborators
- [CHENXCHEN](https://github.com/CHENXCHEN)
- [ygj6](https://github.com/ygj6)
- [yukaige](https://github.com/yukaige)
## License
mavonEditor is open source and released under the MIT License.
Copyright (c) 2017 hinesboy
================================================
FILE: README.md
================================================
# mavonEditor
| Vue2 | [](https://www.npmjs.com/package/mavon-editor/v/latest) |
| ---- | ------------------------------------------------------------ |
| **Vue3** | [](https://www.npmjs.com/package/mavon-editor/v/next) |
### [English Documents](./README-EN.md)
[Demo for jsfiddle](https://jsfiddle.net/CHENXCHEN/qf7gLw3a/3/)
## example (图片展示)
### PC
> [查看更多图片点击这里...](./doc/cn/images.md)
### Install mavon-editor (安装)
```
$ npm install mavon-editor --save
```
### Use (如何引入)
`index.js`:
```javascript
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
```
`index.html`
```html
<div id="main">
<mavon-editor v-model="value"/>
</div>
```
### 如何在nuxt.js 中使用
> 首先在工程目录plugins 下新建 vue-mavon-editor.js
```javascrpt
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
```
> 然后在nuxt.config.js 中添加plugins配置
```javascript
plugins: [
...
{ src: '@/plugins/vue-mavon-editor', ssr: false }
],
```
> 最后一步在页面或者组件中引入
```vue
<template>
<div class="mavonEditor">
<no-ssr>
<mavon-editor :toolbars="markdownOption" v-model="handbook"/>
</no-ssr>
</div>
</template>
<script>
export default {
data() {
return {
markdownOption: {
bold: true, // 粗体
... // 更多配置
},
handbook: "#### how to use mavonEditor in nuxt.js"
};
}
};
</script>
<style scoped>
.mavonEditor {
width: 100%;
height: 100%;
}
</style>
```
> [更多引入方式点击这里...](./doc/cn/use.md)
> [如何获取并设置markdown-it对象...](./doc/cn/markdown.md)
## API 文档
### props
| name 名称 | type 类型 | default 默认值 | describe 描述 |
| ------------ | :-----: | :---------: | ---------------------------------------- |
| value | String | | 初始值 |
| language | String | zh-CN | 语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语 |
| fontSize | String | 14px | 编辑区域文字大小 |
| scrollStyle | Boolean | true | 开启滚动条样式(暂时仅支持chrome) |
| boxShadow | Boolean | true | 开启边框阴影 |
| boxShadowStyle | String | 0 2px 12px 0 rgba(0, 0, 0, 0.1) | 边框阴影样式 |
| transition | Boolean | true | 是否开启过渡动画 |
| toolbarsBackground | String | #ffffff | 工具栏背景颜色 |
| previewBackground | String | #fbfbfb | 预览框背景颜色 |
| subfield | Boolean | true | true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏) |
| defaultOpen | String | |在单栏（`subfield=false`）时默认展示区域.<br/> edit： 默认展示编辑区域，<br/> preview： 默认展示预览区域 <br/> 其他 = edit |
| placeholder | String | 开始编辑... | 输入框为空时默认提示文本 |
| editable | Boolean | true | 是否允许编辑 |
| codeStyle | String | code-github | markdown样式： 默认github, [可选配色方案](./src/lib/core/hljs/lang.hljs.css.js) |
| toolbarsFlag | Boolean | true | 工具栏是否显示 |
| navigation | Boolean | false | 默认展示目录 |
| shortCut | Boolean | true | 是否启用快捷键 |
| autofocus | Boolean | true | 自动聚焦到文本框 |
| ishljs | Boolean | true | 代码高亮 |
| imageFilter | function | null | 图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法 |
| imageClick | function | null | 图片点击事件，默认为预览，可覆盖 |
| tabSize | Number | \t | tab转化为几个空格，默认为\t |
| html | Boolean | true | 启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。 |
| xssOptions | Object | {} | xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。<br/>- 自定义规则参考: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)<br/>- 参考DEMO: [dev-demo](./src/dev/editor.vue) |
| toolbars | Object | 如下例 | 工具栏 |
#### toolbars
默认工具栏按钮全部开启, 传入自定义对象，可以选择启用部分按钮
```javascript
/*
例如: {
bold: true, // 粗体
italic: true,// 斜体
header: true,// 标题
}
此时, 仅仅显示此三个功能键
*/
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
}
```
如果需要自定义添加工具栏按钮，可以通过以下方式
```js
<mavon-editor>
<!-- 左工具栏前加入自定义按钮 -->
<template slot="left-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
<!-- 左工具栏后加入自定义按钮 -->
<template slot="left-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
<!-- 右工具栏前加入自定义按钮 -->
<template slot="right-toolbar-before">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
<!-- 右工具栏后加入自定义按钮 -->
<template slot="right-toolbar-after">
<button
type="button"
@click="$click('test')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true"
title="自定义"
></button>
</template>
</mavon-editor>
```
### events 事件绑定
| name 方法名 | params 参数 | describe 描述 |
| ---------------- | :-----------------------------: | ---------------------------------------- |
| change | String: value , String: render | 编辑区发生变化的回调事件(render: value 经过markdown解析后的结果) |
| save | String: value , String: render | ctrl + s 的回调事件(保存按键,同样触发该回调) |
| fullScreen | Boolean: status , String: value | 切换全屏编辑的回调事件(boolean: 全屏开启状态) |
| readModel | Boolean: status , String: value | 切换沉浸式阅读的回调事件(boolean: 阅读开启状态) |
| htmlCode | Boolean: status , String: value | 查看html源码的回调事件(boolean: 源码开启状态) |
| subfieldToggle | Boolean: status , String: value | 切换单双栏编辑的回调事件(boolean: 双栏开启状态) |
| previewToggle | Boolean: status , String: value | 切换预览编辑的回调事件(boolean: 预览开启状态) |
| helpToggle | Boolean: status , String: value | 查看帮助的回调事件(boolean: 帮助开启状态) |
| navigationToggle | Boolean: status , String: value | 切换导航目录的回调事件(boolean: 导航开启状态) |
| imgAdd | Number: pos, [File](https://developer.mozilla.org/en-US/docs/Web/API/File): imgfile | 图片文件添加回调事件(pos: 图片在列表中的位置, File: File Object) |
| imgDel | Array(2):[Number: pos,[File](https://developer.mozilla.org/en-US/docs/Web/API/File):imgfile ] | 图片文件删除回调事件(Array(2): 两个元素的数组，第一位是图片在列表中的位置，第二位是File对象) |
### 代码高亮
> 如不需要hightlight代码高亮显示，你应该设置ishljs为false
开启代码高亮props
```vue
<!-- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor>
```
为优化插件体积，从**v2.4.2**起以下文件将默认使用`cdnjs`外链:
+ `highlight.js`
+ `github-markdown-css`
+ `katex`(**v2.4.7**)
代码高亮`highlight.js`中的语言解析文件和代码高亮样式将在使用时按需加载.
`github-markdown-css`和`katex`仅会在`mounted`时加载
**Notice**:
[可选配色方案](./src/lib/core/hljs/lang.hljs.css.js) 和 [支持的语言](./src/lib/core/hljs/lang.hljs.js) 是从 [highlight.js/9.12.0](https://github.com/isagalaev/highlight.js/tree/master/src) 导出的
> [不使用cdn，本地按需加载点击这里...](./doc/cn/no-cnd.md)
### 图片上传
```vue
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
<script>
export default {
methods: {
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 第一步.将图片上传到服务器.
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
// 第二步.将返回的url替换到文本原位置 -> 
/**
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
}
}
}
</script>
```
> [图片上传详情点击这里...](./doc/cn/upload-images.md)
### 注
- **默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖**
- **基础z-index: 1500**
- **仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"**
### 快捷键
| key | keycode | 功能 |
| ---------------- | :----------------: | :-----------------------------: |
| F8 | 119 | 开启/关闭导航 |
| F9 | 120 | 预览/编辑切换 |
| F10 | 121 | 开启/关闭全屏 |
| F11 | 122 | 开启/关闭阅读模式 |
| F12 | 123 | 单栏/双栏切换 |
| TAB | 9 | 缩进 |
| CTRL + S | 17 + 83 | 触发保存 |
| CTRL + D | 17 + 68 | 删除选中行 |
| CTRL + Z | 17 + 90 | 上一步 |
| CTRL + Y | 17 + 89 | 下一步 |
| CTRL + BreakSpace | 17 + 8 | 清空编辑 |
| CTRL + B | 17 + 66 | \*\*加粗\*\* |
| CTRL + I | 17 + 73 | \*斜体\* |
| CTRL + H | 17 + 72 | # 标题 |
| CTRL + 1 | 17 + 97 or 49 | # 标题 |
| CTRL + 2 | 17 + 98 or 50 | ## 标题 |
| CTRL + 3 | 17 + 99 or 51 | ### 标题 |
| CTRL + 4 | 17 + 100 or 52 | #### 标题 |
| CTRL + 5 | 17 + 101 or 53 | ##### 标题 |
| CTRL + 6 | 17 + 102 or 54 | ###### 标题 |
| CTRL + U | 17 + 85 | ++下划线++ |
| CTRL + M | 17 + 77 | ==标记== |
| CTRL + Q | 17 + 81 | > 引用 |
| CTRL + O | 17 + 79 | 1. 有序列表 |
| CTRL + L | 17 + 76 | \[链接标题\](链接地址) |
| CTRL + ALT + S | 17 + 18 + 83 | ^上角标^ |
| CTRL + ALT + U | 17 + 18 + 85 | - 无序列表 |
| CTRL + ALT + C | 17 + 18 + 67 | \`\`\` 代码块 |
| CTRL + ALT + L | 17 + 18 + 76 | \!\[图片标题\](图片链接) |
| CTRL + ALT + T | 17 + 18 + 84 | 表格 |
| CTRL + SHIFT + S | 17 + 16 + 83 | ~下角标~ |
| CTRL + SHIFT + D | 17 + 16 + 68 | \~\~中划线\~\~ |
| CTRL + SHIFT + C | 17 + 16 + 67 | 居中 |
| CTRL + SHIFT + L | 17 + 16 + 76 | 居左 |
| CTRL + SHIFT + R | 17 + 16 + 82 | 居右 |
| SHIFT + TAB | 16 + 9 | 取消缩进 |
## Dependencies (依赖)
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [auto-textarea](https://github.com/hinesboy/auto-textarea)
## Markdown 语法拓展
- [emoji](https://github.com/markdown-it/markdown-it-emoji)
- [subscript](https://github.com/markdown-it/markdown-it-sub)
- [superscript](https://github.com/markdown-it/markdown-it-sup)
- [container](https://github.com/markdown-it/markdown-it-container)
- [definition list](https://github.com/markdown-it/markdown-it-deflist)
- [abbreviation](https://github.com/markdown-it/markdown-it-abbr)
- [footnote](https://github.com/markdown-it/markdown-it-footnote)
- [insert](https://github.com/markdown-it/markdown-it-ins)
- [mark](https://github.com/markdown-it/markdown-it-mark)
- [todo list](https://github.com/revin/markdown-it-task-lists)
- [highlight](https://github.com/isagalaev/highlight.js)
- [katex](https://github.com/Khan/KaTeX)
- [images preview](https://github.com/CHENXCHEN/markdown-it-images-preview)
- [toc](https://github.com/tylerlong/markdown-it-toc)
> 可通过[获取markdown-it对象](./doc/cn/markdown.md)引入[其他语法插件](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)
可通过[获取markdown-it对象](./doc/cn/markdown.md)引入[其他语法插件](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)
## update(更新内容)
- [更新日志](./LOG.md)
## Collaborators(合作者)
- [CHENXCHEN](https://github.com/CHENXCHEN)
- [ygj6](https://github.com/ygj6)
- [yukaige](https://github.com/yukaige)
## License (证书)
mavonEditor is open source and released under the MIT License.
Copyright (c) 2017 hinesboy
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Supported Versions
Security is of the highest importance and all security vulnerabilities or suspected security vulnerabilities should be reported to mavonEditor team privately, to minimize attacks against current users of mavonEditor before they are fixed. Vulnerabilities will be investigated and patched on the next patch (or minor) release as soon as possible. This information could be kept entirely internal to the project.
## Reporting a Vulnerability
If you know of a publicly disclosed security vulnerability for mavonEditor, please IMMEDIATELY contact jiawulin@vip.qq.com to inform the mavonEditor Team.
IMPORTANT: Do not file public issues on GitHub for security vulnerabilities.
================================================
FILE: _config.yml
================================================
theme: jekyll-theme-cayman
================================================
FILE: doc/cn/images.md
================================================
## 图片展示
### PC
#### 链接 & 上传图片 Gif
### 移动
================================================
FILE: doc/cn/markdown.md
================================================
## Markdown-It
### 获取mavonEditor中的markdown-it对象
#### 方法1 通过全局引入的mavonEditor获取
```javascript
import MavonEditor from 'mavon-editor'
Vue.use(MavonEditor)
...
const markdownIt = MavonEditor.mavonEditor.getMarkdownIt()
```
#### 方法2 通过局部引入的mavonEditor获取
```javascript
import { mavonEditor } from 'mavon-editor'
const markdownIt = mavonEditor.getMarkdownIt()
```
#### 方法3 通过mavonEditor的实例获取
```javascript
<mavonEditor ref=md></mavonEditor>
...
const markdownIt = this.refs.md.getMarkdownIt()
```
### 使用markdown-it对象
> 设置markdown换行格式必须为行尾添加两空格
```
// markdownIt通过上述方式获取
markdownIt.set({ breaks: false });
```
> [更多设置参考markdown-it...](https://github.com/markdown-it/markdown-it)
================================================
FILE: doc/cn/no-cnd.md
================================================
### 本地按需加载
如果你想自己引入而不希望`mavon-editor`加载的话，可以将`externalLink`设置为`false`.
如果想本地按需加载，你需要安装`copy-webpack-plugin`插件(`npm install copy-webpack-plugin -D`)
配置webpack如下所示：
(假定`webpack`配置文件位于项目的`/webpack/webpack.js`,
而你希望将`hljs`以及`markdown`相关文件导出位于项目的`/dist/highlightjs`以及`/dist/markdown`目录之下,
`katex`和上面一样)
```javascript
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ...
plugins: [
// ...
new CopyWebpackPlugin([{
from: 'node_modules/mavon-editor/dist/highlightjs',
to: path.resolve(__dirname, '../dist/highlightjs'), // 插件将会把文件导出于/dist/highlightjs之下
}, {
from: 'node_modules/mavon-editor/dist/markdown',
to: path.resolve(__dirname, '../dist/markdown'), // 插件将会把文件导出于/dist/markdown之下
}, {
from: 'node_modules/mavon-editor/dist/katex', // 插件将会把文件导出
to: path.resolve(__dirname, '../dist/katex')
}]),
// ...
],
// ...
}
```
然后你需要给`mavon-editor`设置`externalLink`
相关代码如下所示:
(假定你的`web根目录`位于项目的`/dist/`, 你的网站是`www.site.com`, 那么
`markdown`, `hljs_js`, `hljs_css`, `hljs_lang`, `katex_css`, `katex_js`返回的是你的网站对应文件位置，
比如`www.site.com/markdown/github-markdown.min.css`
对应的文件应该位于项目的`/dist/markdown/github-markdown.min.css`)
```javascript
<template>
<div id="app">
<mavon-editor
:subfield = "subfield"
:code_style="code_style"
:ishljs="true"
:externalLink="externalLink"
></mavon-editor>
</div>
</template>
<script>
export default {
data () {
return {
subfield: true,
code_style: 'solarized-dark',
externalLink: {
markdown_css: function() {
// 这是你的markdown css文件路径
return '/markdown/github-markdown.min.css';
},
hljs_js: function() {
// 这是你的hljs文件路径
return '/highlightjs/highlight.min.js';
},
hljs_css: function(css) {
// 这是你的代码高亮配色文件路径
return '/highlightjs/styles/' + css + '.min.css';
},
hljs_lang: function(lang) {
// 这是你的代码高亮语言解析路径
return '/highlightjs/languages/' + lang + '.min.js';
},
katex_css: function() {
// 这是你的katex配色方案路径路径
return '/katex/katex.min.css';
},
katex_js: function() {
// 这是你的katex.js路径
return '/katex/katex.min.js';
},
}
}
},
}
</script>
```
**Notice**: 如果你想禁用`mavon-editor`的自动加载，
可以将`externalLink`设置为`false`或`externalLink`中的某函数值设置为`false`
如：
```javascript
export default {
// ...
data() {
return {
externalLink: false, // 这里只能为`true`/`false`和一个`Object`, 如果为`true`代表全使用外链且自动加载, 如果为`false`则禁用，如果为`Object`则如上所示
}
}
// ...
}
```
或者:
```javascript
export default {
// ...
data() {
return {
externalLink: {
hljs_css: function(css) {
// 这是你的代码高亮配色文件路径
return '/highlightjs/styles/' + css + '.min.css';
},
katex_css: false, // `false`表示禁用自动加载，它也可以是个函数，如果它是个函数，那么这个函数应该返回一个可访问的`katex`的css路径字符串
// 我们没有设置`katex_js`, `hljs_js`, `hljs_lang`, `markdown_css`， `mavon-editor`会认为它的值为`true`，它会默认使用`cdnjs`相关外链加载
},
}
}
// ...
}
```
================================================
FILE: doc/cn/upload-images.md
================================================
### 图片上传
#### 方式1：图片上传至文件服务器
> 每次添加图片触发上传
```javascript
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
methods: {
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 第一步.将图片上传到服务器.
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
// 第二步.将返回的url替换到文本原位置 -> 
// $vm.$img2Url 详情见本页末尾
$vm.$img2Url(pos, url);
})
}
}
}
```
> 统一上传多张图片
```javascript
<template>
<!--点击按钮触发图片统一上传-->
<button @click="uploadimg">upload</button>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
data(){
return {
img_file: {}
}
},
methods: {
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 缓存图片信息
this.img_file[pos] = $file;
},
$imgDel(pos){
delete this.img_file[pos];
},
uploadimg($e){
// 第一步.将图片上传到服务器.
var formdata = new FormData();
for(var _img in this.img_file){
formdata.append(_img, this.img_file[_img]);
}
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((res) => {
/**
* 例如：返回数据为 res = [[pos, url], [pos, url]...]
* pos 为原图片标志（0）
* url 为上传后图片的url地址
*/
// 第二步.将返回的url替换到文本原位置 -> 
for (var img in res) {
// $vm.$img2Url 详情见本页末尾
$vm.$img2Url(img[0], img[1]);
}
})
},
}
}
```
#### 方式2：直接将图片保存为base64编码
```javascript
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" v-model="mdStr" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
data() {
return {
mdStr: '### demo \n '
};
},
mounted() {
// 如果原始md字符串中存在曾上传的图片， 则需要将对应<img>中的src替换为base64
this.$nextTick(() => {
// $vm.$imgUpdateByUrl 详情见本页末尾
$vm.$imgUpdateByUrl(0, base64内容);
}
},
methods: {
$imgAdd(pos, $file){
// 将图片上传到服务器.
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((flag) => {
})
}
}
}
```
### 图片事件
| name 方法名 | params 参数 | describe 描述 |
| ---------------- | :-----------------------------: | ---------------------------------------- |
| $vm.$refs.toolbar_left.$imgDelByFilename(>=**2.1.6**) | String: filename | 主动删除对应图片文件, 如果成功返回TRUE，否则返回FALSE, (并将其从 `md` 源码中删除 (>=**2.4.16**)) |
| $vm.$refs.toolbar_left.$imgAddByFilename(>=**2.1.6**) | String: filename, File: file | 添加对应图片文件，文件别名为filename(filename 必须为 ./filename 样式), 如果成功返回TRUE，否则返回FALSE |
| $vm.$refs.toolbar_left.$imgUpdateByFilename(>=**2.1.6**) | String: filename, File: file | 更新对应文件名的图片文件(filename 必须为 ./filename 样式), 如果成功返回TRUE，否则返回FALSE |
| $vm.$imgUpdateByUrl(>=**2.1.5**) | String: filename, String: url | 将<img>标签src相对路径值替换为url(如./0 -> http://path/to/png/some.png) |
| $vm.$imgAddByUrl(>=**2.1.11**) | String: filename, String: url | 同上(如./0 -> http://path/to/png/some.png) |
| $vm.$img2Url(>=**2.1.11**) | String: filename, String: url | 将md源码中图片文件名替换为url(如`` -> ``) |
| $vm.$imglst2Url(>=**2.1.11**) | Array: filenameLst | 同上(filenameLst: [[filename, url], ...]) |
**注意**: `$vm`指为`mavonEditor`实例，可以通过如下两种方式获取
1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，此时`$vm`即为`mavonEditor`
2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>， 此时`$vm`为 `this.$refs.md`
================================================
FILE: doc/cn/use.md
================================================
### Use (如何引入)
#### 方法1
`index.js`:
```javascript
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
```
`index.html`
```html
// 下同
<div id="main">
<mavon-editor v-model="value"/>
</div>
```
#### 方法2
`index.js`:
```javascript
// 全局注册
// require with Webpack/Node.js
...
var mavonEditor = require('mavon-editor')
import 'mavon-editor/dist/css/index.css'
...
```
#### 方法3
`editor.vue`:
```javascript
<template>
<div id="editor">
<mavon-editor style="height: 100%"></mavon-editor>
</div>
</template>
<script>
// Local Registration
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: 'editor',
components: {
mavonEditor
// or 'mavon-editor': mavonEditor
}
}
</script>
<style>
#editor {
margin: auto;
width: 80%;
height: 580px;
}
</style>
```
`index.js`:
```javascript
// 下同
import Vue from 'vue';
var editor = require('./editor.vue');
new Vue({
el: '#main',
render: h => h(editor)
});
```
`index.html`:
```html
// 下同
<div id="main">
</div>
```
#### 方法4
`editor.vue`:
```javascript
...
<script>
// Local Registration
// import mavonEditor from 'mavon-editor'
var mavonEditor = require('mavon-editor')
import 'mavon-editor/dist/css/index.css'
export default {
name: 'editor',
components: {
'mavon-editor': mavonEditor.mavonEditor
}
}
</script>
<style>
#editor {
...
</style>
```
================================================
FILE: doc/en/images.md
================================================
## Example Pictures
### PC
### Link & Upload Images Gif
### Mobile
================================================
FILE: doc/en/markdown.md
================================================
## Markdown-It
### Get the markdown-it object of mavonEditor
#### method 1: Global Registration
```javascript
import MavonEditor from 'mavon-editor'
Vue.use(MavonEditor)
...
const markdownIt = MavonEditor.mavonEditor.getMarkdownIt()
```
#### method 2: Local Registration
```javascript
import {mavonEditor} from 'mavon-editor'
const markdownIt = mavonEditor.getMarkdownIt()
```
#### method 3: Use mavonEditor ref
```javascript
<mavonEditor ref=md></mavonEditor>
...
const markdownIt = this.refs.md.getMarkdownIt()
```
### Use markdown-it object
> eg: set the line break style
```
// get markdownIt as above
markdownIt.set({ breaks: false });
```
> [markdown-it API](https://github.com/markdown-it/markdown-it)
================================================
FILE: doc/en/no-cnd.md
================================================
### Local on-demand loading
You can set `externalLink` to` false` if you want to introduce yourself without wanting `mavon-editor` to load.
If you want to load locally, you need to install the `copy-webpack-plugin` plugin (` npm install copy-webpack-plugin -D`)
Configuring your `webpack` as below:
(We assume your configuration file locate in your project `/webpack/webpack.js`,
and you want to export `hljs` and `markdown` files to `/dist/highlightjs` and `/dist/markdown`,
`katex` is the same as above)
```javascript
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ...
plugins: [
// ...
new CopyWebpackPlugin([{
from: 'node_modules/mavon-editor/dist/highlightjs',
to: path.resolve(__dirname, '../dist/highlightjs'), // plugin will export hljs files into /dist/highlightjs
}, {
from: 'node_modules/mavon-editor/dist/markdown',
to: path.resolve(__dirname, '../dist/markdown'), // plugin will export markdown files into /dist/markdown
}, {
from: 'node_modules/mavon-editor/dist/katex', // plugin will export katex files into /dist/katex
to: path.resolve(__dirname, '../dist/katex')
}]),
// ...
],
// ...
}
```
And then you need set `externalLink` to `mavon-editor`,
the code is as follows:
(We assume your `web root` located in your project `/dist/`, and your website url is `www.site.com`,
then `markdown`, `hljs_js`, `hljs_css`, `hljs_lang`, `katex_css`, `katex_js` need return related file locations,
for example, the `www.site.com/markdown/github-markdown.min.css` link file should be located in the
`/dist/markdown/github-markdown.min.css`)
```javascript
<template>
<div id="app">
<mavon-editor
:subfield = "subfield"
:code_style="code_style"
:ishljs="true"
:externalLink="externalLink"
></mavon-editor>
</div>
</template>
<script>
export default {
data () {
return {
subfield: true,
code_style: 'solarized-dark',
externalLink: {
markdown_css: function() {
// thi is your markdown css file path 这是你的markdown css文件路径
return '/markdown/github-markdown.min.css';
},
hljs_js: function() {
// 这是你的hljs文件路径
// this is your hljs file
return '/highlightjs/highlight.min.js';
},
hljs_css: function(css) {
// this is your hljs language file
return '/highlightjs/styles/' + css + '.min.css';
},
hljs_lang: function(lang) {
// this is your hljs css file
return '/highlightjs/languages/' + lang + '.min.js';
},
katex_css: function() {
// this is your katex css file
return '/katex/katex.min.css';
},
katex_js: function() {
// this is your katex js file
return '/katex/katex.min.js';
},
}
}
},
}
</script>
```
**Notice**: If you want to disable `mavon-editor` autoload from `cdnjs`,
You can set `externalLink` to` false` or a function in `externalLink` to` false`
example:
```javascript
export default {
// ...
data() {
return {
externalLink: false, // This can only be `true` /` false` and `Object`, if` true` means that all external links are used and loaded automatically, `false` is disabled,` Object` is as shown above
}
}
// ...
}
```
or:
```javascript
export default {
// ...
data() {
return {
externalLink: {
hljs_css: function(css) {
return '/highlightjs/styles/' + css + '.min.css';
},
katex_css: false, // `false` means that autoloading is disabled, it can also be a function, and if it is a function then this function should return an accessible ` katex` css path string
// We do not set `katex_js`,` hljs_js`, `hljs_lang`,` markdown_css`, `mavon-editor` to assume that it has the value` true` and it defaults to loading using `cdnjs` related outerchain.
},
}
}
// ...
}
```
================================================
FILE: doc/en/upload-images.md
================================================
### Upload images
#### method 1: Upload to File server
> Each time you add a image to trigger the upload
```javascript
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
methods: {
// bind @imgAdd event
$imgAdd(pos, $file){
/ step 1. upload image to server.
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
// step 2. replace url  -> 
// $vm.$img2Url. The details at the end of this page
$vm.$img2Url(pos, url);
})
}
}
}
```
> Multiple images unified upload
```javascript
<template>
<button @click="uploadimg">upload</button>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
data(){
return {
img_file: {}
}
},
methods: {
// bind @imgAdd event
$imgAdd(pos, $file){
// cache images info
this.img_file[pos] = $file;
},
$imgDel(pos){
delete this.img_file[pos];
},
uploadimg($e){
// step 1. upload images to server.
var formdata = new FormData();
for(var _img in this.img_file){
formdata.append(_img, this.img_file[_img]);
}
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((res) => {
/**
* eg：res = [[pos, url], [pos, url]...]
*/
// step 2. replace url  -> 
for (var img of res) {
// $vm.$img2Url. The details at the end of this page
$vm.$img2Url(img[0], img[1]);
}
})
},
}
}
```
#### method 2:base64
```javascript
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" v-model="mdStr" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
data() {
return {
mdStr: '### demo \n '
};
},
mounted() {
// init: replace <img src="base64">
this.$nextTick(() => {
// $vm.$imgUpdateByUrl. The details at the end of this page
$vm.$imgUpdateByUrl('./0', base64);
}
},
methods: {
$imgAdd(pos, $file){
// upload image(base64)
var formdata = new FormData();
formdata.append('image', $file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((flag) => {
})
}
}
}
```
### image methods
| name | params | describe |
| ---------------- | :-----------------------------: | ---------------------------------------- |
| $vm.$refs.toolbar_left.$imgDelByFilename(>=**2.1.6**) | String: filename | Delete the image by filename, return true if sucess, false otherwise, (and it will remove from `md` (>=**2.4.16**)) |
| $vm.$refs.toolbar_left.$imgAddByFilename(>=**2.1.6**) | String: filename, File: file | Add the image by filename (The filename alias style must be "./filename"), return true if sucess, false otherwise |
| $vm.$refs.toolbar_left.$imgUpdateByFilename(>=**2.1.6**) | String: filename, File: file | Update the image by filename(The filename alias style must be "./filename"), return true if sucess, false otherwise |
| $vm.$imgUpdateByUrl(>=**2.1.6**) | String: filename, String: url | Update filename to url(example: ./0 -> http://path/to/png/some.png) |
| $vm.$imgAddByUrl(>=**2.1.11**) | String: filename, String: url | Same as above |
| $vm.$img2Url(>=**2.1.11**) | String: filename, String: url | replace filename to url(example: `` -> ``) |
| $vm.$imglst2Url(>=**2.1.11**) | Array: filenameLst | Same as above(filenameLst: [[filename, url], ...]) |
**Notice**: `$vm` => reference instance of component, you can get it:
1. `import {mavonEditor} from ...`: `$vm` == `mavonEditor`
2. `<mavon-editor ref=md ></mavon-editor>: `$vm` == `this.$refs.md`
================================================
FILE: doc/en/use.md
================================================
### Use
#### method 1
`index.js`:
```javascript
// Global Registration
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
```
`index.html`
```html
// The same below
<div id="main">
<mavon-editor v-model="value"/>
</div>
```
#### method 2
`index.js`:
```javascript
// Global Registration
// require with Webpack/Node.js
...
var mavonEditor = require('mavon-editor')
import 'mavon-editor/dist/css/index.css'
...
```
#### method 3
`editor.vue`:
```javascript
<template>
<div id="editor">
<mavon-editor style="height: 100%"></mavon-editor>
</div>
</template>
<script>
// Local Registration
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: 'editor',
components: {
mavonEditor
// or 'mavon-editor': mavonEditor
}
}
</script>
<style>
#editor {
margin: auto;
width: 80%;
height: 580px;
}
</style>
```
`index.js`:
```javascript
// The same below
import Vue from 'vue';
var editor = require('./editor.vue');
new Vue({
el: '#main',
render: h => h(editor)
});
```
`index.html`:
```html
// The same below
<div id="main">
</div>
```
#### method 4
`editor.vue`:
```javascript
...
<script>
// Local Registration
// import mavonEditor from 'mavon-editor'
var mavonEditor = require('mavon-editor')
// the Object of markdown-it : mavonEditor.markdownIt
import 'mavon-editor/dist/css/index.css'
export default {
name: 'editor',
components: {
'mavon-editor': mavonEditor.mavonEditor
}
}
</script>
<style>
...
</style>
```
================================================
FILE: jest.config.js
================================================
module.exports = {
transformIgnorePatterns: ["<rootDir>/node_modules/(?!auto-textarea|@vue|src)"],
testMatch: [
"**/tests/unit/*.spec.js"
],
verbose: true,
moduleFileExtensions: ['js', 'vue', 'md', 'html'],
moduleNameMapper: {
'\\.(css|scss)$': 'identity-obj-proxy',
'^@/(.*)$': '<rootDir>/src/$1'
},
transform: {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.vue$": "<rootDir>/node_modules/vue-jest",
'.*\\.(yml|html|md)$': 'jest-raw-loader'
},
// setupFiles: ['<rootDir>/tests/unit/setup.js'],
coverageDirectory: '<rootDir>/tests/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/dev/**',
'!**/node_modules/**'
],
snapshotSerializers: [
"jest-serializer-vue"
]
}
================================================
FILE: mavon-editor.d.ts
================================================
import { Component } from "vue";
interface VueMavonEditor {
markdownIt: any;
mavonEditor: Component;
LeftToolbar: Component;
RightToolbar: Component;
install: (Vue: any) => any;
}
declare let editor: VueMavonEditor;
export default editor;
================================================
FILE: package.json
================================================
{
"name": "mavon-editor",
"version": "2.10.5",
"description": "Vue markdown editor",
"main": "dist/mavon-editor.js",
"types": "./mavon-editor.d.ts",
"scripts": {
"dev": "webpack-dev-server --progress --config webpack/webpack.dev.js",
"ci-build": "webpack --progress --config webpack/webpack.build.js",
"build": "run-s lint test ci-build",
"test": "jest",
"test:coverage": "jest --coverage",
"lint": "eslint --ext .js,.vue src/",
"lint:fix": "eslint --fix --ext .js,.vue src/"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hinesboy/mavonEditor.git"
},
"keywords": [
"javascript",
"vue",
"markdown",
"editor",
"html"
],
"files": [
"dist",
"mavon-editor.d.ts",
"src"
],
"author": "hinesboy",
"license": "MIT",
"bugs": {
"url": "https://github.com/hinesboy/mavonEditor/issues"
},
"homepage": "https://github.com/hinesboy/mavonEditor#readme",
"dependencies": {
"xss": "^1.0.10"
},
"devDependencies": {
"@vue/test-utils": "^1.1.2",
"auto-textarea": "^1.4.0",
"autoprefixer": "^8.3.0",
"babel-core": "^6.0.0",
"babel-eslint": "^8.0.2",
"babel-jest": "^23.6.0",
"babel-loader": "^7.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"copy-webpack-plugin": "^4.2.3",
"css-loader": "^0.28.1",
"eslint": "^4.11.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-html": "^4.0.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"github-markdown-css": "^2.6.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.6.0",
"jest-raw-loader": "^1.0.1",
"jest-serializer-vue": "^2.0.2",
"katex": "^0.11.1",
"keycode": "^2.1.9",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"markdown-it": "^10.0.0",
"markdown-it-abbr": "^1.0.4",
"markdown-it-container": "^2.0.0",
"markdown-it-deflist": "^2.0.0",
"markdown-it-emoji": "^1.1.1",
"markdown-it-footnote": "^3.0.1",
"markdown-it-for-inline": "~0.1.0",
"markdown-it-highlightjs-external": "^1.0.1",
"markdown-it-images-preview": "^1.0.0",
"markdown-it-ins": "^2.0.0",
"markdown-it-katex-external": "^1.0.0",
"markdown-it-mark": "^2.0.0",
"markdown-it-sub": "^1.0.0",
"markdown-it-sup": "^1.0.0",
"markdown-it-task-lists": "^2.1.1",
"markdown-it-toc": "^1.1.0",
"merges-utils": "^1.0.2",
"npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"postcss": "^5.0.10",
"postcss-advanced-variables": "1.2.2",
"postcss-atroot": "^0.1.2",
"postcss-color-function": "^3.0.0",
"postcss-custom-media": "^5.0.0",
"postcss-custom-properties": "^5.0.0",
"postcss-custom-selectors": "^3.0.0",
"postcss-extend": "^1.0.1",
"postcss-loader": "^1.3.3",
"postcss-media-minmax": "^2.1.0",
"postcss-mixins": "^5.4.1",
"postcss-nested": "^1.0.0",
"postcss-nested-import": "^0.1.0",
"postcss-nesting": "^2.0.6",
"postcss-partial-import": "^3.1.1",
"postcss-property-lookup": "^1.1.3",
"postcss-selector-matches": "^2.0.0",
"postcss-selector-not": "^2.0.0",
"raw-loader": "^0.5.1",
"style-loader": "^0.17.0",
"stylus": "^0.54.8",
"stylus-loader": "^2.5.1",
"url-loader": "^0.5.8",
"vue": "^2.3.4",
"vue-jest": "^3.0.7",
"vue-loader": "^13.7.0",
"vue-style-loader": "^3.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.4.1",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-dev-server": "^2.11.5",
"webpack-md5-hash": "^0.0.5"
}
}
================================================
FILE: src/components/md-toolbar-left.vue
================================================
<template>
<div class="v-left-item">
<slot name="left-toolbar-before" />
<button :disabled="!editable" type="button" v-if="toolbars.bold" @click="$clicks('bold')"
class="op-icon fa fa-mavon-bold" aria-hidden="true"
:title="`${d_words.tl_bold} (ctrl+b)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.italic" @click="$clicks('italic')"
class="op-icon fa fa-mavon-italic" aria-hidden="true"
:title="`${d_words.tl_italic} (ctrl+i)`"></button>
<div :class="{'selected': s_header_dropdown_open}" :disabled="!editable" type="button" v-if="toolbars.header" @mouseleave="$mouseleave_header_dropdown" @mouseenter="$mouseenter_header_dropdown"
class="op-icon fa fa-mavon-header dropdown dropdown-wrapper" aria-hidden="true"
:title="`${d_words.tl_header} (ctrl+h)`">
<transition name="fade">
<div class="op-header popup-dropdown" :class="{'transition': transition}" v-show="s_header_dropdown_open" @mouseenter="$mouseenter_header_dropdown" @mouseleave="$mouseleave_header_dropdown">
<div title="#" class="dropdown-item" @click.stop="$click_header('header1')"><span>{{d_words.tl_header_one}}</span></div>
<div title="## " class="dropdown-item" @click.stop="$click_header('header2')"><span>{{d_words.tl_header_two}}</span></div>
<div title="### " class="dropdown-item" @click.stop="$click_header('header3')"><span>{{d_words.tl_header_three}}</span></div>
<div title="#### " class="dropdown-item" @click.stop="$click_header('header4')"><span>{{d_words.tl_header_four}}</span></div>
<div title="##### " class="dropdown-item" @click.stop="$click_header('header5')"><span>{{d_words.tl_header_five}}</span></div>
<div title="###### " class="dropdown-item" @click.stop="$click_header('header6')"><span>{{d_words.tl_header_six}}</span></div>
</div>
</transition>
</div>
<span v-if="toolbars.header || toolbars.italic || toolbars.bold" class="op-icon-divider"></span>
<button :disabled="!editable" type="button" v-if="toolbars.underline" @click="$clicks('underline')"
class="op-icon fa fa-mavon-underline"
:title="`${d_words.tl_underline} (ctrl+u)`" aria-hidden="true"></button>
<button :disabled="!editable" type="button" v-if="toolbars.strikethrough" @click="$clicks('strikethrough')"
class="op-icon fa fa-mavon-strikethrough"
:title="`${d_words.tl_strikethrough} (ctrl+shift+d)`" aria-hidden="true"></button>
<button :disabled="!editable" type="button" v-if="toolbars.mark" @click="$clicks('mark')"
class="op-icon fa fa-mavon-thumb-tack" :title="`${d_words.tl_mark} (ctrl+m)`"
aria-hidden="true"></button>
<button :disabled="!editable" type="button" v-if="toolbars.superscript" @click="$clicks('superscript')"
class="op-icon fa fa-mavon-superscript"
aria-hidden="true" :title="`${d_words.tl_superscript} (ctrl+alt+s)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.subscript" @click="$clicks('subscript')"
class="op-icon fa fa-mavon-subscript"
aria-hidden="true" :title="`${d_words.tl_subscript} (ctrl+shift+s)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.alignleft" @click="$clicks('alignleft')"
class="op-icon fa fa-mavon-align-left"
aria-hidden="true" :title="`${d_words.tl_alignleft} (ctrl+l)`">
</button>
<button :disabled="!editable" type="button" v-if="toolbars.aligncenter" @click="$clicks('aligncenter')"
class="op-icon fa fa-mavon-align-center"
aria-hidden="true" :title="`${d_words.tl_aligncenter} (ctrl+e)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.alignright" @click="$clicks('alignright')"
class="op-icon fa fa-mavon-align-right"
aria-hidden="true" :title="`${d_words.tl_alignright} (ctrl+r)`"></button>
<span
v-if="toolbars.superscript || toolbars.subscript || toolbars.underline || toolbars.strikethrough || toolbars.mark"
class="op-icon-divider"></span>
<button :disabled="!editable" type="button" v-if="toolbars.quote" @click="$clicks('quote')"
class="op-icon fa fa-mavon-quote-left" aria-hidden="true"
:title="`${d_words.tl_quote} (ctrl+q)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.ol" @click="$clicks('ol')"
class="op-icon fa fa-mavon-list-ol" aria-hidden="true"
:title="`${d_words.tl_ol} (ctrl+o)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.ul" @click="$clicks('ul')"
class="op-icon fa fa-mavon-list-ul" aria-hidden="true"
:title="`${d_words.tl_ul} (ctrl+alt+u)`"></button>
<span v-if="toolbars.ul || toolbars.ol || toolbars.quote" class="op-icon-divider"></span>
<button :disabled="!editable" type="button" v-if="toolbars.link" @click.stop="$toggle_imgLinkAdd('link')"
class="op-icon fa fa-mavon-link" aria-hidden="true"
:title="`${d_words.tl_link} (ctrl+l)`"></button>
<div :disabled="!editable" :class="{'selected': s_img_dropdown_open}" type="button" v-if="toolbars.imagelink" @mouseleave="$mouseleave_img_dropdown" @mouseenter="$mouseenter_img_dropdown"
class="op-icon fa fa-mavon-picture-o dropdown dropdown-wrapper"
aria-hidden="true">
<transition name="fade">
<div class="op-image popup-dropdown" :class="{'transition': transition}" v-show="s_img_dropdown_open" @mouseleave="$mouseleave_img_dropdown" @mouseenter="$mouseenter_img_dropdown">
<div class="dropdown-item" @click.stop="$toggle_imgLinkAdd('imagelink')"><span>{{d_words.tl_image}}</span></div>
<div class="dropdown-item" style="overflow: hidden">
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="$imgAdd($event)" multiple="multiple"/>{{d_words.tl_upload}}
</div>
<div
v-for="(item, index) in img_file"
v-if="item && item[1]"
class="dropdown-item dropdown-images"
:title="item[1].name"
:key="index"
@click.stop="$imgFileListClick(index)"
>
<span>{{item[1].name}}</span>
<button slot="right" type="button" @click.stop="$imgDel(index)"
class="op-icon fa fa-mavon-times" aria-hidden="true"
:title="d_words.tl_upload_remove"></button>
<!-- 缩略图展示 -->
<img class = "image-show" :class="{'transition': transition}" :src="item[1].miniurl" alt="none">
</div>
</div>
</transition>
</div>
<button :disabled="!editable" type="button" v-if="toolbars.code" @click="$clicks('code')"
class="op-icon fa fa-mavon-code" aria-hidden="true"
:title="`${d_words.tl_code} (ctrl+alt+c)`"></button>
<button :disabled="!editable" type="button" v-if="toolbars.table" @click="$clicks('table')"
class="op-icon fa fa-mavon-table" aria-hidden="true"
:title="`${d_words.tl_table} (ctrl+alt+t)`"></button>
<span v-if="toolbars.link || toolbars.imagelink || toolbars.code || toolbars.table"
class="op-icon-divider"></span>
<button type="button" v-if="toolbars.undo" @click="$clicks('undo')" class="op-icon fa fa-mavon-undo"
aria-hidden="true" :title="`${d_words.tl_undo} (ctrl+z)`"></button>
<button type="button" v-if="toolbars.redo" @click="$clicks('redo')" class="op-icon fa fa-mavon-repeat"
aria-hidden="true"
:title="`${d_words.tl_redo} (ctrl+y)`"></button>
<button type="button" v-if="toolbars.trash" @click="$clicks('trash')" class="op-icon fa fa-mavon-trash-o"
aria-hidden="true"
:title="`${d_words.tl_trash} (ctrl+breakspace)`"></button>
<button type="button" v-if="toolbars.save" @click="$clicks('save')" class="op-icon fa fa-mavon-floppy-o"
aria-hidden="true"
:title="`${d_words.tl_save} (ctrl+s)`"></button>
<slot name="left-toolbar-after" />
<!-- 添加image链接 -->
<transition name="fade">
<div class="add-image-link-wrapper" v-if="s_img_link_open">
<div class="add-image-link">
<i @click.stop.prevent="s_img_link_open = false" class="fa fa-mavon-times"
aria-hidden="true"></i>
<h3 class="title">{{link_type == 'link' ? d_words.tl_popup_link_title : d_words.tl_popup_img_link_title}}</h3>
<div class="link-text input-wrapper">
<input ref="linkTextInput" type="text" v-model="link_text" :placeholder="link_type == 'link' ? d_words.tl_popup_link_text : d_words.tl_popup_img_link_text">
</div>
<div class="link-addr input-wrapper">
<input type="text" v-model="link_addr" :placeholder="link_type == 'link' ? d_words.tl_popup_link_addr : d_words.tl_popup_img_link_addr">
</div>
<div class="op-btn cancel" @click.stop="s_img_link_open = false">{{d_words.tl_popup_link_cancel}}</div>
<div class="op-btn sure" @click.stop="$imgLinkAdd()">{{d_words.tl_popup_link_sure}}</div>
</div>
</div>
</transition>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 's-md-toolbar-left',
props: {
editable: { // 是否开启编辑
type: Boolean,
default: true
},
transition: { // TODO: 是否开启动画过渡
type: Boolean,
default: true
},
toolbars: { // 工具栏
type: Object,
required: true
},
d_words: {
type: Object,
required: true
},
image_filter: {
type: Function,
default: null
}
},
data() {
return {
// [index, file]
img_file: [[0, null]],
img_timer: null,
header_timer: null,
s_img_dropdown_open: false,
s_header_dropdown_open: false,
s_img_link_open: false,
trigger: null,
num: 0,
link_text: '',
link_addr: '',
link_type: 'link'
}
},
methods: {
$imgLinkAdd() {
this.$emit('toolbar_left_addlink', this.link_type, this.link_text, this.link_addr);
this.s_img_link_open = false;
},
$toggle_imgLinkAdd(type) {
this.link_type = type;
this.link_text = this.link_addr = '';
this.s_img_link_open = true;
this.$nextTick(() => {
this.$refs.linkTextInput.focus()
})
this.s_img_dropdown_open = false;
},
$imgFileListClick(pos) {
this.$emit('imgTouch', this.img_file[pos]);
},
$changeUrl(index,url) {
this.img_file[index][0] = url;
},
$imgFileAdd($file) {
// this.img_file[0][0] = this.num;
// this.img_file[0][1] = $file;
// this.img_file.unshift([(this.num + 1), null]);
// this.num = this.num + 1;
this.img_file.push([++this.num, $file])
this.$emit('imgAdd', this.num, $file);
this.s_img_dropdown_open = false;
},
$imgFilesAdd($files) {
// valid means if the image_filter exist.
let valid = (typeof this.image_filter === 'function');
for (let i = 0; i < $files.length; i++) {
if (valid && this.image_filter($files[i]) === true) {
this.$imgFileAdd($files[i]);
} else if (!valid && $files[i].type.match(/^image\//i)) {
this.$imgFileAdd($files[i]);
}
}
},
$imgAdd($e) {
this.$imgFilesAdd($e.target.files);
$e.target.value = ''; // 初始化
},
$imgDel(pos) {
this.$emit('imgDel', this.img_file[pos]);
this.img_file.splice(pos, 1);
this.num--;
this.s_img_dropdown_open = false;
},
isEqualName(filename, pos) {
if (this.img_file[pos][1]) {
if (this.img_file[pos][1].name === filename || this.img_file[pos][1]._name === filename) {
return true
}
}
return false
},
$imgDelByFilename(filename) {
var pos = 0;
while (this.img_file.length > pos) {
if (this.img_file[pos][1] === filename || this.isEqualName(filename, pos)) {
this.$imgDel(pos);
return true;
}
pos += 1;
}
return false;
},
$imgAddByFilename(filename, $file) {
for (var i = 0; i < this.img_file.length; i++)
{ if (this.img_file[i][0] === filename) return false; }
this.img_file[0][0] = filename;
this.img_file[0][1] = $file;
this.img_file[0][2] = filename;
this.img_file.unshift(['./' + (this.num), null])
this.$emit('imgAdd', this.img_file[1][0], $file, false);
return true;
},
$imgAddByUrl(filename, $url) {
for (var i = 0; i < this.img_file.length; i++)
{ if (this.img_file[i][0] === filename) return false; }
this.img_file[0][0] = filename;
this.img_file[0][1] = $url;
this.img_file.unshift(['./' + (this.num), null])
return true;
},
$imgUpdateByFilename(filename, $file) {
for (var i = 0; i < this.img_file.length; i++) {
if (this.img_file[i][0] === filename || this.isEqualName(filename, i)) {
this.img_file[i][1] = $file;
this.$emit('imgAdd', filename, $file, false);
return true;
}
}
return false;
},
// 工具栏功能图标click-----------------
$mouseenter_img_dropdown() {
if (this.editable) {
clearTimeout(this.img_timer)
this.s_img_dropdown_open = true
}
},
$mouseleave_img_dropdown() {
let vm = this
this.img_timer = setTimeout(function() {
vm.s_img_dropdown_open = false
},200)
},
$mouseenter_header_dropdown() {
if (this.editable) {
clearTimeout(this.header_timer)
this.s_header_dropdown_open = true
}
},
$mouseleave_header_dropdown() {
let vm = this
this.header_timer = setTimeout(function() {
vm.s_header_dropdown_open = false
},200)
},
$clicks(_type) {
// 让父节点来绑定事件并
if (this.editable) {
this.$emit('toolbar_left_click', _type);
}
},
$click_header(_type) {
// 让父节点来绑定事件并
this.$emit('toolbar_left_click', _type);
this.s_header_dropdown_open = false
},
handleClose(e) {
this.s_img_dropdown_open = false;
}
},
watch:{
s_img_link_open(newVlaue) {
// fix issue #644
this.$parent.$el.style.zIndex = newVlaue ? 1501 : 1500;
}
}
}
</script>
<style lang="stylus" scoped>
.op-icon.dropdown-wrapper.dropdown
position relative
&[type=button]
-webkit-appearance unset
.popup-dropdown
position absolute
display block
background #fff
top 32px
left -45px
min-width 130px
z-index 1600
border 1px solid #ebeef5
border-radius 4px
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
.dropdown-item:first-child
border-top-left-radius 3px
border-top-right-radius 3px
.dropdown-item:last-child
border-bottom-left-radius 3px
border-bottom-right-radius 3px
&.op-header
left -30px
min-width 90px
&.fade-enter-active, &.fade-leave-active
opacity 1
&.fade-enter, &.fade-leave-active
opacity 0
&.transition
&, .dropdown-item
transition all 0.2s linear 0s
.dropdown-item
height 40px
line-height @height
font-size 14px
color #606266
position relative
&:hover
color #303133
background-color #e9e9eb
input
position absolute
font-size 100px
right 0
top 0
opacity 0
cursor pointer
.dropdown-images
box-sizing border-box
button
position absolute
top -1px
right 5px
font-size: 14px
&:hover
color #F56C6C
background-color: transparent
span
display inline-block
width 80px
white-space nowrap
overflow hidden
text-overflow ellipsis
&:hover
.image-show
display block !important
.image-show
display none
position absolute
left -128px
top 0
width 120px
height 90px
object-fit contain
border 1px solid #F2F6FC
&.transition
transition all 0.2s linear 0s
&.transition
transition all 0.2s linear 0s
.add-image-link-wrapper
position fixed
left 0
right 0
top 0
bottom 0
background rgba(0, 0, 0, 0.7)
z-index 1600
transition all 0.1s linear 0s
&.fade-enter-active, &.fade-leave-active
opacity 1
&.fade-enter, &.fade-leave-active
opacity 0
.add-image-link
position fixed
box-sizing border-box
text-align center
width 24%
left 38%
@media only screen and (max-width 1500px)
width 34%
left 33%
@media only screen and (max-width 1000px)
width 50%
left 25%
@media only screen and (max-width 600px)
width 80%
left 10%
height auto
padding 40px
top 25%
transition all 0.1s linear 0s
z-index 3
background #fff
border-radius 2px
i
font-size 24px
position absolute
right 8px
top 6px
color rgba(0, 0, 0, 0.7)
cursor pointer
.title
font-size 20px
margin-bottom 30px
margin-top 10px
font-weight 500 !important
.input-wrapper
margin-top 10px
width 80%
border 1px solid #eeece8
text-align left
margin-left 10%
height 35px
input
height 32px
line-height 32px
font-size 15px
width 90%
margin-left 8px
border none
outline none
.op-btn
width 100px
height 35px
display inline-block
margin-top 30px
cursor pointer
text-align center
line-height @height
opacity 0.9
border-radius 2px
letter-spacing 1px
font-size 15px
.op-btn.sure
background #2185d0
color #fff
margin-left 5%
&:hover
opacity 1
.op-btn.cancel
border 1px solid #bcbcbc
color #bcbcbc
&:hover
color #000
</style>
================================================
FILE: src/components/md-toolbar-right.vue
================================================
<template>
<div class="v-right-item">
<slot name="right-toolbar-before" />
<button type="button" v-if="toolbars.navigation" @click="$clicks('navigation')" v-show="!s_navigation"
class="op-icon fa fa-mavon-bars"
aria-hidden="true" :title="`${d_words.tl_navigation_on} (F8)`"></button>
<button type="button" v-if="toolbars.navigation" @click="$clicks('navigation')" v-show="s_navigation"
class="op-icon fa fa-mavon-bars selected"
aria-hidden="true" :title="`${d_words.tl_navigation_off} (F8)`"></button>
<button type="button" v-if="toolbars.preview" @click="$clicks('preview')" v-show="s_preview_switch"
class="op-icon fa fa-mavon-eye-slash selected"
aria-hidden="true" :title="`${d_words.tl_edit} (F9)`"></button>
<button type="button" v-if="toolbars.preview" @click="$clicks('preview')" v-show="!s_preview_switch"
class="op-icon fa fa-mavon-eye"
aria-hidden="true" :title="`${d_words.tl_preview} (F9)`"></button>
<button type="button" v-if="toolbars.fullscreen" @click="$clicks('fullscreen')" v-show="!s_fullScreen"
class="op-icon fa fa-mavon-arrows-alt"
:title="`${d_words.tl_fullscreen_on} (F10)`" aria-hidden="true"></button>
<button type="button" v-if="toolbars.fullscreen" @click="$clicks('fullscreen')" v-show="s_fullScreen"
class="op-icon fa fa-mavon-compress selected"
:title="`${d_words.tl_fullscreen_off} (F10)`" aria-hidden="true"></button>
<button type="button" v-if="toolbars.readmodel" @click="$clicks('read')" class="op-icon fa fa-mavon-window-maximize" aria-hidden="true"
:title="`${d_words.tl_read} (F11)`"></button>
<button type="button" v-if="toolbars.subfield" @click="$clicks('subfield')" class="op-icon fa fa-mavon-columns" aria-hidden="true"
:class = "{'selected': s_subfield}" :title="`${s_subfield ? d_words.tl_single_column : d_words.tl_double_column} (F12)`"></button>
<span
v-if=" toolbars.help && toolbars.htmlcode && toolbars.readmodel && toolbars.fullscreen && toolbars.subfield && toolbars.navigation"
class="op-icon-divider"></span>
<button type="button" v-if="toolbars.htmlcode" @click="$clicks('html')" v-show="!s_html_code" class="op-icon fa fa-mavon-code"
:title="d_words.tl_html_on"
aria-hidden="true"></button>
<button type="button" v-if="toolbars.htmlcode" @click="$clicks('html')" v-show="s_html_code"
class="op-icon fa fa-mavon-code selected"
:title="d_words.tl_html_off" aria-hidden="true"></button>
<button type="button" v-if="toolbars.help" @click="$clicks('help')" class="op-icon fa fa-mavon-question-circle"
style="font-size: 17px;padding: 5px 6px 5px 3px"
:title="d_words.tl_help" aria-hidden="true"></button>
<slot name="right-toolbar-after" />
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 's-md-toolbar-right',
props: {
// 工具栏
s_subfield: {
type: Boolean ,
required: true
},
toolbars: { type: Object, required: true },
s_preview_switch: { type: Boolean, required: true },
s_fullScreen: { type: Boolean, required: true },
s_html_code: { type: Boolean, required: true },
s_navigation: { type: Boolean, required: true },
d_words: {
type: Object,
required: true
}
},
methods: {
// 工具栏功能图标click-----------------
$clicks(_type) {
// 让父节点来绑定事件并
this.$emit('toolbar_right_click', _type);
}
}
}
</script>
================================================
FILE: src/dev/app.vue
================================================
<template>
<div id="app">
<select @change="opchange" class="page-lang">
<option value="zh-CN">简体中文</option>
<option value="zh-TW">正體中文</option>
<option value="en">English</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="ja">日本語 </option>
<option value="pt-BR">Português</option>
<option value="ru">Русский</option>
</select>
<section class="page-header">
<h1 class="project-name">mavonEditor</h1>
<h3 class="project-tagline">{{d_words.sub_title}}</h3>
<a href="https://github.com/hinesboy/mavonEditor" class="btn">View on GitHub</a>
<a href="https://github.com/hinesboy/mavonEditor/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/hinesboy/mavonEditor/master" class="btn">Download .tar.gz</a>
</section>
<div v-if="!screen_phone" class="item">
<h2 class="item-header">
{{d_words.default_setting}}
</h2>
<div class="item-button">
<button @click="clearCache">clear cache</button>
<button @click="uploadimg">upload</button>
<button @click="imgreplace">imgreplace</button>
<input type="text" v-model="imgName" />
<button @click="imgdelete">delete</button>
<div class="switch-code-style">
<span>code style:</span>
<select v-model="codeStyle">
<option v-for="(val, key) in styles" :value="key">{{ key }}</option>
</select>
</div>
</div>
<mavon-editor ref=md :subfield="subfield" :toolbarsFlag="toolbarsFlag" :editable="editable"
:language="d_language" @change="change" @save="saveone" :ishljs="true" class="item-editor" v-model="help1"
:autofocus="autofocus"
:shortCut="true"
:externalLink="external_link"
@imgAdd="$imgAdd" @imgDel="$imgDel" @subfieldtoggle="$subfieldtoggle" @previewtoggle="$previewtoggle"
:imageFilter="image_filter"
:boxShadow="true"
:scrollStyle="true"
:transition="true"
:codeStyle="codeStyle"
box-shadow-style="0 2px 12px 0 rgba(0, 0, 0, 0.1)"
toolbars-background="#ffffff"
preview-background="#fbfbfb">
<!-- <template slot="left-toolbar-before">
左工具栏前
</template>
<template slot="left-toolbar-after">
左工具栏后
</template>
<template slot="right-toolbar-before">
右工具栏前
</template>
<template slot="right-toolbar-after">
右工具栏后
</template> -->
</mavon-editor>
<button ref="diy" type="button" @click="$click('selftest')" class="op-icon fa fa-mavon-align-left"
aria-hidden="true" title="自定义"></button>
</div>
<!--自定义-->
<div v-if="screen_phone" class="item">
<h2 class="item-header">
{{d_words.customize_setting}}
</h2>
<mavon-editor :language="d_language" @save="savetwo" :toolbars="toolbars" class="item-editor"
v-model="help2"></mavon-editor>
</div>
<div class="item">
<span style="display: block;margin: 30px 0 15px 0;color: #1e6bb8" class="">
{{d_words.mark}}
</span>
</div>
<div class="item">
<h2 class="item-header">
{{d_words.detail}}<a href="https://github.com/hinesboy/mavonEditor">GitHub</a>
</h2>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import styles from '../lib/core/hljs/lang.hljs.css.js'
import {CONFIG} from '../lib/config.js'
export default {
name: 'app',
data () {
return {
d_language: 'zh-CN',
help1: '',
help2: '',
d_words: {},
screen_phone: false,
toolbars: {
underline: true, // 下划线
strikethrough: true, // 中划线
alignCenter: true, // 中划线
undo: true,
save: true,
fullscreen: true, // 全屏编辑
navigation: true,
preview: true,
subfield: false
},
autofocus: true,
subfield: true,
editable: true,
toolbarsFlag: true,
img_file: {},
external_link: {
markdown_css: function() {
return '/markdown/github-markdown.min.css';
},
hljs_js: function() {
return '/highlightjs/highlight.min.js';
},
hljs_css: function(css) {
return '/highlightjs/styles/' + css + '.min.css';
},
hljs_lang: function(lang) {
return '/highlightjs/languages/' + lang + '.min.js';
},
katex_css: function() {
return '/katex/katex.min.css';
},
katex_js: function() {
return '/katex/katex.min.js';
}
},
toolbar_settings: {
undo: true, // 上一步
redo: true, // 下一步
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
code: true, // code
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
/* 1.4.2 */
navigation: true // 导航目录
},
image_filter: function($files) {
console.log('image_filter files:', $files);
// console.log('here for you', $files);
return true;
},
imageClick: function (file) {
console.log(file);
},
imgName: '',
codeStyle: "github",
styles
}
},
created () {
var $vm = this;
this.initLanguage();
this.sizeToStatus()
window.addEventListener('resize', function() {
// 媒介查询
$vm.sizeToStatus()
})
},
mounted() {
var md = this.$refs.md;
var toolbar_left = md.$refs.toolbar_left;
var diy = this.$refs.diy;
toolbar_left.$el.append(diy)
// toolbar_left.$el.append(diy.$el)
// console.log(toolbar_left)
},
methods: {
clearCache() {
this.$refs.md.$emptyHistory()
},
$click(val) {
console.log(val);
},
imgreplace($e) {
console.log('here');
this.$refs.md.$imglst2Url([
[0, 'https://raw.githubusercontent.com/hinesboy/mavonEditor/master/img/cn/cn-common.png'],
[1, 'https://raw.githubusercontent.com/hinesboy/mavonEditor/master/img/cn/cn-common.png']
]);
},
uploadimg($e) {
console.log(this.img_file);
for (var _img in this.img_file) {
this.$refs.md.$img2Url(_img, 'https://raw.githubusercontent.com/hinesboy/mavonEditor/master/img/cn/cn-common.png')
}
/* var formdata = new FormData();
for (var _img in this.img_file) {
formdata.append(_img, this.img_file[_img]);
// _imglst.push([_img, this.img_file[_img]]);
}
axios({
url: 'http://127.0.0.1/index.php',
method: 'post',
data: formdata,
headers: {'Content-Type': 'multipart/form-data'},
}).then((res) => {
console.log(res);
}) */
},
$imgAdd(pos, $file) {
console.log('imgAdd', pos, $file);
this.img_file[pos] = $file;
// console.log(this.$refs.md.$refs.toolbar_left.$imgDelByFilename(pos));
// console.log(this.$refs.md.$refs.toolbar_left.$imgAddByFilename('./test', $file))
// console.log(this.$refs.md.$refs.toolbar_left.$imgUpdateByFilename('./test', $file))
// console.log(this.$refs.md.$refs.toolbar_left.$imgAddByFilename('./test', $file))
// console.log(this.$refs.md);
// this.$refs.md.$imgUpdateByUrl(pos, 'http://pic.58pic.com/58pic/13/46/50/61758PICWZY_1024.jpg');
},
$imgDel(pos) {
console.log('imgDel', pos);
delete this.img_file[pos];
},
sizeToStatus () {
if (window.matchMedia('(min-width:768px)').matches) {
// > 768
this.screen_phone = false
} else {
// < 768
this.screen_phone = true
}
},
saveone (val, render) {
alert('save one')
},
savetwo (val, render) {
alert('save two')
},
change (val, render) {
console.log(val)
},
opchange (event) {
this.d_language = event.target.value;
},
initLanguage() {
this.d_words = CONFIG[`words_${this.d_language}`]
this.help1 = CONFIG[`help_${this.d_language}`]
this.help2 = CONFIG[`help_${this.d_language}`]
},
$subfieldtoggle(flag , value) {
console.log('sufield toggle' + flag)
},
$previewtoggle(flag , value) {
console.log('preview toggle' + flag)
},
imgdelete() {
var md = this.$refs.md;
var toolbar_left = md.$refs.toolbar_left;
toolbar_left.$imgDelByFilename(this.imgName);
}
},
watch: {
d_language: function () {
this.initLanguage();
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
body
margin 0
padding 0
padding-bottom 50px
.switch-code-style
display inline
margin-left 8px
.page-lang
position absolute
top 15px
right 2%
.page-header
box-sizing border-box
padding 90px 15px
width 100%
height 380px
color #fff
text-align center
background-color #159957
background-image linear-gradient(120deg, #155799, #159957)
@media only screen and (max-width 958px)
height 300px
padding 60px 15px
@media only screen and (max-width 768px)
height 370px
padding 50px 15px
.project-name
margin-top 0
margin-bottom 0.1rem
font-size 2.25rem
@media only screen and (max-width 768px)
font-size 25px
.project-tagline
margin-bottom 2rem
font-weight normal
opacity 0.7
@media only screen and (max-width 768px)
font-size 16px
.btn
padding: 0.6rem 0.9rem
font-size: 0.9rem
display: inline-block
margin-bottom: 1rem
color: rgba(255, 255, 255, 0.7)
background-color: rgba(255, 255, 255, 0.08)
border-color: rgba(255, 255, 255, 0.2)
border-style: solid
border-width: 1px
border-radius: 0.3rem
transition: color 0.2s, background-color 0.2s, border-color 0.2s
text-decoration: none
margin-left 20px
box-sizing border-box
&:hover
color: rgba(255, 255, 255, 0.8)
text-decoration: none
background-color: rgba(255, 255, 255, 0.2)
border-color: rgba(255, 255, 255, 0.3)
@media only screen and (max-width 768px)
display: block
width: 90%
padding: 0.75rem
font-size: 0.9rem
margin-left 5%
.item
width 75%
margin-left 12.5%
@media only screen and (max-width 1100px)
width 85%
margin-left 7.5%
@media only screen and (max-width 768px)
width 92%
margin-left 4%
.item-header
margin-top: 3.5rem
margin-bottom: 2rem
font-weight: normal
color: #159957
@media only screen and (max-width 768px)
margin-top: 2rem
margin-bottom: 1rem
.item-button
margin-bottom: 4rem
.item-editor
width 100%
height 700px
@media only screen and (max-width 1600px)
height 550px
</style>
================================================
FILE: src/dev/assets/config.js
================================================
/**
* Created by zhy on 2017/5/11.
*/
import help_zh_CN from './lang/zh-CN/help_zh-CN.md'
import help_zh_TW from './lang/zh-TW/help_zh-TW.md'
import help_en from './lang/en/help_en.md'
import help_fr from './lang/fr/help_fr.md'
import help_pt_BR from './lang/pt-BR/help_pt-BR.md'
import help_ru from './lang/ru/help_ru.md'
import help_de from './lang/de/help_de.md'
import words_zh_CN from './lang/zh-CN/words_zh-CN.json'
import words_zh_TW from './lang/zh-TW/words_zh-TW.json'
import words_en from './lang/en/words_en.json'
import words_fr from './lang/fr/words_fr.json'
import words_pt_BR from './lang/pt-BR/words_pt-BR.json'
import words_ru from './lang/ru/words_ru.json'
import words_de from './lang/de/words_de.json'
export const CONFIG = {
'help_zh-CN': help_zh_CN,
'help_zh-TW': help_zh_TW,
'help_pt-BR': help_pt_BR,
'help_en': help_en,
'help_fr': help_fr,
'help_ru': help_ru,
'help_de': help_de,
'words_zh-CN': words_zh_CN,
'words_zh-TW': words_zh_TW,
'words_pt-BR': words_pt_BR,
'words_en': words_en,
'words_fr': words_fr,
'words_ru': words_ru,
'words_de': words_de
}
================================================
FILE: src/dev/assets/lang/de/help_de.md
================================================
@[toc](Catalog)
Markdown Handbuch
===
> Details: [http://commonmark.org/help/](http://commonmark.org/help/)
## **Fett**
```
**fett**
__fett__
```
## *Kursiv*
```
*kursiv*
_kursiv_
```
## Überschriften
```
# h1 #
h1
====
## h2 ##
h2
----
### h3 ###
#### h4 ####
##### h5 #####
###### h6 ######
```
## Trennlinien
```
***
---
```
****
## ^Hoch^gestellt & ~Tief~gestellt
```
hochgestellt x^2^
tiefgestellt H~2~0
```
## ++Unterstrichen++ & ~~Durchgestrichen~~
```
++unterstrichen++
~~durchgestrichen~~
```
## ==Markiert==
```
==markiert==
```
## Zitat
```
> zitat 1
>> zitat 2
>>> zitat 3
...
```
## Liste
```
ol
1.
2.
3.
...
ul
-
-
...
```
## Todo Liste
- [x] aufgabe 1
- [ ] aufgabe 2
```
- [x] aufgabe 1
- [ ] aufgabe 2
```
## Link
```
Text Link
[Text](www.baidu.com)
Link mit Bild
```
## Code
\``` Typ
Codeblock
\```
\` code \`
```c++
int main()
{
printf("hello world!");
}
```
`code`
## Tabelle
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| links | mitte | rechts |
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| links | mitte | rechts |
| ---------------------- | ------------- | ----------------- |
## Fußnote
```
hallo[^hallo]
```
Schau zum unteren Rand[^hallo]
[^hallo]: fussnote
## Emojis
Details: [https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$ Mathematik
Formeln lassen sich darstellen z.b. ：$x_i + y_i = z_i$ und $\sum_{i=1}^n a_i=0$
Formeln können auf einer eigenen Zeile gerendert werden
$$\sum_{i=1}^n a_i=0$$
Details: [katex](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex function](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## Layout
::: hljs-left
`::: hljs-left`
`links`
`:::`
:::
::: hljs-center
`::: hljs-center`
`mitte`
`:::`
:::
::: hljs-right
`::: hljs-right`
`rechts`
`:::`
:::
## Liste von Definitionen
Term 1
: Definition 1
Term 2 mit *inline markup*
: Definition 2
{ ein wenig code, teil von Definition 2 }
Dritter Absatz von Definition 2.
```
Term 1
: Definition 1
Term 2 mit *inline markup*
: Definition 2
{ ein wenig code, teil von Definition 2 }
Dritter Absatz von Definition 2.
```
## Abkürzungen
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
Die HTML Spezifikation
wird gepflegt vom W3C.
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
Die HTML Spezifikation
wird gepflegt vom W3C.
```
================================================
FILE: src/dev/assets/lang/de/words_de.json
================================================
{
"start_editor": "Bearbeitung beginnen...",
"navigation_title": "Navigation",
"tl_bold": "Fett",
"tl_italic": "Kursiv",
"tl_header": "Überschrift",
"tl_header_one": "Überschrift 1",
"tl_header_two": "Überschrift 2",
"tl_header_three": "Überschrift 3",
"tl_header_four": "Überschrift 4",
"tl_header_five": "Überschrift 5",
"tl_header_six": "Überschrift 6",
"tl_underline": "Unterstrichen",
"tl_strikethrough": "Durchgestrichen",
"tl_mark": "Markiert",
"tl_superscript": "Hochgestellt",
"tl_subscript": "Tiefgestellt",
"tl_quote": "Zitat",
"tl_ol": "Ol",
"tl_ul": "Ul",
"tl_link": "Link",
"tl_image": "Link mit Bild",
"tl_code": "Code",
"tl_table": "Tabelle",
"tl_undo": "Rückgängig",
"tl_redo": "Wiederherstellen",
"tl_trash": "Mülleimer",
"tl_save": "Speichern",
"tl_navigation_on": "Navigation AN",
"tl_navigation_off": "Navigation AUS",
"tl_preview": "Vorschau",
"tl_aligncenter": "Text zentrieren",
"tl_alignleft": "Nach links ausrichten",
"tl_alignright": "Nach rechts ausrichten",
"tl_edit": "Bearbeiten",
"tl_single_column": "Einspaltig",
"tl_double_column": "Zweispaltig",
"tl_fullscreen_on": "Vollbild AN",
"tl_fullscreen_off": "Vollbild AUS",
"tl_read": "Lesemodus",
"tl_html_on": "HTML AN",
"tl_html_off": "HTML AUS",
"tl_help": "Markdown Handbuch",
"tl_upload": "Bilder-Upload",
"tl_upload_remove": "Entfernen",
"tl_popup_link_title": "Link hinzufügen",
"tl_popup_link_text": "Text des Links",
"tl_popup_link_addr": "Linkziel",
"tl_popup_img_link_title": "Bild hinzufügen",
"tl_popup_img_link_text": "Text des Bildes",
"tl_popup_img_link_addr": "Link auf Bild",
"tl_popup_link_sure": "Ja",
"tl_popup_link_cancel": "Abbruch"
}
================================================
FILE: src/dev/assets/lang/en/help_en.md
================================================
@[toc](Catalog)
Markdown Guide
===
> Detailed: [http://commonmark.org/help/](http://commonmark.org/help/)
## **Bold**
```
**bold**
__bold__
```
## *Italic*
```
*italic*
_italic_
```
## Header
```
# h1 #
h1
====
## h2 ##
h2
----
### h3 ###
#### h4 ####
##### h5 #####
###### h6 ######
```
## Dividing line
```
***
---
```
****
## ^Super^script & ~Sub~script
```
super x^2^
sub H~2~0
```
## ++Underline++ & ~~Strikethrough~~
```
++underline++
~~strikethrough~~
```
## ==Mark==
```
==mark==
```
## Quote
```
> quote 1
>> quote 2
>>> quote 3
...
```
## List
```
ol
1.
2.
3.
...
ul
-
-
...
```
## Todo List
- [x] task 1
- [ ] task 2
```
- [x] task 1
- [ ] task 2
```
## Link
```
Text Link
[Text](www.baidu.com)
Image Link
```
## Code
\``` type
code block
\```
\` code \`
```c++
int main()
{
printf("hello world!");
}
```
`code`
## Table
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| left | center | right |
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| left | center | right |
| ---------------------- | ------------- | ----------------- |
## Footnote
```
hello[^hello]
```
Look at the bottom[^hello]
[^hello]: footnote
## Emojis
Detailed: [https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$ Mathematics
We can render formulas for example：$x_i + y_i = z_i$ and $\sum_{i=1}^n a_i=0$
We can also single-line rendering
$$\sum_{i=1}^n a_i=0$$
Detailed: [katex](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex function](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## Layout
::: hljs-left
`::: hljs-left`
`left`
`:::`
:::
::: hljs-center
`::: hljs-center`
`center`
`:::`
:::
::: hljs-right
`::: hljs-right`
`right`
`:::`
:::
## deflist
Term 1
: Definition 1
Term 2 with *inline markup*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
```
Term 1
: Definition 1
Term 2 with *inline markup*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
```
## abbr
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
================================================
FILE: src/dev/assets/lang/en/words_en.json
================================================
{
"start_editor": "Begin editing...",
"navigation_title": "Navigation",
"tl_bold": "Bold",
"tl_italic": "Italic",
"tl_header": "Header",
"tl_header_one": "Header 1",
"tl_header_two": "Header 2",
"tl_header_three": "Header 3",
"tl_header_four": "Header 4",
"tl_header_five": "Header 5",
"tl_header_six": "Header 6",
"tl_underline": "Underline",
"tl_strikethrough": "Strikethrough",
"tl_mark": "Mark",
"tl_superscript": "Superscript",
"tl_subscript": "Subscript",
"tl_quote": "Quote",
"tl_ol": "Ol",
"tl_ul": "Ul",
"tl_link": "Link",
"tl_image": "Image Link",
"tl_code": "Code",
"tl_table": "Table",
"tl_undo": "Undo",
"tl_redo": "Redo",
"tl_trash": "Trash",
"tl_save": "Save",
"tl_navigation_on": "Navigation ON",
"tl_navigation_off": "Navigation OFF",
"tl_preview": "Preview",
"tl_aligncenter": "Center text",
"tl_alignleft": "Clamp text to the left",
"tl_alignright": "Clamp text to the right",
"tl_edit": "Edit",
"tl_single_column": "Single Column",
"tl_double_column": "Double Columns",
"tl_fullscreen_on": "FullScreen ON",
"tl_fullscreen_off": "FullScreen OFF",
"tl_read": "Read Model",
"tl_html_on": "HTML ON",
"tl_html_off": "HTML OFF",
"tl_help": "Markdown Guide",
"tl_upload": "Upload Images",
"tl_upload_remove": "Remove",
"tl_popup_link_title": "Add Link",
"tl_popup_link_text": "Link text",
"tl_popup_link_addr": "Link address",
"tl_popup_img_link_title": "Add Image",
"tl_popup_img_link_text": "Image Text",
"tl_popup_img_link_addr": "Image Link",
"tl_popup_link_sure": "Sure",
"tl_popup_link_cancel": "Cancel"
}
================================================
FILE: src/dev/assets/lang/fr/help_fr.md
================================================
@[toc](Catalogue)
Guide Markdown
==============
> Détail : [http://commonmark.org/help/](http://commonmark.org/help/)
## **Bold**
```
**bold**
__bold__
```
## *Italic*
```
*italic*
_italic_
```
## Header
```
# h1 #
h1
====
## h2 ##
h2
----
### h3 ###
#### h4 ####
##### h5 #####
###### h6 ######
```
## Dividing line
```
***
---
```
****
## ^Super^script & ~Sub~script
```
super x^2^
sub H~2~0
```
## ++Underline++ & ~~Strikethrough~~
```
++underline++
~~strikethrough~~
```
## ==Mark==
```
==mark==
```
## Quote
```
> quote 1
>> quote 2
>>> quote 3
...
```
## List
```
ol
1.
2.
3.
...
ul
-
-
...
```
## Link
## Todo List
- [x] Équipe 1
- [ ] Équipe 2
```
- [x] Équipe 1
- [ ] Équipe 2
```
```
Text Link
[Text](www.baidu.com)
Image Link
```
## Code
\``` type
code block
\```
\` code \`
```c++
int main()
{
printf("hello world!");
}
```
`code`
## Table
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| left | center | right |
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| left | center | right |
| ---------------------- | ------------- | ----------------- |
## Footnote
```
hello[^hello]
```
Look at the bottom[^hello]
[^hello]: footnote
## Emojis
Detailed: [https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$ Mathematics
We can render formulas for example：$x_i + y_i = z_i$ and $\sum_{i=1}^n a_i=0$
We can also single-line rendering
$$\sum_{i=1}^n a_i=0$$
Detailed: [katex](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex function](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## Layout
::: hljs-left
`::: hljs-left`
`left`
`:::`
:::
::: hljs-center
`::: hljs-center`
`center`
`:::`
:::
::: hljs-right
`::: hljs-right`
`right`
`:::`
:::
## deflist
Term 1
: Definition 1
Term 2 with *inline markup*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
```
Term 1
: Definition 1
Term 2 with *inline markup*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
```
## abbr
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
================================================
FILE: src/dev/assets/lang/fr/words_fr.json
================================================
{
"start_editor": "Début d'édition...",
"navigation_title": "Navigation",
"tl_bold": "Gras",
"tl_italic": "Italique",
"tl_header": "Entête",
"tl_header_one": "Entête 1",
"tl_header_two": "Entête 2",
"tl_header_three": "Entête 3",
"tl_header_four": "Entête 4",
"tl_header_five": "Entête 5",
"tl_header_six": "Entête 6",
"tl_underline": "Souligné",
"tl_strikethrough": "Barré",
"tl_mark": "Mark",
"tl_superscript": "Exposant",
"tl_subscript": "Sous-exposant",
"tl_quote": "Quote",
"tl_ol": "Liste ",
"tl_ul": "Puce",
"tl_link": "Lien",
"tl_image": "Image Lien",
"tl_code": "Code",
"tl_table": "Table",
"tl_undo": "Annuler",
"tl_redo": "Refaire",
"tl_trash": "Supprimer",
"tl_save": "Sauver",
"tl_navigation_on": "Activer la navigation",
"tl_navigation_off": "Désactiver le navigation",
"tl_preview": "Previsualisé",
"tl_aligncenter": "Center le texte",
"tl_alignleft": "Férer le texte à gauche",
"tl_alignright": "Férer le texte à droite",
"tl_preview": "Previsualisé",
"tl_edit": "Editer",
"tl_single_column": "Seule Colonne",
"tl_double_column": "Colonnes Doubles",
"tl_fullscreen_on": "Activer le mode plein écran",
"tl_fullscreen_off": "Désactiver le mode plein écran",
"tl_read": "Lire le modèle",
"tl_html_on": "Activer le mode HTML",
"tl_html_off": "Désactiver le mode HTML",
"tl_help": "Guide Markdown",
"tl_upload": "Télécharger les images",
"tl_upload_remove": "Supprimer",
"tl_popup_link_title": "Ajouter un lien",
"tl_popup_link_text": "Description",
"tl_popup_link_addr": "Link",
"tl_popup_img_link_title": "Ajouter une image",
"tl_popup_img_link_text": "Description",
"tl_popup_img_link_addr": "Link",
"tl_popup_link_sure": "sûr",
"tl_popup_link_cancel": "Annuler"
}
================================================
FILE: src/dev/assets/lang/pt-BR/help_pt-BR.md
================================================
@[toc](Directory)
Guia Markdown
===
> Detalhes: [http://commonmark.org/help/](http://commonmark.org/help/)
## **Negrito**
```
**negrito**
__negrito__
```
## *Itálico*
```
*itálico*
_itálico_
```
## Cabeçalho
```
# h1 #
h1
====
## h2 ##
h2
----
### h3 ###
#### h4 ####
##### h5 #####
###### h6 ######
```
## Linha Divisora
```
***
---
```
****
## ^Sobre^scrito & ~Sub~scrito
```
sobre x^2^
sub H~2~0
```
## ++Sublinhar++ & ~~Tachar~~
```
++sublinhar++
~~tachar~~
```
## ==Marcador==
```
==marcador==
```
## Citação
```
> citação 1
>> citação 2
>>> citação 3
...
```
## Listas
```
lista Numerada
1.
2.
3.
...
lista com marcadores
-
-
...
```
## Todo Listas
- [x] Tarefa 1
- [ ] Tarefa 2
```
- [x] Tarefa 1
- [ ] Tarefa 2
```
## Link
```
Link Texto
[Text](www.baidu.com)
Link Imagem
```
## Código
\``` tipo
bloco de código
\```
\` código \`
```c++
int main()
{
printf("hello world!");
}
```
`code`
## Tabela
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| esquerda | centro | direita |
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| esquerda | centro | direita |
| ---------------------- | ------------- | ----------------- |
## Rodapé
```
olá[^olá]
```
Olhe para baixo[^olá]
[^olá]: rodapé
## Emojis
Detalhes: [https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$ Mathematics
Podemos mostrar fórmulas por exemplo：$x_i + y_i = z_i$ and $\sum_{i=1}^n a_i=0$
Podemos também mostrar em uma única linha:
$$\sum_{i=1}^n a_i=0$$
Detalhes: [katex](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex function](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## Layout
::: hljs-left
`::: hljs-left`
`esquerda`
`:::`
:::
::: hljs-center
`::: hljs-center`
`centro`
`:::`
:::
::: hljs-right
`::: hljs-right`
`direita`
`:::`
:::
## Definições
Termo 1
: Definição 1
Termo 2 com *markup inline*
: Definição 2
{ um pouco de código, parte da Definição 2 }
Terceiro parágrafo da definição 2.
```
Termo 1
: Definição 1
Termo 2 com *markup inline*
: Definição 2
{ um pouco de código, parte da Definição 2 }
Terceiro parágrafo da definição 2.
```
## Abreviações
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
A especificação HTML
é mantida pela W3C.
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
é mantida pela W3C.
```
================================================
FILE: src/dev/assets/lang/pt-BR/words_pt-BR.json
================================================
{
"start_editor": "Começar edição...",
"navigation_title": "Navegação",
"tl_bold": "Negrito",
"tl_italic": "Itálico",
"tl_header": "Cabeçalho",
"tl_header_one": "Cabeçalho 1",
"tl_header_two": "Cabeçalho 2",
"tl_header_three": "Cabeçalho 3",
"tl_header_four": "Cabeçalho 4",
"tl_header_five": "Cabeçalho 5",
"tl_header_six": "Cabeçalho 6",
"tl_underline": "Sublinhar",
"tl_strikethrough": "Tachar",
"tl_mark": "Marcação",
"tl_superscript": "Sobrescrito",
"tl_subscript": "Subscrito",
"tl_quote": "Citação",
"tl_ol": "Lista Numerada",
"tl_ul": "Lista com marcadores",
"tl_link": "Link",
"tl_image": "Link de imagem",
"tl_code": "Código",
"tl_table": "Tabela",
"tl_undo": "Desfazer",
"tl_redo": "Refazer",
"tl_trash": "Lixo",
"tl_save": "Salvar",
"tl_navigation_on": "Mostrar Navegação",
"tl_navigation_off": "Esconder Navegação",
"tl_preview": "Preview",
"tl_aligncenter": "Alinhar no centro",
"tl_alignleft": "Alinhar à esquerda",
"tl_alignright": "Alinhar à direita",
"tl_edit": "Editar",
"tl_single_column": "Coluna Única",
"tl_double_column": "Duas Colunas",
"tl_fullscreen_on": "Ligar Tela Cheia",
"tl_fullscreen_off": "Desligar Tela Cheia",
"tl_read": "Modo de Leitura",
"tl_html_on": "Ligar HTML",
"tl_html_off": "Desligar HTML",
"tl_help": "Guia Markdown",
"tl_upload": "Upload de Imagens",
"tl_upload_remove": "Remover",
"tl_popup_link_title": "Adicionar Link",
"tl_popup_link_text": "Descrição",
"tl_popup_link_addr": "Link",
"tl_popup_img_link_title": "Adicionar fotos",
"tl_popup_img_link_text": "Descrição",
"tl_popup_img_link_addr": "Link",
"tl_popup_link_sure": "Confirmar",
"tl_popup_link_cancel": "Cancelar"
}
================================================
FILE: src/dev/assets/lang/ru/help_ru.md
================================================
@[toc](Catalog)
Markdown помощь
===
> Подробнее: [http://commonmark.org/help/](http://commonmark.org/help/)
## **Полужирный**
```
**Полужирный**
__Полужирный__
```
## *Курсив*
```
*Курсив*
_Курсив_
```
## Заголовок
```
# h1 #
h1
====
## h2 ##
h2
----
### h3 ###
#### h4 ####
##### h5 #####
###### h6 ######
```
## Разделительная линия
```
***
---
```
****
## ^Верхний^индекс & ~Нижний~индекс
```
верхний x^2^
нижний H~2~0
```
## ++Подчеркнутый++ & ~~Зачеркнутый~~
```
++Подчеркнутый++
~~Зачеркнутый~~
```
## ==Отметка==
```
==Отметка==
```
## Цитата
```
> Цитата
>> Цитата 2
>>> Цитата 3
...
```
## Список
```
ol
1.
2.
3.
...
ul
-
-
...
```
## Список задач
- [x] Задача 1
- [ ] Задача 2
```
- [x] Задача 1
- [ ] Задача 2
```
## Ссылка
```
Ссылка
[Текст](www.baidu.com)
Ссылка изображения
```
## Код
\``` type
code block
\```
\` code \`
```c++
int main()
{
printf("hello world!");}
```
`code`
## Таблица
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| left | center | right |
```
| th1 | th2 | th3 |
| :-- | :--: | ----: |
| left | center | right |
| ---------------------- | ------------- | ----------------- |
## Сноска
```
Привет[^Привет]
```
Тут что-то непонятное[^Привет]
[^Привет]: А тут объяснение
## Emojis
Подробнее: [https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$ Mathematics
Можно выводить такие формулы：$x_i + y_i = z_i$ and $\sum_{i=1}^n a_i=0$
А также в одну строку:
$$\sum_{i=1}^n a_i=0$$
Подробнее:
- [katex](http://www.intmath.com/cg5/katex-mathjax-comparison.php)
- [katex function](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)
- [latex](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## Разметка
::: hljs-left
`::: hljs-left`
`left`
`:::`
:::
::: hljs-center
`::: hljs-center`
`center`
`:::`
:::
::: hljs-right
`::: hljs-right`
`right`
`:::`
:::
## Список определений
Термин 1
: Определение 1
Термин 2 с использованием *разметки*
: Определение 2
{ Какой-нибудь код, часть определения 2 }
Третий параграф определения 2.
```
Термин 1
: Определение 1
Термин 2 с использованием *разметки*
: Определение 2
{ Какой-нибудь код, часть определения 2 }
Третий параграф определения 2.
```
## Сокращения
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
================================================
FILE: src/dev/assets/lang/ru/words_ru.json
================================================
{
"start_editor": "Начните редактирование...",
"navigation_title": "Навигация",
"tl_bold": "Полужирный",
"tl_italic": "Курсив",
"tl_header": "Заголовки",
"tl_header_one": "Заголовок 1",
"tl_header_two": "Заголовок 2",
"tl_header_three": "Заголовок 3",
"tl_header_four": "Заголовок 4",
"tl_header_five": "Заголовок 5",
"tl_header_six": "Заголовок 6",
"tl_underline": "Подчеркнутый",
"tl_strikethrough": "Зачеркнутый",
"tl_mark": "Отметка",
"tl_superscript": "Верхний индекс",
"tl_subscript": "Нижний индекс",
"tl_quote": "Цитата",
"tl_ol": "Нумерованный список",
"tl_ul": "Список",
"tl_link": "Ссылка",
"tl_image": "Ссылка изображения",
"tl_code": "Код",
"tl_table": "Таблица",
"tl_undo": "Отменить",
"tl_redo": "Вернуть",
"tl_trash": "Удалить",
"tl_save": "Сохранить",
"tl_navigation_on": "Показать навигацию",
"tl_navigation_off": "Скрыть навигацию",
"tl_preview": "Предпросмотр",
"tl_aligncenter": "Выровнять по центру",
"tl_alignleft": "Выровнять по левому краю",
"tl_alignright": "Выровнять по правому краю",
"tl_edit": "Редактор",
"tl_single_column": "Одно поле",
"tl_double_column": "Два поля",
"tl_fullscreen_on": "Полноэкранный режим",
"tl_fullscreen_off": "Выключить полноэкранный режим",
"tl_read": "Режим чтения",
"tl_html_on": "Показать HTML",
"tl_html_off": "Убрать HTML",
"tl_help": "Markdown помощь",
"tl_upload": "Загрузить изображение",
"tl_upload_remove": "Удалить",
"tl_popup_link_title": "Добавить ссылку",
"tl_popup_link_text": "Текст ссылки",
"tl_popup_link_addr": "Адрес ссылки",
"tl_popup_img_link_title": "Локальное изображение",
"tl_popup_img_link_text": "Текст изображения",
"tl_popup_img_link_addr": "Ссылка изображения",
"tl_popup_link_sure": "Добавить",
"tl_popup_link_cancel": "Отменить"
}
================================================
FILE: src/dev/assets/lang/zh-CN/help_zh-CN.md
================================================
@[toc](目录)
Markdown 语法简介
=============
> [语法详解](http://commonmark.org/help/)
## **粗体**
```
**粗体**
__粗体__
```
## *斜体*
```
*斜体*
_斜体_
```
## 标题
```
# 一级标题 #
一级标题
====
## 二级标题 ##
二级标题
----
### 三级标题 ###
#### 四级标题 ####
##### 五级标题 #####
###### 六级标题 ######
```
## 分割线
```
***
---
```
****
## ^上^角~下~标
```
上角标 x^2^
下角标 H~2~0
```
## ++下划线++ ~~中划线~~
```
++下划线++
~~中划线~~
```
## ==标记==
```
==标记==
```
## 段落引用
```
> 一级
>> 二级
>>> 三级
...
```
## 列表
```
有序列表
1.
2.
3.
...
无序列表
-
-
...
```
## 任务列表
- [x] 已完成任务
- [ ] 未完成任务
```
- [x] 已完成任务
- [ ] 未完成任务
```
## 链接
```
[链接](www.baidu.com)
```
## 代码段落
\``` type
代码段落
\```
\` 代码块 \`
```c++
int main()
{
printf("hello world!");
}
```
`code`
## 表格(table)
```
| 标题1 | 标题2 | 标题3 |
| :-- | :--: | ----: |
| 左对齐 | 居中 | 右对齐 |
| ---------------------- | ------------- | ----------------- |
```
| 标题1 | 标题2 | 标题3 |
| :-- | :--: | ----: |
| 左对齐 | 居中 | 右对齐 |
| ---------------------- | ------------- | ----------------- |
## 脚注(footnote)
```
hello[^hello]
```
见底部脚注[^hello]
[^hello]: 一个注脚
## 表情(emoji)
[参考网站: https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$公式
我们可以渲染公式例如：$x_i + y_i = z_i$和$\sum_{i=1}^n a_i=0$
我们也可以单行渲染
$$\sum_{i=1}^n a_i=0$$
具体可参照[katex文档](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex支持的函数](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex文档](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## 布局
::: hljs-left
`::: hljs-left`
`居左`
`:::`
:::
::: hljs-center
`::: hljs-center`
`居中`
`:::`
:::
::: hljs-right
`::: hljs-right`
`居右`
`:::`
:::
## 定义
术语一
: 定义一
包含有*行内标记*的术语二
: 定义二
{一些定义二的文字或代码}
定义二的第三段
```
术语一
: 定义一
包含有*行内标记*的术语二
: 定义二
{一些定义二的文字或代码}
定义二的第三段
```
## abbr
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
HTML 规范由 W3C 维护
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
HTML 规范由 W3C 维护
```
================================================
FILE: src/dev/assets/lang/zh-CN/words_zh-CN.json
================================================
{
"start_editor": "开始编辑...",
"navigation_title": "导航目录",
"tl_bold": "粗体",
"tl_italic": "斜体",
"tl_header": "标题",
"tl_header_one": "一级标题",
"tl_header_two": "二级标题",
"tl_header_three": "三级标题",
"tl_header_four": "四级标题",
"tl_header_five": "五级标题",
"tl_header_six": "六级标题",
"tl_underline": "下划线",
"tl_strikethrough": "中划线",
"tl_mark": "标记",
"tl_superscript": "上角标",
"tl_subscript": "下角标",
"tl_quote": "段落引用",
"tl_ol": "有序列表",
"tl_ul": "无序列表",
"tl_link": "链接",
"tl_image": "添加图片链接",
"tl_code": "代码块",
"tl_table": "表格",
"tl_undo": "上一步",
"tl_redo": "下一步",
"tl_trash": "清空",
"tl_save": "保存",
"tl_navigation_on": "开启标题导航",
"tl_navigation_off": "关闭标题导航",
"tl_preview": "预览",
"tl_aligncenter": "居中",
"tl_alignleft": "居左",
"tl_alignright": "居右",
"tl_edit": "编辑",
"tl_single_column": "单栏",
"tl_double_column": "双栏",
"tl_fullscreen_on": "全屏编辑",
"tl_fullscreen_off": "退出全屏",
"tl_read": "沉浸式阅读",
"tl_html_on": "查看html文本",
"tl_html_off": "返回markdown文本",
"tl_help": "markdown语法帮助",
"tl_upload": "上传图片",
"tl_upload_remove": "删除",
"tl_popup_link_title": "添加链接",
"tl_popup_link_text": "链接描述",
"tl_popup_link_addr": "链接地址",
"tl_popup_img_link_title": "添加图片",
"tl_popup_img_link_text": "图片描述",
"tl_popup_img_link_addr": "图片链接",
"tl_popup_link_sure": "确定",
"tl_popup_link_cancel": "取消"
}
================================================
FILE: src/dev/assets/lang/zh-TW/help_zh-TW.md
================================================
@[toc](目錄)
Markdown 語法簡介
=============
> [語法詳解](http://commonmark.org/help/)
## **粗體**
```
**粗體**
__粗體__
```
## *斜體*
```
*斜體*
_斜體_
```
## 標題
```
# 一級標題 #
一級標題
====
## 二級標題 ##
二級標題
----
### 三級標題 ###
#### 四級標題 ####
##### 五級標題 #####
###### 六級標題 ######
```
## 分割線
```
***
---
```
****
## ^上^角~下~標
```
上角標 x^2^
下角標 H~2~0
```
## ++下劃線++ ~~中劃線~~
```
++下劃線++
~~中劃線~~
```
## ==標記==
```
==標記==
```
## 段落引用
```
> 一級
>> 二級
>>> 三級
...
```
## 列表
```
有序列表
1.
2.
3.
...
無序列表
-
-
...
```
## 任務列表
- [x] 已完成任務
- [ ] 未完成任務
```
- [x] 已完成任務
- [ ] 未完成任務
```
## 鏈接
```
[鏈接](www.baidu.com)
```
## 代碼段落
\``` type
代碼段落
\```
\` 代碼塊 \`
```c++
int main()
{
printf("hello world!");
}
```
`code`
## 表格(table)
```
| 標題1 | 標題2 | 標題3 |
| :-- | :--: | ----: |
| 左對齊 | 居中 | 右對齊 |
| ---------------------- | ------------- | ----------------- |
```
| 標題1 | 標題2 | 標題3 |
| :-- | :--: | ----: |
| 左對齊 | 居中 | 右對齊 |
| ---------------------- | ------------- | ----------------- |
## 腳註(footnote)
```
hello[^hello]
```
見底部腳註[^hello]
[^hello]: 一個註腳
## 表情(emoji)
[參考網站: https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)
```
:laughing:
:blush:
:smiley:
:)
...
```
:laughing::blush::smiley::)
## $\KaTeX$公式
我們可以渲染公式例如：$x_i + y_i = z_i$和$\sum_{i=1}^n a_i=0$
我們也可以單行渲染
$$\sum_{i=1}^n a_i=0$$
具體可參照[katex文檔](http://www.intmath.com/cg5/katex-mathjax-comparison.php)和[katex支持的函數](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)以及[latex文檔](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
## 布局
::: hljs-left
`::: hljs-left`
`居左`
`:::`
:::
::: hljs-center
`::: hljs-center`
`居中`
`:::`
:::
::: hljs-right
`::: hljs-right`
`居右`
`:::`
:::
## 定義
術語一
: 定義一
包含有*行內標記*的術語二
: 定義二
{一些定義二的文字或代碼}
定義二的第三段
```
術語一
: 定義一
包含有*行內標記*的術語二
: 定義二
{一些定義二的文字或代碼}
定義二的第三段
```
## abbr
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
HTML 規範由 W3C 維護
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
HTML 規範由 W3C 維護
```
================================================
FILE: src/dev/assets/lang/zh-TW/words_zh-TW.json
================================================
{
"start_editor": "開始編輯...",
"navigation_title": "導航目錄",
"tl_bold": "粗體",
"tl_italic": "斜體",
"tl_header": "標題",
"tl_header_one": "一級標題",
"tl_header_two": "二級標題",
"tl_header_three": "三級標題",
"tl_header_four": "四級標題",
"tl_header_five": "五級標題",
"tl_header_six": "六級標題",
"tl_underline": "下劃線",
"tl_strikethrough": "中劃線",
"tl_mark": "標記",
"tl_superscript": "上角標",
"tl_subscript": "下角標",
"tl_quote": "段落引用",
"tl_ol": "有序列表",
"tl_ul": "無序列表",
"tl_link": "鏈接",
"tl_image": "添加圖片鏈接",
"tl_code": "代碼塊",
"tl_table": "表格",
"tl_undo": "上一步",
"tl_redo": "下一步",
"tl_trash": "清空",
"tl_save": "保存",
"tl_navigation_on": "開啟標題導航",
"tl_navigation_off": "關閉標題導航",
"tl_preview": "預覽",
"tl_aligncenter": "居中",
"tl_alignleft": "居左",
"tl_alignright": "居右",
"tl_edit": "編輯",
"tl_single_column": "單欄",
"tl_double_column": "雙欄",
"tl_fullscreen_on": "全屏編輯",
"tl_fullscreen_off": "退出全屏",
"tl_read": "沈浸式閱讀",
"tl_html_on": "查看html文本",
"tl_html_off": "返回markdown文本",
"tl_help": "markdown語法幫助",
"tl_upload": "上傳圖片",
"tl_upload_remove": "刪除",
"tl_popup_link_title": "添加鏈接",
"tl_popup_link_text": "鏈接描述",
"tl_popup_link_addr": "鏈接地址",
"tl_popup_img_link_title": "添加圖片",
"tl_popup_img_link_text": "圖片描述",
"tl_popup_img_link_addr": "圖片鏈接",
"tl_popup_link_sure": "確定",
"tl_popup_link_cancel": "取消"
}
================================================
FILE: src/dev/demo.vue
================================================
<template>
<div>
<div class="navigate">
<span @click="viewIndex = 1">Full demo</span>
<span @click="viewIndex = 2">Simple demo</span>
</div>
<div>
<App v-if="viewIndex == 1"></App>
<Editor v-else-if="viewIndex == 2"></Editor>
</div>
</div>
</template>
<script>
import app from './app.vue';
import editor from './editor.vue';
export default {
name: 'demo',
components: {
App: app,
Editor: editor
},
data() {
return {
viewIndex: 1
};
}
};
</script>
<style>
.navigate {
text-align: center;
font-size: 18px;
color: blue;
}
.navigate span {
margin-right: 5px;
}
.navigate span:hover {
cursor: pointer;
font-weight: bolder;
}
</style>
================================================
FILE: src/dev/editor.vue
================================================
<template>
<div class="container">
<div id="editor">
<mavon-editor style="height: 100%" v-model="code" :codeStyle="codeStyle" :xssOptions="xssOptions"></mavon-editor>
</div>
<div class="switch-code-style">
<span>code style:</span>
<select v-model="codeStyle">
<option v-for="(val, key) in styles" :value="key">{{ key }}</option>
</select>
</div>
</div>
</template>
<script>
import styles from '../lib/core/hljs/lang.hljs.css.js'
const code = `java
/**
* @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;
public abstract strictfp class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}`;
module.exports = {
name: 'editor',
data: function () {
return {
codeStyle: "github",
styles,
code: '<span style="color:red;font-size:36px;">A</span> \n```' + code + '\n```',
xssOptions:{
whiteList: {
span: ['style']
}
}
};
}
}
</script>
<style>
.container {
margin: auto;
width: 80%;
}
#editor {
height: 580px;
}
.switch-code-style {
margin-top: 10px;
font-size: 16px;
}
</style>
================================================
FILE: src/dev/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>md-test</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body>
<div id="main">
</div>
</body>
</html>
================================================
FILE: src/dev/index.js
================================================
/**
* @Author: HuaChao Chen <CHC>
* @Date: 2017-05-04T23:26:08+08:00
* @Email: chenhuachaoxyz@gmail.com
* @Filename: index.js
* @Last modified by: chc
* @Last modified time: 2017-11-25T12:14:56+08:00
* @License: MIT
* @Copyright: 2017
*/
import Vue from 'vue';
var demo = require('./demo.vue');
var sMd = require('../index.js');
Vue.use(sMd);
var app = new Vue({
el: '#main',
render: (h) => h(demo)
});
================================================
FILE: src/index.js
================================================
/**
* Created by zhy on 2017/4/1.
*/
'use strict';
/**
* mavonEditor
* @author hinesboy
*/
const mavonEditor = require('./mavon-editor.vue');
const VueMavonEditor = {
/**
* @deprecated
* @see mavonEditor.getMarkdownIt()
*/
markdownIt: mavonEditor.mixins[0].data().markdownIt,
mavonEditor: mavonEditor,
LeftToolbar: require('./components/md-toolbar-left'),
RightToolbar: require('./components/md-toolbar-right'),
install: function(Vue) {
Vue.component('mavon-editor', mavonEditor);
}
};
module.exports = VueMavonEditor;
================================================
FILE: src/lib/config.js
================================================
/**
* @Author: HuaChao Chen <CHC>
* @Date: 2017-05-06T21:40:39+08:00
* @Email: chenhuachaoxyz@gmail.com
* @Filename: config.js
* @Last modified by: CHC
* @Last modified time: 2017-05-06T22:12:49+08:00
* @License: MIT
* @Copyright: 2017
* @desc 初始化配置项
*/
import help_zh_CN from './lang/zh-CN/help_zh-CN.md'
import help_zh_TW from './lang/zh-TW/help_zh-TW.md'
import help_en from './lang/en/help_en.md'
import help_fr from './lang/fr/help_fr.md'
import help_pt_BR from './lang/pt-BR/help_pt-BR.md'
import help_ru from './lang/ru/help_ru.md'
import help_de from './lang/de/help_de.md'
import help_ja from './lang/ja/help_ja.md'
import help_kr from './lang/kr/help_kr.md'
import words_zh_CN from './lang/zh-CN/words_zh-CN.json'
import words_zh_TW from './lang/zh-TW/words_zh-TW.json'
import words_en from './lang/en/words_en.json'
import words_fr from './lang/fr/words_fr.json'
import words_pt_BR from './lang/pt-BR/words_pt-BR.json'
import words_ru from './lang/ru/words_ru.json'
import words_de from './lang/de/words_de.json'
import words_ja from './lang/ja/words_ja.json'
import words_kr from './lang/kr/words_kr.json'
export const CONFIG = {
'help_zh-CN': help_zh_CN,
'help_zh-TW': help_zh_TW,
'help_pt-BR': help_pt_BR,
'help_en': help_en,
'help_fr': help_fr,
'help_ru': help_ru,
'help_de': help_de,
'help_ja': help_ja,
'words_zh-CN': words_zh_CN,
'words_zh-TW': words_zh_TW,
'words_pt-BR': words_pt_BR,
'words_en': words_en,
'words_fr': words_fr,
'words_ru': words_ru,
'words_de': words_de,
'words_ja': words_ja,
'words_kr': words_kr,
'langList': ['en', 'zh-CN', 'zh-TW', 'fr', 'pt-BR', 'ru', 'de', 'ja', 'kr'],
'toolbars': {
'bold': true,
'italic': true,
'header': true,
'underline': true,
'strikethrough': true,
'mark': true,
'superscript': true,
'subscript': true,
'quote': true,
'ol': true,
'ul': true,
'link': true,
'imagelink': true,
'code': true,
'table': true,
'undo': true,
'redo': true,
'trash': true,
'save': true,
'alignleft': true,
'aligncenter': true,
'alignright': true,
'navigation': true,
'subfield': true,
'fullscreen': true,
'readmodel': true,
'htmlcode': true,
'help': true,
'preview': true
}
};
================================================
FILE: src/lib/core/extra-function.js
================================================
/**
* @Author: HuaChao Chen <chc>
* @Date: 2017-06-14T23:04:34+08:00
* @Email: chenhuachaoxyz@gmail.com
* @Filename: extra-function.js
* @Last modified by: CHC
* @Last modified time: 2017-12-19T17:46:48+08:00
* @License: MIT
* @Copyright: 2017
*/
/**
* Created by zhy on 2017/4/24.
*/
/**
* textarea 插入内容
*/
export const insertTextAtCaret = (obj, {prefix, subfix, str, type}, $vm) => {
obj.focus()
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
if (startPos === endPos) {
// 直接插入
obj.value = tmpStr.substring(0, startPos) + prefix + str + subfix + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = startPos + prefix.length;
obj.selectionEnd = startPos + (str.length + prefix.length);
} else {
// 存在选中区域
if (tmpStr.substring(startPos - prefix.length, startPos) === prefix && tmpStr.substring(endPos, endPos + subfix.length) === subfix && judgeItalicAndBold(prefix, subfix, tmpStr, startPos, endPos)) {
// 取消
obj.value = tmpStr.substring(0, startPos - prefix.length) + tmpStr.substring(startPos, endPos) + tmpStr.substring(endPos + subfix.length, tmpStr.length);
obj.selectionStart = startPos - prefix.length;
obj.selectionEnd = endPos - prefix.length;
} else {
// 确定
obj.value = tmpStr.substring(0, startPos) + prefix + tmpStr.substring(startPos, endPos) + subfix + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = startPos + prefix.length;
obj.selectionEnd = startPos + (endPos - startPos + prefix.length);
}
}
} else {
alert('Error: Browser version is too low')
// obj.value += str;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus()
}
const code_structure = {
prefix: "```",
subfix: "\n```\n",
defaultLanguageText: "language"
}
export const insertCodeBlock = ($vm) => {
let obj = $vm.getTextareaDom();
if (isExistSelectionObj(obj)) {
const {defaultLanguageText: language} = code_structure;
let { selectionStart: startPos, selectionEnd: endPos, value: tmpStr } = obj;
if (startPos === endPos) {
// 直接插入
insertCodeBlockToVM(language, "", obj);
} else {
// 存在选中区域
if (isCancelCodeBlock(obj)) {
// 取消
removeCodeBlockFromVM(obj);
} else {
// 确定
let value = tmpStr.substring(startPos, endPos);
insertCodeBlockToVM("", value, obj);
}
}
} else {
alert('Error: Browser version is too low');
return;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus();
}
function insertCodeBlockToVM(language, content, selectionObj) {
const {prefix, subfix} = code_structure;
let { selectionStart: startPos, selectionEnd: endPos, value: tmpStr } = selectionObj;
let value = tmpStr.substring(0, startPos);
value += prefix + language + "\n";
value += content;
value += subfix;
value += tmpStr.substring(endPos, tmpStr.length);
selectionObj.value = value;
selectionObj.selectionStart = startPos + prefix.length + (language ? 0 : 1);
selectionObj.selectionEnd = selectionObj.selectionStart + language.length + content.length;
}
function removeCodeBlockFromVM(selectionObj) {
let {prefix, subfix, defaultLanguageText: language} = code_structure;
let { selectionStart: startPos, selectionEnd: endPos, value: content } = selectionObj;
let selectedValue = content.substring(startPos, endPos);
if (content.substring(startPos - 1, startPos) === "\n")
{
prefix = prefix + "\n";
} else {
subfix = "\n" + subfix;
if (prefix + language + subfix === content.substring(startPos - prefix.length,endPos + subfix.length)) {
let value = content.substring(0, startPos - prefix.length);
value += content.substring(endPos + subfix.length, content.length)
selectionObj.value = value;
selectionObj.selectionStart = startPos - prefix.length;
selectionObj.selectionEnd = selectionObj.selectionStart;
return;
}
}
let value = content.substring(0, startPos - prefix.length);
value += selectedValue;
value += content.substring(endPos + subfix.length, content.length)
selectionObj.value = value;
selectionObj.selectionStart = startPos - prefix.length;
selectionObj.selectionEnd = selectionObj.selectionStart + selectedValue.length;
}
function isExistSelectionObj(textareaDom) {
return typeof textareaDom.selectionStart === 'number' && typeof textareaDom.selectionEnd === 'number';
}
function isCancelCodeBlock(selectionObj) {
let { selectionStart: startPos, selectionEnd: endPos, value: content } = selectionObj;
let {prefix, subfix} = code_structure;
if (content.substring(startPos - 1, startPos) === "\n")
{
prefix = prefix + "\n";
} else {
subfix = "\n" + subfix;
}
return content.substring(startPos - prefix.length, startPos) === prefix &&
content.substring(endPos, endPos + subfix.length) === subfix;
}
// 处理粗体与斜体冲突问题
function judgeItalicAndBold(prefix, subfix, tmpStr, startPos, endPos) {
if (prefix === '*' && subfix === '*') {
if (tmpStr.substring(startPos - 2, startPos - 1) === '*' && tmpStr.substring(endPos + 1, endPos + 2) === '*') {
return false
}
}
return true
}
// 插入有序列表
export const insertOl = ($vm) => {
let obj = $vm.getTextareaDom();
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
if (startPos === endPos) {
// 直接插入
obj.value = tmpStr.substring(0, startPos) + '1. ' + tmpStr.substring(endPos, tmpStr.length);
obj.selectionEnd = obj.selectionStart = startPos + 3;
} else {
// 存在选中区域
let start = startPos
while (start > 0 && tmpStr.substring(start - 1, start) !== '\n') {
start--
}
let selectStr = tmpStr.substring(start, endPos)
let selectStrs = selectStr.split('\n')
for (let i = 0; i < selectStrs.length; i++) {
selectStrs[i] = (i + 1) + '. ' + selectStrs[i]
}
let newSelectStr = selectStrs.join('\n')
obj.value = tmpStr.substring(0, start) + newSelectStr + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = start
obj.selectionEnd = endPos + newSelectStr.length - selectStr.length;
}
} else {
alert('Error: Browser version is too low')
// obj.value += str;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus();
}
// 删除行
export const removeLine = ($vm) => {
let obj = $vm.getTextareaDom();
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
// 找到行首、行尾
let start = startPos
while (start > 0 && tmpStr.substring(start - 1, start) !== '\n') {
start--
}
let end = endPos
while (end < tmpStr.length && tmpStr.substring(end, end + 1) !== '\n') {
end++
}
if (end < tmpStr.length) {
end++
}
obj.value = tmpStr.substring(0, start) + tmpStr.substring(end, tmpStr.length);
obj.selectionEnd = obj.selectionStart = start === 0 ? 0 : start - 1;
} else {
alert('Error: Browser version is too low')
// obj.value += str;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus();
}
// 插入无序列表
export const insertUl = ($vm) => {
let obj = $vm.getTextareaDom();
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
if (startPos === endPos) {
// 直接插入
obj.value = tmpStr.substring(0, startPos) + '- ' + tmpStr.substring(endPos, tmpStr.length);
obj.selectionEnd = obj.selectionStart = startPos + 2;
} else {
// 存在选中区域
let start = startPos
while (start > 0 && tmpStr.substring(start - 1, start) !== '\n') {
start--
}
let selectStr = tmpStr.substring(start, endPos)
let newSelectStr = selectStr.replace(/\n/g, '\n- ')
newSelectStr = '- ' + newSelectStr
obj.value = tmpStr.substring(0, start) + newSelectStr + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = start
obj.selectionEnd = endPos + newSelectStr.length - selectStr.length;
}
} else {
alert('Error: Browser version is too low')
// obj.value += str;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus();
}
// 插入tab
export const insertTab = ($vm, tab) => {
tab = tab ? (new Array(tab)).fill(' ').join('') : '\t'
let obj = $vm.getTextareaDom();
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
let lastLine = tmpStr.substring(0, startPos).split('\n').pop()
if (lastLine.match(/^\s*[0-9]+\.\s+\S*/)) {
// 有序列表
let temp = lastLine.replace(/(\d+)/, 1)
obj.value = tmpStr.substring(0, startPos - temp.length) + tab + temp + tmpStr.substring(endPos, tmpStr.length);
} else if (lastLine.match(/^\s*-\s+\S*/)) {
// 无序列表
obj.value = tmpStr.substring(0, startPos - lastLine.length) + tab + lastLine + tmpStr.substring(endPos, tmpStr.length);
} else {
obj.value = tmpStr.substring(0, startPos) + tab + tmpStr.substring(endPos, tmpStr.length);
}
obj.selectionStart = obj.selectionEnd = startPos + tab.length;
} else {
alert('Error: Browser version is too low')
// obj.value += str;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus();
}
// shift + tab
export const unInsertTab = ($vm, tab) => {
let regTab = new RegExp(tab ? `\\s{${tab}}` : '\t')
console.log(`regTab:`, regTab)
let obj = $vm.getTextareaDom();
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
let lastLine = tmpStr.substring(0, startPos).split('\n').pop()
if (lastLine.search(regTab) >= 0) {
// 替换最后一个制表符为空
obj.value = tmpStr.substring(0, startPos - lastLine.length) + lastLine.replace(regTab, '') + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = obj.selectionEnd = startPos - (tab || 1);
}
} else {
alert('Error: Browser version is too low')
// obj.value += str;
}
// 触发change事件
$vm.d_value = obj.value
obj.focus();
}
// 插入enter
export const insertEnter = ($vm, event) => {
let obj = $vm.getTextareaDom()
if (isExistSelectionObj(obj)) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var tmpStr = obj.value;
// 获取光标前最后一行字符串
let lastLine = tmpStr.substring(0, startPos).split('\n').pop()
let matchListNeedChangeLine = lastLine.match(/^\s*(?:[0-9]+\.|-)\s+\S+/)
if (matchListNeedChangeLine) {
// 需要自动产生下一个列表项
event.preventDefault()
// eg: [1. test] 仅获取[1. ]
let subfix = matchListNeedChangeLine.shift().match(/^\s*(?:[0-9]+\.|-)\s/).shift()
if (subfix.search(/-/) >= 0) {
// 无序列表
obj.value = tmpStr.substring(0, startPos) + '\n' + subfix + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = obj.selectionEnd = startPos + subfix.length + 1
} else {
// 有序列表
let temp = subfix.replace(/(\d+)/, parseInt(subfix) + 1)
obj.value = tmpStr.substring(0, startPos) + '\n' + temp + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = obj.selectionEnd = startPos + temp.length + 1
}
} else {
let matchListNeedRemoveLine = lastLine.match(/^\s*(?:[0-9]+\.|-)\s+$/)
if (matchListNeedRemoveLine) {
// 需要跳出列表
event.preventDefault()
let preLength = matchListNeedRemoveLine.shift().length
obj.value = tmpStr.substring(0, startPos - preLength) + '\n' + tmpStr.substring(endPos, tmpStr.length);
obj.selectionStart = obj.selectionEnd = startPos - preLength
// TODO 检测是否存在嵌套列表，自动生成上一级
}
}
} else {
alert('Error: Browser version is too low')
}
$vm.d_value = obj.value
obj.focus();
}
/**
* 生成导航目录
*/
export const getNavigation = ($vm , full) => {
let navigationContent;
navigationContent = $vm.$refs.navigationContent
navigationContent.innerHTML = $vm.d_render
let nodes = navigationContent.children
if (nodes.length) {
for (let i = 0; i < nodes.length; i++) {
judageH(nodes[i] , i , nodes)
}
}
function judageH(node , i , nodes) {
let reg = /^H[1-6]{1}$/;
if (!reg.exec(node.tagName)) {
node.style.display = 'none'
} else {
node.onclick = function () {
let vShowContent = $vm.$refs.vShowContent;
let vNoteEdit = $vm.$refs.vNoteEdit;
if ($vm.s_subfield) {
// 双栏
if ($vm.s_preview_switch) {
// 编辑预览
vNoteEdit.scrollTop = vShowContent.children[i].offsetTop * (vNoteEdit.scrollHeight - vNoteEdit.offsetHeight) / (vShowContent.scrollHeight - vShowContent.offsetHeight);
} else {
// todo 编辑
}
} else {
// 单栏
if ($vm.s_preview_switch) {
// 预览
vShowContent.scrollTop = vShowContent.children[i].offsetTop;
} else {
// todo 编辑
}
}
}
}
}
}
/**
* 滚动条联动
*/
export const scrollLink = ($event, $vm) => {
let element = $event.srcElement ? $event.srcElement : $event.target
let ratio = element.scrollTop / (element.scrollHeight - element.offsetHeight)
if ($vm.edit_scroll_height >= 0 && element.scrollHeight !== $vm.edit_scroll_height && (element.scrollHeight - element.offsetHeight - element.scrollTop <= 30)) {
// star 内容变化 导致 高度增加 且滚动条距离底部小于25px 自动滚动到底部
$vm.$refs.vNoteEdit.scrollTop = element.scrollHeight - element.offsetHeight
ratio = 1
}
$vm.edit_scroll_height = element.scrollHeight
// end ----
if ($vm.$refs.vShowContent.scrollHeight > $vm.$refs.vShowContent.offsetHeight) {
$vm.$refs.vShowContent.scrollTop = ($vm.$refs.vShowContent.scrollHeight - $vm.$refs.vShowContent.offsetHeight) * ratio
}
}
/**
* 监听浏览器fullscreen
* @param $vm
*/
export const fullscreenchange = ($vm) => {
// 阅读模式 全屏监听事件
$vm.$el.addEventListener('fullscreenchange', function (e) {
$vm.$toolbar_right_read_change_status()
}, false);
$vm.$el.addEventListener('mozfullscreenchange', function (e) {
$vm.$toolbar_right_read_change_status()
}, false);
$vm.$el.addEventListener('webkitfullscreenchange', function (e) {
$vm.$toolbar_right_read_change_status()
}, false);
$vm.$el.addEventListener('msfullscreenchange', function (e) {
$vm.$toolbar_right_read_change_status()
}, false);
}
/**
* 监听浏览器onresize
* @param $vm
*/
export const windowResize = ($vm) => {
function sizeToStatus() {
if ($vm.$el.clientWidth > 768) {
// > 768
$vm.s_subfield = $vm.subfield;
}
else {
// < 768
$vm.s_subfield = false;
}
}
sizeToStatus();
window.addEventListener('resize', sizeToStatus);
}
export function loadScript(src, callback) {
if (!(typeof callback === 'function')) {
callback = function() {};
}
var check = document.querySelectorAll("script[src='" + src + "']");
if (check.length > 0) {
check[0].addEventListener('load', function() {
callback();
});
callback();
return;
}
var script = document.createElement('script');
var head = document.getElementsByTagName('head')[0];
script.type = 'text/javascript';
script.charset = 'UTF-8';
script.src = src;
if (script.addEventListener) {
script.addEventListener('load', function () {
callback();
}, false);
} else if (script.attachEvent) {
script.attachEvent('onreadystatechange', function () {
var target = window.event.srcElement;
if (target.readyState === 'loaded') {
callback();
}
});
}
head.appendChild(script);
}
// <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/agate.min.css" rel="stylesheet">
export function loadLink(src, callback, id) {
if (!(typeof callback === 'function')) {
callback = function() {};
}
var check = document.querySelectorAll("link[href='" + src + "']");
if (check.length > 0) {
callback();
return;
}
if (id) {
var styles = document.querySelectorAll("link#" + id);
if (styles.length) {
styles[0].href = src;
return;
}
}
var link = document.createElement('link');
var head = document.getElementsByTagName('head')[0];
link.rel = 'stylesheet';
link.href = src;
id && (link['id'] = id);
if (link.addEventListener) {
link.addEventListener('load', function () {
callback();
}, false);
} else if (link.attachEvent) {
link.attachEvent('onreadystatechange', function () {
var target = window.event.srcElement;
if (target.readyState === 'loaded') {
callback();
}
});
}
head.appendChild(link);
}
export const ImagePreviewListener = ($vm) => {
// vShowContent
$vm.$refs.vShowContent.addEventListener('click', function (event) {
event = event ? event : window.event;
let ele = event.srcElement ? event.srcElement : event.target;
if (ele.tagName === 'IMG') {
if ($vm.imageClick != null) {
// 覆盖图片点击事件
$vm.imageClick(ele);
} else {
$vm.d_preview_imgsrc = ele.src;
}
}
})
}
================================================
FILE: src/lib/core/highlight.js
================================================
/**
* @Author: HuaChao Chen <CHC>
* @Date: 2017-06-16T21:01:47+08:00
* @Email: chenhuachaoxyz@gmail.com
* @Filename: highlight.js
* @Last modified by: chc
* @Last modified time: 2017-11-24T19:55:22+08:00
* @License: MIT
* @Copyright: 2017
*/
import {
loadScript
} from './extra-function.js'
function highLightCode(str, callback, hljsLangFuc, hljsFuc) {
var hljs = window.hljs;
if (!hljs) {
if (typeof hljsFuc !== 'function') {
console.warn('external_link.hljs_js is not a function, hljs can not load by mavon-editor, if you want to disabled this log, set external_link.hljs_js to function');
callback(str);
return;
}
var url = hljsFuc();
console.warn('hljs parsing file is missing. mavon-editor will autoload', url);
loadScript(url, function() {
_highLightCode(str, callback, hljsLangFuc);
});
} else {
if (typeof hljsLangFuc === 'function') {
_highLightCode(str, callback, hljsLangFuc);
} else {
console.warn('external_link.hljs_lang is not a function, hljs will not to work');
callback(str);
}
}
}
function _highLightCode(str, callback, hljsLangFuc) {
var dom = document.createElement('div');
var hljs = window.hljs;
dom.innerHTML = str;
var pre_code = dom.querySelectorAll('pre > div.hljs > code');
if (pre_code && hljs && (typeof hljsLangFuc === 'function')) {
var flag = 0;
var i = 0;
var deal = 0;
var not_include_lang = {}; // these lang parse file need to be include.
var url = '';
for (i = 0; i < pre_code.length; i++) {
var lang = pre_code[i].className.toLowerCase();
if (lang.length > 0) {
// if this lang parse file missing
url = hljsLangFuc(lang);
if (!hljs.getLanguage(lang) && !not_include_lang.hasOwnProperty(lang) && url.length > 0) {
not_include_lang[lang] = url;
}
}
}
// we need to include these lang parse file manually
var need_langs = [];
for (var key in not_include_lang) {
if (not_include_lang.hasOwnProperty(key)) {
need_langs.push(key);
}
}
for (i = 0; i < need_langs.length; i++) {
url = not_include_lang[need_langs[i]];
loadScript(url, function() {
deal = deal + 1;
if (deal === need_langs.length) {
for (var i = 0; i < pre_code.length; i++) {
var lang = pre_code[i].className;
// if lang is valid.
if (lang.length > 0 && hljs.getLanguage(lang)) {
hljs.highlightBlock(pre_code[i])
}
}
callback(dom.innerHTML);
}
});
}
if (need_langs.length === 0) {
for (i = 0; i < pre_code.length; i++) {
lang = pre_code[i].className;
// if lang is valid.
if (lang.length > 0 && hljs.getLanguage(lang)) {
hljs.highlightBlock(pre_code[i])
}
}
callback(dom.innerHTML);
}
} else {
callback(dom.innerHTML);
}
}
export default highLightCode;
================================================
FILE: src/lib/core/hljs/lang.hljs.css.js
================================================
export default {
agate: 1,
androidstudio: 1,
'arduino-light': 1,
arta: 1,
ascetic: 1,
'atom-one-dark': 1,
'atom-one-light': 1,
'brown-paper': 1,
'codepen-embed': 1,
'color-brewer': 1,
dark: 1,
default: 1,
docco: 1,
far: 1,
foundation: 1,
github: 1,
googlecode: 1,
grayscale: 1,
hybrid: 1,
idea: 1,
'ir-black': 1,
magula: 1,
'mono-blue': 1,
'monokai-sublime': 1,
monokai: 1,
obsidian: 1,
'paraiso-dark': 1,
'paraiso-light': 1,
pojoaque: 1,
purebasic: 1,
rainbow: 1,
routeros: 1,
'school-book': 1,
sunburst: 1,
'tomorrow-night-blue': 1,
'tomorrow-night-bright': 1,
vs: 1,
vs2015: 1,
xcode: 1,
xt256: 1,
'a11y-dark': 1,
'a11y-light': 1,
'an-old-hope': 1,
'atom-one-dark-reasonable': 1,
'brown-pap': 1,
devibeans: 1,
'github-dark': 1,
'github-dark-dimmed': 1,
gml: 1,
'gradient-dark': 1,
'gradient-light': 1,
'isbl-editor-dark': 1,
'isbl-editor-light': 1,
'kimbie-dark': 1,
'kimbie-light': 1,
lightfair: 1,
lioshi: 1,
'night-owl': 1,
'nnfx-dark': 1,
'nnfx-light': 1,
nord: 1,
pojo: 1,
'qtcreator-dark': 1,
'qtcreator-light': 1,
'shades-of-purple': 1,
srcery: 1,
'stackoverflow-dark': 1,
'stackoverflow-light': 1
};
================================================
FILE: src/lib/core/hljs/lang.hljs.js
================================================
export default {
'1c': '1c',
'abnf': 'abnf',
'accesslog': 'accesslog',
'actionscript': 'actionscript',
'as': 'actionscript',
'ada': 'ada',
'apache': 'apache',
'apacheconf': 'apache',
'applescript': 'applescript',
'osascript': 'applescript',
'arduino': 'arduino',
'armasm': 'armasm',
'arm': 'armasm',
'asciidoc': 'asciidoc',
'adoc': 'asciidoc',
'aspectj': 'aspectj',
'autohotkey': 'autohotkey',
'ahk': 'autohotkey',
'autoit': 'autoit',
'avrasm': 'avrasm',
'awk': 'awk',
'axapta': 'axapta',
'bash': 'bash',
'sh': 'bash',
'zsh': 'bash',
'basic': 'basic',
'bnf': 'bnf',
'brainfuck': 'brainfuck',
'bf': 'brainfuck',
'cal': 'cal',
'capnproto': 'capnproto',
'capnp': 'capnproto',
'ceylon': 'ceylon',
'clean': 'clean',
'icl': 'clean',
'dcl': 'clean',
'clojure-repl': 'clojure-repl',
'clojure': 'clojure',
'clj': 'clojure',
'cmake': 'cmake',
'cmake.in': 'cmake',
'coffeescript': 'coffeescript',
'coffee': 'coffeescript',
'cson': 'coffeescript',
'iced': 'coffeescript',
'coq': 'coq',
'cos': 'cos',
'cls': 'cos',
'cpp': 'cpp',
'c': 'cpp',
'cc': 'cpp',
'h': 'cpp',
'c++': 'cpp',
'h++': 'cpp',
'hpp': 'cpp',
'crmsh': 'crmsh',
'crm': 'crmsh',
'pcmk': 'crmsh',
'crystal': 'crystal',
'cr': 'crystal',
'cs': 'cs',
'csharp': 'cs',
'csp': 'csp',
'css': 'css',
'd': 'd',
'dart': 'dart',
'delphi': 'delphi',
'dpr': 'delphi',
'dfm': 'delphi',
'pas': 'delphi',
'pascal': 'delphi',
'freepascal': 'delphi',
'lazarus': 'delphi',
'lpr': 'delphi',
'lfm': 'delphi',
'diff': 'diff',
'patch': 'diff',
'django': 'django',
'jinja': 'django',
'dns': 'dns',
'bind': 'dns',
'zone': 'dns',
'dockerfile': 'dockerfile',
'docker': 'dockerfile',
'dos': 'dos',
'bat': 'dos',
'cmd': 'dos',
'dsconfig': 'dsconfig',
'dts': 'dts',
'dust': 'dust',
'dst': 'dust',
'ebnf': 'ebnf',
'elixir': 'elixir',
'elm': 'elm',
'erb': 'erb',
'erlang-repl': 'erlang-repl',
'erlang': 'erlang',
'erl': 'erlang',
'excel': 'excel',
'xlsx': 'excel',
'xls': 'excel',
'fix': 'fix',
'flix': 'flix',
'fortran': 'fortran',
'f90': 'fortran',
'f95': 'fortran',
'fsharp': 'fsharp',
'fs': 'fsharp',
'gams': 'gams',
'gms': 'gams',
'gauss': 'gauss',
'gss': 'gauss',
'gcode': 'gcode',
'nc': 'gcode',
'gherkin': 'gherkin',
'feature': 'gherkin',
'glsl': 'glsl',
'go': 'go',
'golang': 'go',
'golo': 'golo',
'gradle': 'gradle',
'groovy': 'groovy',
'haml': 'haml',
'handlebars': 'handlebars',
'hbs': 'handlebars',
'html.hbs': 'handlebars',
'html.handlebars': 'handlebars',
'haskell': 'haskell',
'hs': 'haskell',
'haxe': 'haxe',
'hx': 'haxe',
'hsp': 'hsp',
'htmlbars': 'htmlbars',
'http': 'http',
'https': 'http',
'hy': 'hy',
'hylang': 'hy',
'inform7': 'inform7',
'i7': 'inform7',
'ini': 'ini',
'toml': 'ini',
'irpf90': 'irpf90',
'java': 'java',
'jsp': 'java',
'javascript': 'javascript',
'js': 'javascript',
'jsx': 'javascript',
'jboss-cli': 'jboss-cli',
'wildfly-cli': 'jboss-cli',
'json': 'json',
'julia-repl': 'julia-repl',
'julia': 'julia',
'kotlin': 'kotlin',
'lasso': 'lasso',
'ls': 'livescript',
'lassoscript': 'lasso',
'ldif': 'ldif',
'leaf': 'leaf',
'less': 'less',
'lisp': 'lisp',
'livecodeserver': 'livecodeserver',
'livescript': 'livescript',
'llvm': 'llvm',
'lsl': 'lsl',
'lua': 'lua',
'makefile': 'makefile',
'mk': 'makefile',
'mak': 'makefile',
'markdown': 'markdown',
'md': 'markdown',
'mkdown': 'markdown',
'mkd': 'markdown',
'mathematica': 'mathematica',
'mma': 'mathematica',
'matlab': 'matlab',
'maxima': 'maxima',
'mel': 'mel',
'mercury': 'mercury',
'm': 'mercury',
'moo': 'mercury',
'mipsasm': 'mipsasm',
'mips': 'mipsasm',
'mizar': 'mizar',
'mojolicious': 'mojolicious',
'monkey': 'monkey',
'moonscript': 'moonscript',
'moon': 'moonscript',
'n1ql': 'n1ql',
'nginx': 'nginx',
'nginxconf': 'nginx',
'nimrod': 'nimrod',
'nim': 'nimrod',
'nix': 'nix',
'nixos': 'nix',
'nsis': 'nsis',
'objectivec': 'objectivec',
'mm': 'objectivec',
'objc': 'objectivec',
'obj-c': 'objectivec',
'ocaml': 'ocaml',
'ml': 'sml',
'openscad': 'openscad',
'scad': 'openscad',
'oxygene': 'oxygene',
'parser3': 'parser3',
'perl': 'perl',
'pl': 'perl',
'pm': 'perl',
'pf': 'pf',
'pf.conf': 'pf',
'php': 'php',
'php3': 'php',
'php4': 'php',
'php5': 'php',
'php6': 'php',
'pony': 'pony',
'powershell': 'powershell',
'ps': 'powershell',
'processing': 'processing',
'profile': 'profile',
'prolog': 'prolog',
'protobuf': 'protobuf',
'puppet': 'puppet',
'pp': 'puppet',
'purebasic': 'purebasic',
'pb': 'purebasic',
'pbi': 'purebasic',
'python': 'python',
'py': 'python',
'gyp': 'python',
'q': 'q',
'k': 'q',
'kdb': 'q',
'qml': 'qml',
'qt': 'qml',
'r': 'r',
'rib': 'rib',
'roboconf': 'roboconf',
'graph': 'roboconf',
'instances': 'roboconf',
'routeros': 'routeros',
'mikrotik': 'routeros',
'rsl': 'rsl',
'ruby': 'ruby',
'rb': 'ruby',
'gemspec': 'ruby',
'podspec': 'ruby',
'thor': 'ruby',
'irb': 'ruby',
'ruleslanguage': 'ruleslanguage',
'rust': 'rust',
'rs': 'rust',
'scala': 'scala',
'scheme': 'scheme',
'scilab': 'scilab',
'sci': 'scilab',
'scss': 'scss',
'shell': 'shell',
'console': 'shell',
'smali': 'smali',
'smalltalk': 'smalltalk',
'st': 'smalltalk',
'sml': 'sml',
'sqf': 'sqf',
'sql': 'sql',
'stan': 'stan',
'stata': 'stata',
'do': 'stata',
'ado': 'stata',
'step21': 'step21',
'p21': 'step21',
'step': 'step21',
'stp': 'step21',
'stylus': 'stylus',
'styl': 'stylus',
'subunit': 'subunit',
'swift': 'swift',
'taggerscript': 'taggerscript',
'tap': 'tap',
'tcl': 'tcl',
'tk': 'tcl',
'tex': 'tex',
'thrift': 'thrift',
'tp': 'tp',
'twig': 'twig',
'craftcms': 'twig',
'typescript': 'typescript',
'ts': 'typescript',
'vala': 'vala',
'vbnet': 'vbnet',
'vb': 'vbnet',
'vbscript-html': 'vbscript-html',
'vbscript': 'vbscript',
'vbs': 'vbscript',
'verilog': 'verilog',
'v': 'verilog',
'sv': 'verilog',
'svh': 'verilog',
'vhdl': 'vhdl',
'vim': 'vim',
'x86asm': 'x86asm',
'xl': 'xl',
'tao': 'xl',
'xml': 'xml',
'html': 'xml',
'xhtml': 'xml',
'rss': 'xml',
'atom': 'xml',
'xjb': 'xml',
'xsd': 'xml',
'xsl': 'xml',
'plist': 'xml',
'xquery': 'xquery',
'xpath': 'xquery',
'xq': 'xquery',
'yaml': 'yaml',
'yml': 'yaml',
'YAML': 'yaml',
'zephir': 'zephir',
'zep': 'zephir'
};
================================================
FILE: src/lib/core/keydown-listen.js
================================================
/**
* @Author: HuaChao Chen <CHC>
* @Date: 2017-05-03T00:31:20+08:00
* @Email: chenhuachaoxyz@gmail.com
* @Filename: keydown-listen.js
* @Last modified by: chenhuachao
* @Last modified time: 2017-12-04T00:03:33+08:00
* @License: MIT
* @Copyright: 2017
*/
/**
* Created by zhy on 2017/4/24.
*/
const KEY_CODE = {
F8: 119,
F9: 120,
F10: 121,
F11: 122,
F12: 123,
B: 66,
I: 73,
H: 72,
U: 85,
D: 68,
M:77 ,
Q: 81,
O: 79,
L: 76,
S: 83,
Z: 90,
Y: 89,
C: 67,
T: 84,
R: 82,
DELETE: 8,
TAB: 9,
ENTER: 13,
ONE: 97,
TWO: 98,
THREE: 99,
FOUR: 100,
FIVE: 101,
SIX: 102,
_ONE: 49,
_TWO: 50,
_THREE: 51,
_FOUR: 52,
_FIVE: 53,
_SIX: 54
};
export const keydownListen = ($vm) => {
if (!$vm.shortCut)
{
return
}
$vm.$el.addEventListener('keydown', function (e) {
// 注册监听键盘事件
if (!(e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) {
// one key
switch (e.keyCode) {
case KEY_CODE.F8: {
// F8 导航
if ($vm.toolbars.navigation) {
e.preventDefault()
$vm.toolbar_right_click('navigation')
}
break;
}
case KEY_CODE.F9: {
// F9 预览模式
if ($vm.toolbars.preview) {
e.preventDefault()
$vm.toolbar_right_click('preview')
}
break;
}
case KEY_CODE.F10: {
// F10 全屏
if ($vm.toolbars.fullscreen) {
e.preventDefault()
$vm.toolbar_right_click('fullscreen')
}
break;
}
case KEY_CODE.F11: {
// F11 阅读
if ($vm.toolbars.readmodel) {
e.preventDefault()
$vm.toolbar_right_click('read')
}
break;
}
case KEY_CODE.F12: {
// F12 单双栏切换
if ($vm.toolbars.subfield) {
e.preventDefault()
$vm.toolbar_right_click('subfield')
}
break;
}
case KEY_CODE.TAB: {
// TAB
if (!$vm.$refs.toolbar_left.s_img_link_open) {
e.preventDefault()
$vm.insertTab();
}
break;
}
case KEY_CODE.ENTER: {
// enter
if ($vm.$refs.toolbar_left.s_img_link_open) {
// 当添加外部链接的弹出层打开时， enter表示确定输入此链接
e.preventDefault()
$vm.$refs.toolbar_left.$imgLinkAdd();
} else {
// 在文本框中输入enter
$vm.insertEnter(e)
}
break;
}
}
} else if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) {
// ctrl +
switch (e.keyCode) {
case KEY_CODE.B: {
// B
e.preventDefault()
$vm.toolbar_left_click('bold')
break;
}
case KEY_CODE.I: {
// I
e.preventDefault()
$vm.toolbar_left_click('italic')
break;
}
case KEY_CODE.H: {
// H
e.preventDefault()
$vm.toolbar_left_click('header')
break;
}
case KEY_CODE.U: {
// U
e.preventDefault()
$vm.toolbar_left_click('underline')
break;
}
case KEY_CODE.D: {
// D
e.preventDefault()
$vm.toolbar_left_click('removeLine')
break;
}
case KEY_CODE.M: {
// M
e.preventDefault()
$vm.toolbar_left_click('mark')
break;
}
case KEY_CODE.Q: {
// Q
e.preventDefault()
$vm.toolbar_left_click('quote')
break;
}
case KEY_CODE.O: {
// O
e.preventDefault()
$vm.toolbar_left_click('ol')
break;
}
case KEY_CODE.L: {
// L
e.preventDefault()
$vm.toolbar_left_click('link')
break;
}
case KEY_CODE.S: {
// S
e.preventDefault()
$vm.toolbar_left_click('save')
break;
}
case KEY_CODE.Z: {
// Z
e.preventDefault()
$vm.toolbar_left_click('undo')
break;
}
case KEY_CODE.Y: {
// Y
e.preventDefault()
$vm.toolbar_left_click('redo')
break;
}
case KEY_CODE.DELETE: {
// delete
e.preventDefault()
$vm.toolbar_left_click('trash')
break;
}
case KEY_CODE.ONE: {
// ONE
e.preventDefault()
$vm.toolbar_left_click('header1')
break;
}
case KEY_CODE.TWO: {
// TWO
e.preventDefault()
$vm.toolbar_left_click('header2')
break;
}
case KEY_CODE.THREE: {
// THREE
e.preventDefault()
$vm.toolbar_left_click('header3')
break;
}
case KEY_CODE.FOUR: {
// FOUR
e.preventDefault()
$vm.toolbar_left_click('header4')
break;
}
case KEY_CODE.FIVE: {
// FIVE
e.preventDefault()
$vm.toolbar_left_click('header5')
break;
}
case KEY_CODE.SIX: {
// SIX
e.preventDefault()
$vm.toolbar_left_click('header6')
break;
}
case KEY_CODE._ONE: {
// ONE
e.preventDefault()
$vm.toolbar_left_click('header1')
break;
}
case KEY_CODE._TWO: {
// TWO
e.preventDefault()
$vm.toolbar_left_click('header2')
break;
}
case KEY_CODE._THREE: {
// THREE
e.preventDefault()
$vm.toolbar_left_click('header3')
break;
}
case KEY_CODE._FOUR: {
// FOUR
e.preventDefault()
$vm.toolbar_left_click('header4')
break;
}
case KEY_CODE._FIVE: {
// FIVE
e.preventDefault()
$vm.toolbar_left_click('header5')
break;
}
case KEY_CODE._SIX: {
// SIX
e.preventDefault()
$vm.toolbar_left_click('header6')
break;
}
}
} else if ((e.ctrlKey || e.metaKey) && e.altKey && !e.shiftKey) {
// ctrl + alt +
switch (e.keyCode) {
case KEY_CODE.S: {
// S
e.preventDefault()
$vm.toolbar_left_click('superscript')
break;
}
case KEY_CODE.U: {
// U
e.preventDefault()
$vm.toolbar_left_click('ul')
break;
}
case KEY_CODE.L: {
// L
e.preventDefault()
$vm.toolbar_left_click('imagelink')
break;
}
case KEY_CODE.C: {
// C
e.preventDefault()
$vm.toolbar_left_click('code')
break;
}
case KEY_CODE.T: {
// T
e.preventDefault()
$vm.toolbar_left_click('table')
break;
}
}
} else if ((e.ctrlKey || e.metaKey) && e.shiftKey && !e.altKey) {
// ctrl + shift
switch (e.keyCode) {
case KEY_CODE.S: {
// S
e.preventDefault()
$vm.toolbar_left_click('subscript')
break;
}
case KEY_CODE.D: {
// D
e.preventDefault()
$vm.toolbar_left_click('strikethrough')
break;
}
case KEY_CODE.L: {
// D
e.preventDefault()
$vm.toolbar_left_click('alignleft')
break;
}
case KEY_CODE.R: {
// D
e.preventDefault()
$vm.toolbar_left_click('alignright')
break;
}
case KEY_CODE.C: {
// D
e.preventDefault()
$vm.toolbar_left_click('aligncenter')
break;
}
}
} else if (!(e.ctrlKey || e.metaKey) && e.shiftKey && !e.altKey) {
// shift +
switch (e.keyCode) {
case KEY_CODE.TAB: {
// TAB
if (!$vm.$refs.toolbar_left.s_img_link_open) {
e.preventDefault()
$vm.unInsertTab();
}
break;
gitextract_k4v0_48_/
├── .babelrc
├── .eslintrc.js
├── .gitattributes
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_template.md
│ │ ├── feature_template.md
│ │ └── question_template.md
│ └── workflows/
│ └── gha.yml
├── .gitignore
├── .npmignore
├── LICENSE
├── LOG.md
├── README-EN.md
├── README.md
├── SECURITY.md
├── _config.yml
├── doc/
│ ├── cn/
│ │ ├── images.md
│ │ ├── markdown.md
│ │ ├── no-cnd.md
│ │ ├── upload-images.md
│ │ └── use.md
│ └── en/
│ ├── images.md
│ ├── markdown.md
│ ├── no-cnd.md
│ ├── upload-images.md
│ └── use.md
├── jest.config.js
├── mavon-editor.d.ts
├── package.json
├── src/
│ ├── components/
│ │ ├── md-toolbar-left.vue
│ │ └── md-toolbar-right.vue
│ ├── dev/
│ │ ├── app.vue
│ │ ├── assets/
│ │ │ ├── config.js
│ │ │ └── lang/
│ │ │ ├── de/
│ │ │ │ ├── help_de.md
│ │ │ │ └── words_de.json
│ │ │ ├── en/
│ │ │ │ ├── help_en.md
│ │ │ │ └── words_en.json
│ │ │ ├── fr/
│ │ │ │ ├── help_fr.md
│ │ │ │ └── words_fr.json
│ │ │ ├── pt-BR/
│ │ │ │ ├── help_pt-BR.md
│ │ │ │ └── words_pt-BR.json
│ │ │ ├── ru/
│ │ │ │ ├── help_ru.md
│ │ │ │ └── words_ru.json
│ │ │ ├── zh-CN/
│ │ │ │ ├── help_zh-CN.md
│ │ │ │ └── words_zh-CN.json
│ │ │ └── zh-TW/
│ │ │ ├── help_zh-TW.md
│ │ │ └── words_zh-TW.json
│ │ ├── demo.vue
│ │ ├── editor.vue
│ │ ├── index.html
│ │ └── index.js
│ ├── index.js
│ ├── lib/
│ │ ├── config.js
│ │ ├── core/
│ │ │ ├── extra-function.js
│ │ │ ├── highlight.js
│ │ │ ├── hljs/
│ │ │ │ ├── lang.hljs.css.js
│ │ │ │ └── lang.hljs.js
│ │ │ ├── keydown-listen.js
│ │ │ ├── markdown.js
│ │ │ ├── onecolumn-event.js
│ │ │ ├── sanitizer.js
│ │ │ └── to-markdown.js
│ │ ├── css/
│ │ │ ├── markdown.css
│ │ │ ├── mavon-editor.styl
│ │ │ ├── md.css
│ │ │ └── scroll.styl
│ │ ├── font/
│ │ │ ├── LICENSE.txt
│ │ │ ├── README.txt
│ │ │ ├── config.json
│ │ │ ├── css/
│ │ │ │ ├── animation.css
│ │ │ │ ├── fontello-codes.css
│ │ │ │ ├── fontello-embedded.css
│ │ │ │ ├── fontello-ie7-codes.css
│ │ │ │ ├── fontello-ie7.css
│ │ │ │ └── fontello.css
│ │ │ └── demo.html
│ │ ├── lang/
│ │ │ ├── de/
│ │ │ │ ├── help_de.md
│ │ │ │ └── words_de.json
│ │ │ ├── en/
│ │ │ │ ├── help_en.md
│ │ │ │ └── words_en.json
│ │ │ ├── fr/
│ │ │ │ ├── help_fr.md
│ │ │ │ └── words_fr.json
│ │ │ ├── ja/
│ │ │ │ ├── help_ja.md
│ │ │ │ └── words_ja.json
│ │ │ ├── kr/
│ │ │ │ ├── help_kr.md
│ │ │ │ └── words_kr.json
│ │ │ ├── pt-BR/
│ │ │ │ ├── help_pt-BR.md
│ │ │ │ └── words_pt-BR.json
│ │ │ ├── ru/
│ │ │ │ ├── help_ru.md
│ │ │ │ └── words_ru.json
│ │ │ ├── zh-CN/
│ │ │ │ ├── help_zh-CN.md
│ │ │ │ └── words_zh-CN.json
│ │ │ └── zh-TW/
│ │ │ ├── help_zh-TW.md
│ │ │ └── words_zh-TW.json
│ │ ├── mixins/
│ │ │ └── markdown.js
│ │ ├── toolbar_left_click.js
│ │ ├── toolbar_right_click.js
│ │ └── util.js
│ └── mavon-editor.vue
├── tests/
│ └── unit/
│ ├── __snapshots__/
│ │ └── mavon-editor.spec.js.snap
│ ├── base.spec.js
│ └── mavon-editor.spec.js
└── webpack/
├── webpack.base.js
├── webpack.build.js
└── webpack.dev.js
SYMBOL INDEX (42 symbols across 12 files)
FILE: mavon-editor.d.ts
type VueMavonEditor (line 2) | interface VueMavonEditor {
FILE: src/dev/assets/config.js
constant CONFIG (line 20) | const CONFIG = {
FILE: src/lib/config.js
constant CONFIG (line 32) | const CONFIG = {
FILE: src/lib/core/extra-function.js
function insertCodeBlockToVM (line 89) | function insertCodeBlockToVM(language, content, selectionObj) {
function removeCodeBlockFromVM (line 104) | function removeCodeBlockFromVM(selectionObj) {
function isExistSelectionObj (line 134) | function isExistSelectionObj(textareaDom) {
function isCancelCodeBlock (line 138) | function isCancelCodeBlock(selectionObj) {
function judgeItalicAndBold (line 154) | function judgeItalicAndBold(prefix, subfix, tmpStr, startPos, endPos) {
function judageH (line 366) | function judageH(node , i , nodes) {
function sizeToStatus (line 438) | function sizeToStatus() {
function loadScript (line 453) | function loadScript(src, callback) {
function loadLink (line 486) | function loadLink(src, callback, id) {
FILE: src/lib/core/highlight.js
function highLightCode (line 15) | function highLightCode(str, callback, hljsLangFuc, hljsFuc) {
function _highLightCode (line 37) | function _highLightCode(str, callback, hljsLangFuc) {
FILE: src/lib/core/keydown-listen.js
constant KEY_CODE (line 15) | const KEY_CODE = {
FILE: src/lib/core/sanitizer.js
function mavoneditor_sanitizer (line 5) | function mavoneditor_sanitizer(state) {
function sanitizer (line 12) | function sanitizer(tokens, types) {
FILE: src/lib/mixins/markdown.js
function initMarkdown (line 58) | function initMarkdown() {
method data (line 104) | data() {
method created (line 109) | created() {
method mounted (line 118) | mounted() {
method $render (line 122) | $render(src, func) {
method $_render (line 134) | $_render(src, func, res) {
FILE: src/lib/toolbar_left_click.js
function $toolbar_left_undo_click (line 12) | function $toolbar_left_undo_click($vm) {
function $toolbar_left_redo_click (line 26) | function $toolbar_left_redo_click($vm) {
function $toolbar_left_trash_click (line 38) | function $toolbar_left_trash_click($vm) {
function $toolbar_left_save_click (line 43) | function $toolbar_left_save_click($vm) {
function $toolbar_left_ol_click (line 47) | function $toolbar_left_ol_click($vm) {
function $toolbar_left_ul_click (line 51) | function $toolbar_left_ul_click($vm) {
function $toolbar_left_remove_line_click (line 54) | function $toolbar_left_remove_line_click($vm) {
function $toolbar_left_codeBlock_click (line 58) | function $toolbar_left_codeBlock_click($vm) {
FILE: src/lib/toolbar_right_click.js
function $toolbar_right_html_click (line 12) | function $toolbar_right_html_click($vm) {
function $toolbar_right_help_click (line 19) | function $toolbar_right_help_click($vm) {
function $toolbar_right_read_click (line 26) | function $toolbar_right_read_click($vm) {
function $toolbar_right_preview_click (line 40) | function $toolbar_right_preview_click($vm) {
function $toolbar_right_fullscreen_click (line 48) | function $toolbar_right_fullscreen_click($vm) {
function $toolbar_right_subfield_click (line 54) | function $toolbar_right_subfield_click ($vm) {
function $toolbar_right_navigation_click (line 66) | function $toolbar_right_navigation_click($vm) {
FILE: src/lib/util.js
function p_ObjectCopy_DEEP (line 11) | function p_ObjectCopy_DEEP(target, arg) {
function p_urlParse (line 26) | function p_urlParse() {
function stopEvent (line 42) | function stopEvent(e) {
FILE: tests/unit/base.spec.js
function checkButton (line 26) | function checkButton(buttonClass, textValue, htmlValue) {
Condensed preview — 104 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (438K chars).
[
{
"path": ".babelrc",
"chars": 259,
"preview": "{\n \"presets\": [\n [\"env\", {\n \"modules\": false\n }],\n [\n \"babel-preset-env\",\n {\n \"targets\""
},
{
"path": ".eslintrc.js",
"chars": 1059,
"preview": "// http://eslint.org/docs/user-guide/configuring\n\nmodule.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOpt"
},
{
"path": ".gitattributes",
"chars": 174,
"preview": "*.js linguist-language=Vue\r\n*.css linguist-language=Vue\r\n*.html linguist-language=Vue\r\n*.vue linguist-language=Vue\r\n*.le"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_template.md",
"chars": 575,
"preview": "---\nname: 🐛 Bug report\nabout: Create a report to help us improve\ntitle: '[Bug] XYZ'\nlabels: ':bug: Bug'\n---\n\n## 🐛 Bug Re"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_template.md",
"chars": 355,
"preview": "---\nname: 🚀 Feature Proposal\ntitle: '[Feature] XYZ'\nlabels: ':rocket: Feature Request'\nabout: Submit a proposal for a ne"
},
{
"path": ".github/ISSUE_TEMPLATE/question_template.md",
"chars": 583,
"preview": "---\nname: 💬 Questions / Help\ntitle: '[Question] XYZ'\nlabel: ':speech_balloon: Question'\nabout: Ask us a question\n---\n\n##"
},
{
"path": ".github/workflows/gha.yml",
"chars": 399,
"preview": "name: CI\r\non:\r\n push:\r\n branches: [ master ]\r\n pull_request:\r\n branches: [ master ]\r\n\r\njobs:\r\n build:\r\n runs"
},
{
"path": ".gitignore",
"chars": 144,
"preview": "/node_modules/*\r\n/.idea/*\r\nnpm-debug.log\r\ngit-debug.log\r\npackage-lock.json\r\n.idea/\r\n.DS_Store\r\n.ftpconfig\r\n*.swp\r\n/tests"
},
{
"path": ".npmignore",
"chars": 93,
"preview": "/node_modules/*\r\n/.idea/*\r\n/.git/*\r\n/img/*\r\n/src/dev/*\r\nLICENSE\r\nnpm-debug.log\r\ngit-debug.log"
},
{
"path": "LICENSE",
"chars": 1065,
"preview": "MIT License\n\nCopyright (c) 2017 hinesboy\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "LOG.md",
"chars": 13813,
"preview": "# 更新日志\r\n- **2.10.4** (21.12.16) \r\n - refactor: provides a standard interface to get markdown-it by @jiawulin001 in ht"
},
{
"path": "README-EN.md",
"chars": 13359,
"preview": "# mavonEditor\r\n| Vue2 | [](https://www.npmjs.com/package/mav"
},
{
"path": "README.md",
"chars": 12964,
"preview": "# mavonEditor\r\n\r\n| Vue2 | [](https://www.npmjs.com/package/m"
},
{
"path": "SECURITY.md",
"chars": 717,
"preview": "# Security Policy\n\n## Supported Versions\n\nSecurity is of the highest importance and all security vulnerabilities or susp"
},
{
"path": "_config.yml",
"chars": 26,
"preview": "theme: jekyll-theme-cayman"
},
{
"path": "doc/cn/images.md",
"chars": 333,
"preview": "## 图片展示\n\n### PC\n\n\n\n\n\n\n\n###"
},
{
"path": "doc/cn/markdown.md",
"chars": 708,
"preview": "## Markdown-It\n\n### 获取mavonEditor中的markdown-it对象\n\n#### 方法1 通过全局引入的mavonEditor获取\n```javascript\n import MavonEditor from "
},
{
"path": "doc/cn/no-cnd.md",
"chars": 3403,
"preview": "### 本地按需加载\n如果你想自己引入而不希望`mavon-editor`加载的话，可以将`externalLink`设置为`false`.\n\n如果想本地按需加载，你需要安装`copy-webpack-plugin`插件(`npm inst"
},
{
"path": "doc/cn/upload-images.md",
"chars": 4370,
"preview": "### 图片上传\n\n#### 方式1：图片上传至文件服务器\n\n> 每次添加图片触发上传\n```javascript\n<template>\n <mavon-editor ref=md @imgAdd=\"$imgAdd\" @imgDel="
},
{
"path": "doc/cn/use.md",
"chars": 1870,
"preview": "### Use (如何引入)\n\n#### 方法1\n`index.js`:\n```javascript\n // 全局注册\n // import with ES6\n import Vue from 'vue'\n impo"
},
{
"path": "doc/en/images.md",
"chars": 366,
"preview": "## Example Pictures\n### PC\n\n\n\n\n\n![PC](../../img/en/en-hel"
},
{
"path": "doc/en/markdown.md",
"chars": 747,
"preview": "## Markdown-It\n\n### Get the markdown-it object of mavonEditor\n\n#### method 1: Global Registration\n```javascript\n impor"
},
{
"path": "doc/en/no-cnd.md",
"chars": 4260,
"preview": "### Local on-demand loading\nYou can set `externalLink` to` false` if you want to introduce yourself without wanting `mav"
},
{
"path": "doc/en/upload-images.md",
"chars": 4598,
"preview": "### Upload images\n\n#### method 1: Upload to File server\n\n> Each time you add a image to trigger the upload\n```javascript"
},
{
"path": "doc/en/use.md",
"chars": 1992,
"preview": "### Use\n\n#### method 1\n`index.js`:\n```javascript\n // Global Registration\n // import with ES6\n import Vue from '"
},
{
"path": "jest.config.js",
"chars": 782,
"preview": "module.exports = {\n transformIgnorePatterns: [\"<rootDir>/node_modules/(?!auto-textarea|@vue|src)\"],\n testMatch: [\n "
},
{
"path": "mavon-editor.d.ts",
"chars": 249,
"preview": "import { Component } from \"vue\";\ninterface VueMavonEditor {\n markdownIt: any;\n mavonEditor: Component;\n LeftToolbar: "
},
{
"path": "package.json",
"chars": 3934,
"preview": "{\n \"name\": \"mavon-editor\",\n \"version\": \"2.10.5\",\n \"description\": \"Vue markdown editor\",\n \"main\": \"dist/mavon-editor."
},
{
"path": "src/components/md-toolbar-left.vue",
"chars": 21785,
"preview": "<template>\n <div class=\"v-left-item\">\n <slot name=\"left-toolbar-before\" />\n <button :disabled=\"!editabl"
},
{
"path": "src/components/md-toolbar-right.vue",
"chars": 3920,
"preview": "<template>\r\n <div class=\"v-right-item\">\r\n <slot name=\"right-toolbar-before\" />\r\n <button type=\"button"
},
{
"path": "src/dev/app.vue",
"chars": 14371,
"preview": "<template>\n <div id=\"app\">\n <select @change=\"opchange\" class=\"page-lang\">\n <option value=\"zh-CN\">简体"
},
{
"path": "src/dev/assets/config.js",
"chars": 1109,
"preview": "/**\n * Created by zhy on 2017/5/11.\n */\nimport help_zh_CN from './lang/zh-CN/help_zh-CN.md'\nimport help_zh_TW from './la"
},
{
"path": "src/dev/assets/lang/de/help_de.md",
"chars": 2661,
"preview": "@[toc](Catalog)\n\nMarkdown Handbuch\n===\n> Details: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **Fett*"
},
{
"path": "src/dev/assets/lang/de/words_de.json",
"chars": 1796,
"preview": "{\r\n \"start_editor\": \"Bearbeitung beginnen...\",\r\n \"navigation_title\": \"Navigation\",\r\n \"tl_bold\": \"Fett\",\r\n \"tl_italic"
},
{
"path": "src/dev/assets/lang/en/help_en.md",
"chars": 2544,
"preview": "@[toc](Catalog)\n\nMarkdown Guide\n===\n> Detailed: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **Bold**\n"
},
{
"path": "src/dev/assets/lang/en/words_en.json",
"chars": 1683,
"preview": "{\r\n \"start_editor\": \"Begin editing...\",\r\n \"navigation_title\": \"Navigation\",\r\n \"tl_bold\": \"Bold\",\r\n \"tl_italic\": \"Ita"
},
{
"path": "src/dev/assets/lang/fr/help_fr.md",
"chars": 2564,
"preview": "@[toc](Catalogue)\n\nGuide Markdown\n==============\n> Détail : [http://commonmark.org/help/](http://commonmark.org/help/)\n\n"
},
{
"path": "src/dev/assets/lang/fr/words_fr.json",
"chars": 1785,
"preview": "{\n \"start_editor\": \"Début d'édition...\",\n \"navigation_title\": \"Navigation\",\n \"tl_bold\": \"Gras\",\n \"tl_italic\": \"Itali"
},
{
"path": "src/dev/assets/lang/pt-BR/help_pt-BR.md",
"chars": 2647,
"preview": "@[toc](Directory)\n\nGuia Markdown\n===\n> Detalhes: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **Negrit"
},
{
"path": "src/dev/assets/lang/pt-BR/words_pt-BR.json",
"chars": 1677,
"preview": "{\n\t\"start_editor\": \"Começar edição...\",\n\t\"navigation_title\": \"Navegação\",\n\t\"tl_bold\": \"Negrito\",\n\t\"tl_italic\": \"Itálico\""
},
{
"path": "src/dev/assets/lang/ru/help_ru.md",
"chars": 3032,
"preview": "@[toc](Catalog) \n \nMarkdown помощь \n=== \n> Подробнее: [http://commonmark.org/help/](http://commonmark.org/help/) \n "
},
{
"path": "src/dev/assets/lang/ru/words_ru.json",
"chars": 1825,
"preview": "{\n \"start_editor\": \"Начните редактирование...\",\n \"navigation_title\": \"Навигация\",\n \"tl_bold\": \"Полужирный\",\n \"tl_ita"
},
{
"path": "src/dev/assets/lang/zh-CN/help_zh-CN.md",
"chars": 2106,
"preview": "@[toc](目录)\n\nMarkdown 语法简介\n=============\n> [语法详解](http://commonmark.org/help/)\n\n## **粗体**\n```\n**粗体**\n__粗体__\n```\n## *斜体*\n`"
},
{
"path": "src/dev/assets/lang/zh-CN/words_zh-CN.json",
"chars": 1419,
"preview": "{\r\n \"start_editor\": \"开始编辑...\",\r\n \"navigation_title\": \"导航目录\",\r\n \"tl_bold\": \"粗体\",\r\n \"tl_italic\": \"斜体\",\r\n \"tl_header\":"
},
{
"path": "src/dev/assets/lang/zh-TW/help_zh-TW.md",
"chars": 2106,
"preview": "@[toc](目錄)\n\nMarkdown 語法簡介\n=============\n> [語法詳解](http://commonmark.org/help/)\n\n## **粗體**\n```\n**粗體**\n__粗體__\n```\n## *斜體*\n`"
},
{
"path": "src/dev/assets/lang/zh-TW/words_zh-TW.json",
"chars": 1419,
"preview": "{\r\n \"start_editor\": \"開始編輯...\",\r\n \"navigation_title\": \"導航目錄\",\r\n \"tl_bold\": \"粗體\",\r\n \"tl_italic\": \"斜體\",\r\n \"tl_header\":"
},
{
"path": "src/dev/demo.vue",
"chars": 721,
"preview": "<template>\n <div>\n <div class=\"navigate\">\n <span @click=\"viewIndex = 1\">Full demo</span>\n <span @click=\"vi"
},
{
"path": "src/dev/editor.vue",
"chars": 1428,
"preview": "<template>\n <div class=\"container\">\n <div id=\"editor\">\n <mavon-editor style=\"height: 100%\" v-model="
},
{
"path": "src/dev/index.html",
"chars": 283,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>md-test</title>\n <meta name=\"viewport\" "
},
{
"path": "src/dev/index.js",
"chars": 423,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-04T23:26:08+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/index.js",
"chars": 602,
"preview": "/**\r\n * Created by zhy on 2017/4/1.\r\n */\r\n'use strict';\r\n\r\n/**\r\n * mavonEditor\r\n * @author hinesboy\r\n */\r\nconst mavonEdi"
},
{
"path": "src/lib/config.js",
"chars": 2446,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-06T21:40:39+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/core/extra-function.js",
"chars": 19643,
"preview": "/**\r\n * @Author: HuaChao Chen <chc>\r\n * @Date: 2017-06-14T23:04:34+08:00\r\n * @Email: chenhuachaoxyz@gmail.com\r\n * @Fi"
},
{
"path": "src/lib/core/highlight.js",
"chars": 3446,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-06-16T21:01:47+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/core/hljs/lang.hljs.css.js",
"chars": 1247,
"preview": "export default {\n agate: 1,\n androidstudio: 1,\n 'arduino-light': 1,\n arta: 1,\n ascetic: 1,\n 'atom-one-dark': 1,\n "
},
{
"path": "src/lib/core/hljs/lang.hljs.js",
"chars": 7246,
"preview": "export default {\n '1c': '1c',\n 'abnf': 'abnf',\n 'accesslog': 'accesslog',\n 'actionscript': 'actionscript',\n "
},
{
"path": "src/lib/core/keydown-listen.js",
"chars": 11480,
"preview": "/**\r\n * @Author: HuaChao Chen <CHC>\r\n * @Date: 2017-05-03T00:31:20+08:00\r\n * @Email: chenhuachaoxyz@gmail.com\r\n * @Fi"
},
{
"path": "src/lib/core/markdown.js",
"chars": 2850,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-03T00:31:20+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/core/onecolumn-event.js",
"chars": 6332,
"preview": "/**\r\n * Created by zhy on 2017/4/24.\r\n */\r\n/**\r\n * keydown enter\r\n */\r\nexport const onecolumnKeyDownEnter = ($event , $v"
},
{
"path": "src/lib/core/sanitizer.js",
"chars": 819,
"preview": "import { FilterXSS } from 'xss';\n\nlet xssHandler;\n\nfunction mavoneditor_sanitizer(state) {\n if (!xssHandler) {\n retu"
},
{
"path": "src/lib/core/to-markdown.js",
"chars": 4133,
"preview": "/**\n * @Author: HuaChao Chen <chc>\n * @Date: 2017-05-03T00:31:20+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/css/markdown.css",
"chars": 15488,
"preview": "@font-face {\n font-family: octicons-link;\n src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACF"
},
{
"path": "src/lib/css/mavon-editor.styl",
"chars": 7374,
"preview": " border-color = 1px solid #F2F6FC\r\n op-height = 40px\r\n textarea:disabled\r\n background-color #ffffff\r\n\r\n /* 路由内容 *"
},
{
"path": "src/lib/css/md.css",
"chars": 508,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-05T15:57:16+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/css/scroll.styl",
"chars": 521,
"preview": "scrollbar()\r\n &.scroll-style::-webkit-scrollbar\r\n width 6px\r\n background-color #e5e5e5\r\n &.scroll-style::-webkit"
},
{
"path": "src/lib/font/LICENSE.txt",
"chars": 180,
"preview": "Font license info\n\n\n## Font Awesome\n\n Copyright (C) 2016 by Dave Gandy\n\n Author: Dave Gandy\n License: SIL ()\n"
},
{
"path": "src/lib/font/README.txt",
"chars": 2876,
"preview": "This webfont is generated by http://fontello.com open source project.\n\n\n================================================"
},
{
"path": "src/lib/font/config.json",
"chars": 4340,
"preview": "{\n \"name\": \"\",\n \"css_prefix_text\": \"fa-mavon-\",\n \"css_use_suffix\": false,\n \"hinting\": true,\n \"units_per_em\": 1000,\n"
},
{
"path": "src/lib/font/css/animation.css",
"chars": 1857,
"preview": "/*\n Animation example, for spinners\n*/\n.animate-spin {\n -moz-animation: spin 2s infinite linear;\n -o-animation: spin"
},
{
"path": "src/lib/font/css/fontello-codes.css",
"chars": 1798,
"preview": "\n.fa-mavon-bold:before { content: '\\e800'; } /* '' */\n.fa-mavon-italic:before { content: '\\e801'; } /* '' */\n.fa-mavon"
},
{
"path": "src/lib/font/css/fontello-embedded.css",
"chars": 36040,
"preview": "@font-face {\n font-family: 'fontello';\n src: url('../font/fontello.eot?30047687');\n src: url('../font/fontello.eot?30"
},
{
"path": "src/lib/font/css/fontello-ie7-codes.css",
"chars": 3441,
"preview": "\n.fa-mavon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }\n.fa-mavon-it"
},
{
"path": "src/lib/font/css/fontello-ie7.css",
"chars": 3700,
"preview": "[class^=\"fa-mavon-\"], [class*=\" fa-mavon-\"] {\n font-family: 'fontello';\n font-style: normal;\n font-weight: normal;\n \n"
},
{
"path": "src/lib/font/css/fontello.css",
"chars": 3544,
"preview": "@font-face {\n font-family: 'fontello';\n src: url('../font/fontello.eot?60486047');\n src: url('../font/fontello.eot?60"
},
{
"path": "src/lib/font/demo.html",
"chars": 12051,
"preview": "<!DOCTYPE html>\n<html>\n <head><!--[if lt IE 9]><script language=\"javascript\" type=\"text/javascript\" src=\"//html5shim.go"
},
{
"path": "src/lib/lang/de/help_de.md",
"chars": 2661,
"preview": "@[toc](Catalog)\n\nMarkdown Handbuch\n===\n> Details: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **Fett*"
},
{
"path": "src/lib/lang/de/words_de.json",
"chars": 1796,
"preview": "{\r\n \"start_editor\": \"Bearbeitung beginnen...\",\r\n \"navigation_title\": \"Navigation\",\r\n \"tl_bold\": \"Fett\",\r\n \"tl_italic"
},
{
"path": "src/lib/lang/en/help_en.md",
"chars": 2544,
"preview": "@[toc](Catalog)\n\nMarkdown Guide\n===\n> Detailed: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **Bold**\n"
},
{
"path": "src/lib/lang/en/words_en.json",
"chars": 1683,
"preview": "{\r\n \"start_editor\": \"Begin editing...\",\r\n \"navigation_title\": \"Navigation\",\r\n \"tl_bold\": \"Bold\",\r\n \"tl_italic\": \"Ita"
},
{
"path": "src/lib/lang/fr/help_fr.md",
"chars": 2564,
"preview": "@[toc](Catalogue)\n\nGuide Markdown\n==============\n> Détail : [http://commonmark.org/help/](http://commonmark.org/help/)\n\n"
},
{
"path": "src/lib/lang/fr/words_fr.json",
"chars": 1785,
"preview": "{\n \"start_editor\": \"Début d'édition...\",\n \"navigation_title\": \"Navigation\",\n \"tl_bold\": \"Gras\",\n \"tl_italic\": \"Itali"
},
{
"path": "src/lib/lang/ja/help_ja.md",
"chars": 2475,
"preview": "@[toc](目次)\n\nMarkdown 文法ガイド\n===\n> Detailed: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **太字**\n```\n**太"
},
{
"path": "src/lib/lang/ja/words_ja.json",
"chars": 1475,
"preview": "{\r\n \"start_editor\": \"編集を始めてね！\",\r\n \"navigation_title\": \"ナビゲーション\",\r\n \"tl_bold\": \"太字\",\r\n \"tl_italic\": \"斜体\",\r\n \"tl_head"
},
{
"path": "src/lib/lang/kr/help_kr.md",
"chars": 2418,
"preview": "@[toc](Catalog)\n\n\n마크다운 가이드\n===\n> 자세히 보기: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **볼드체(굵게)**\n```\n"
},
{
"path": "src/lib/lang/kr/words_kr.json",
"chars": 1450,
"preview": "{\r\n \"start_editor\": \"작성해주세요.\",\r\n \"navigation_title\": \"네비게이션\",\r\n \"tl_bold\": \"굵게\",\r\n \"tl_italic\": \"기울임꼴\",\r\n \"tl_heade"
},
{
"path": "src/lib/lang/pt-BR/help_pt-BR.md",
"chars": 2647,
"preview": "@[toc](Directory)\n\nGuia Markdown\n===\n> Detalhes: [http://commonmark.org/help/](http://commonmark.org/help/)\n\n## **Negrit"
},
{
"path": "src/lib/lang/pt-BR/words_pt-BR.json",
"chars": 1677,
"preview": "{\n\t\"start_editor\": \"Começar edição...\",\n\t\"navigation_title\": \"Navegação\",\n\t\"tl_bold\": \"Negrito\",\n\t\"tl_italic\": \"Itálico\""
},
{
"path": "src/lib/lang/ru/help_ru.md",
"chars": 3032,
"preview": "@[toc](Catalog) \n \nMarkdown помощь \n=== \n> Подробнее: [http://commonmark.org/help/](http://commonmark.org/help/) \n "
},
{
"path": "src/lib/lang/ru/words_ru.json",
"chars": 1825,
"preview": "{\n \"start_editor\": \"Начните редактирование...\",\n \"navigation_title\": \"Навигация\",\n \"tl_bold\": \"Полужирный\",\n \"tl_ita"
},
{
"path": "src/lib/lang/zh-CN/help_zh-CN.md",
"chars": 2136,
"preview": "@[toc](目录)\n\nMarkdown 语法简介\n=============\n> [语法详解](http://commonmark.org/help/)\n\n## **目录**\n```\n@[toc](目录)\n```\n\n## **粗体**\n`"
},
{
"path": "src/lib/lang/zh-CN/words_zh-CN.json",
"chars": 1419,
"preview": "{\r\n \"start_editor\": \"开始编辑...\",\r\n \"navigation_title\": \"导航目录\",\r\n \"tl_bold\": \"粗体\",\r\n \"tl_italic\": \"斜体\",\r\n \"tl_header\":"
},
{
"path": "src/lib/lang/zh-TW/help_zh-TW.md",
"chars": 2106,
"preview": "@[toc](目錄)\n\nMarkdown 語法簡介\n=============\n> [語法詳解](http://commonmark.org/help/)\n\n## **粗體**\n```\n**粗體**\n__粗體__\n```\n## *斜體*\n`"
},
{
"path": "src/lib/lang/zh-TW/words_zh-TW.json",
"chars": 1419,
"preview": "{\r\n \"start_editor\": \"開始編輯...\",\r\n \"navigation_title\": \"導航目錄\",\r\n \"tl_bold\": \"粗體\",\r\n \"tl_italic\": \"斜體\",\r\n \"tl_header\":"
},
{
"path": "src/lib/mixins/markdown.js",
"chars": 4588,
"preview": "import hljsLangs from '../core/hljs/lang.hljs.js'\nimport {\n loadScript\n} from '../core/extra-function.js'\nimport sani"
},
{
"path": "src/lib/toolbar_left_click.js",
"chars": 5572,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-03T01:23:38+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/toolbar_right_click.js",
"chars": 2828,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-03T01:39:47+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "src/lib/util.js",
"chars": 1061,
"preview": "/**\n * Created by zhy on 2016/12/25.\n */\n/**\n * 深度拷贝对象\n * @param target\n * @param arg\n * @returns {*}\n * @constructor\n *"
},
{
"path": "src/mavon-editor.vue",
"chars": 27529,
"preview": "<template>\n <div :class=\"[{ 'fullscreen': s_fullScreen, 'shadow': boxShadow }]\" class=\"v-note-wrapper markdown-body\" "
},
{
"path": "tests/unit/__snapshots__/mavon-editor.spec.js.snap",
"chars": 7060,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`snapshot snapshot 1`] = `\n<div class=\"v-note-wrapper markdown-body "
},
{
"path": "tests/unit/base.spec.js",
"chars": 10974,
"preview": "import { mount } from '@vue/test-utils'\r\nimport MavonEditor from '@/mavon-editor.vue'\r\nimport autoTextarea from 'auto-te"
},
{
"path": "tests/unit/mavon-editor.spec.js",
"chars": 477,
"preview": "import { mount } from '@vue/test-utils'\nimport MavonEditor from '@/mavon-editor.vue'\nimport autoTextarea from 'auto-text"
},
{
"path": "webpack/webpack.base.js",
"chars": 6417,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-07T20:11:11+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "webpack/webpack.build.js",
"chars": 3285,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-04T23:21:48+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
},
{
"path": "webpack/webpack.dev.js",
"chars": 1584,
"preview": "/**\n * @Author: HuaChao Chen <CHC>\n * @Date: 2017-05-04T23:21:48+08:00\n * @Email: chenhuachaoxyz@gmail.com\n * @Filena"
}
]
About this extraction
This page contains the full source code of the hinesboy/mavonEditor GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 104 files (399.4 KB), approximately 135.5k tokens, and a symbol index with 42 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.