Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>样例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/le-markdown-editor@1.1.4/dist/leEditor.js"></script>
<!-- <script src="../../dist/leEditor.js"></script>-->
</head>
<body>
<div id="app" :style="appStyle">
<a href="http://106.54.92.121/preview.html">预览组件点这里</a>
<div id="editor-main">
<!-- <le-editor v-model="value" :image-uploader="imageUploader" @uploadImg="uploadImg" @save="save"></le-editor>-->
<le-editor v-model="value" :indent-unit="8" :fullscreen="true" :hljs-css="hljsCss" :image-uploader="imageUploader" @save="save"></le-editor>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data() {
return {
hljsCss: 'agate',
value: '@[TOC](导航)\n' +
'Markdown 语法简介\n' +
'# 字符效果、分隔线\n' +
'----\n' +
'\n' +
'~~删除~~\n' +
'\n' +
'*斜体字* _斜体字_\n' +
'\n' +
'**粗体** __粗体__\n' +
'\n' +
'***粗斜体*** ___粗斜体___\n' +
'\n' +
'上标：X<sup>2</sup>，X^2^\n' +
'下标：O<sub>2</sub>， X~2~\n' +
'\n' +
'**缩写(同HTML的abbr标签)**\n' +
'\n' +
'The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.\n' +
'\n' +
'# 引用\n' +
'\n' +
'> 引用文本\n' +
'\n' +
'# 锚点与链接 Links\n' +
'[普通链接](https://gitee.com/Chave-Z/vue-md-editor/)\n' +
'\n' +
'[普通链接带标题](https://gitee.com/Chave-Z/vue-md-editor/ "普通链接带标题")\n' +
'\n' +
'直接链接：<https://gitee.com/Chave-Z/vue-md-editor>\n' +
'\n' +
'# 代码高亮\n' +
'\n' +
'## 行内代码\n' +
'\n' +
'\n' +
'执行命令：`Inline code...`\n' +
'\n' +
'## 缩进风格\n' +
'\n' +
' <toolbar ref="toolbar">\n' +
' </toolbar>\n' +
'\n' +
'## JS代码\n' +
'```javascript\n' +
'function test() {\n' +
'\tconsole.log("Hello world!");\n' +
'}\n' +
'```\n' +
'\n' +
'## HTML 代码 HTML codes\n' +
'```html\n' +
'<!DOCTYPE html>\n' +
'<html>\n' +
' <head>\n' +
' <mate charest="utf-8" />\n' +
' <title>Hello world!</title>\n' +
' </head>\n' +
' <body>\n' +
' <h1 class="text-xxl">Hello world!</h1>\n' +
' </body>\n' +
'</html>\n' +
'```\n' +
'# 图片 Images\n' +
'## 图片 Image\n' +
'\n' +
'\n' +
'## 图片加链接 (Image + Link)\n' +
'\n' +
'[](https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png "markdown")\n' +
'\n' +
'---\n' +
'\n' +
'# 列表 Lists\n' +
'\n' +
'## 无序列表（减号）Unordered Lists (-)\n' +
'\n' +
'- 列表一\n' +
'- 列表二\n' +
'- 列表三\n' +
'\n' +
'## 无序列表（星号）Unordered Lists (*)\n' +
'\n' +
'* 列表一\n' +
'* 列表二\n' +
'* 列表三\n' +
'\n' +
'## 无序列表（加号和嵌套）Unordered Lists (+)\n' +
'+ 列表一\n' +
'+ 列表二\n' +
' + 列表二-1\n' +
' + 列表二-2\n' +
' + 列表二-3\n' +
'+ 列表三\n' +
' * 列表一\n' +
' * 列表二\n' +
' * 列表三\n' +
'\n' +
'## 有序列表 Ordered Lists (-)\n' +
'\n' +
'1. 第一行\n' +
'2. 第二行\n' +
'3. 第三行\n' +
'\n' +
'# GFM task list\n' +
'\n' +
'- [x] GFM task list 1\n' +
'- [x] GFM task list 2\n' +
'- [ ] GFM task list 3\n' +
' - [ ] GFM task list 3-1\n' +
' - [ ] GFM task list 3-2\n' +
' - [ ] GFM task list 3-3\n' +
'- [ ] GFM task list 4\n' +
' - [ ] GFM task list 4-1\n' +
' - [ ] GFM task list 4-2\n' +
'\n' +
'----\n' +
'\n' +
'# 绘制表格\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| ------------ | ------------ |\n' +
'| 内容内容 | 内容内容 |\n' +
'| 内容 | 内容 |\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| :------------ | :------------ |\n' +
'| 内容内容内容内容 | 内容内容内容内容 |\n' +
'| 内容 | 内容 |\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| :------------: | :------------: |\n' +
'| 内容内容内容内容 | 内容内容内容内容 |\n' +
'| 内容 | 内容 |\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| ------------: | ------------: |\n' +
'| 内容内容内容内容 | 内容内容内容内容 |\n' +
'| 内容 | 内容 |\n' +
'----\n' +
'\n' +
'# Emoji表情\n' +
'访问 [webfx](https://www.webfx.com/tools/emoji-cheat-sheet/) 参考更多使用方法。\n' +
'\n' +
':sunny: :umbrella: :cloud: :snowflake: :snowman: :zap: :cyclone: :foggy: :ocean: :cat: :dog:\n' +
'# LaTeX 公式\n' +
'\n' +
'`$` 表示行内公式： \n' +
'\n' +
'质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。\n' +
'\n' +
'`$$ `表示整行公式：\n' +
'\n' +
'$$\\sum_{i=1}^n a_i=0$$\n' +
'\n' +
'$$f(x_1,x_x,\\ldots,x_n) = x_1^2 + x_2^2 + \\cdots + x_n^2 $$\n' +
'\n' +
'$$\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}$$\n' +
'\n' +
'访问 [MathJax](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 参考更多使用方法。\n' +
'\n' +
'# 流程图\n' +
'\n' +
'```flow\n' +
'start=>start: 开始\n' +
'loginInfo=>inputoutput: 登录数据\n' +
'verifyLogin=>subroutine: 登录验证\n' +
'isSuccess=>condition: 验证成功？\n' +
'respondSuccess=>operation: 响应成功\n' +
'responseFailure=>operation: 响应失败\n' +
'end=>end: 结束\n' +
'\n' +
'start->loginInfo->verifyLogin->isSuccess\n' +
'isSuccess(yes)->respondSuccess->end\n' +
'isSuccess(no)->responseFailure->end\n' +
'```\n' +
'\n' +
'# 视频、音频\n' +
'\n' +
'<video id="video"\n' +
' controls=""\n' +
' preload="none"\n' +
' width="100%"\n' +
' >\n' +
' <source id="mp4"\n' +
' src="https://www.w3school.com.cn/i/movie.ogg"\n' +
' type="video/mp4">\n' +
'</video>\n' +
'\n' +
'<audio id="audio"\n' +
' controls=""\n' +
' preload="none">\n' +
' <source id="mp3"\n' +
' src="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_849867&response=res&type=convert_url&">\n' +
'</audio>\n' +
'\n' +
'# 脚注\n' +
'生成一个脚注1[^footnote].\n' +
'生成一个脚注2[^foot].\n' +
'[^footnote]: 这里是 **脚注** 的 *内容*.\n' +
' [^foot]:这里是**脚注2**的*内容*.\n',
appStyle: {
// width: document.documentElement.clientWidth + 'px',
// height: document.documentElement.clientHeight + 'px'
},
// 自定义
// imageUploader: {
// custom: true,
// fileType: 'file',
// fileNameType: 'uuid',
// imagePrefix: 'https://cdn.jsdelivr.net/gh/', // 图片前缀地址
// }
imageUploader: {
custom: false,
fileType: 'file',
fileNameType: 'uuid',
imagePrefix: 'http://106.54.92.121:80', // 图片前缀地址
type: 'server',
url: 'http://106.54.92.121:82/upload'
}
}
},
methods: {
// 自定义
// uploadImg: function ($vm, file, fileName) {
// console.log($vm)
// console.log(file)
// console.log(fileName)
// // 添加图片
// // 两个参数 第一个是图片访问路径 第二个是文件名
// $vm.insertImg(`${$vm.config.imageUploader.imagePrefix}${fileName}`, fileName)
// },
save: function (val) {
// 获取预览文本
console.log(this.value)
console.log(val)
}
},
})
</script>
<style>
#app {
width: 1200px;
height: 500px;
margin: 50px auto;
}
/*设置编辑器宽高*/
#editor-main {
color: #2c3e50;
width: 100%;
height: 100%;
}
</style>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )