html markdown 超链接对比(html+js 实现markdown编辑器效果)
类别:Web前端 浏览量:2954
时间:2021-10-06 01:12:38 html markdown 超链接对比
html+js 实现markdown编辑器效果markdown的Editor.md插件官方网站:https://pandao.github.io/editor.md/
一:下载Editor.md
1:进入官网直接进行下载
github下载地址:https://github.com/pandao/editor.md
2:使用npm进行下载
npm install editor.md
下载下来的文件结构如下:
二:Editor.md的简单使用
1:前提:
引入css
<link rel="stylesheet" href="editormd/css/editormd.css" />
引入js
<script src="js/jquery.min.js"></script> <script src="editormd/editormd.min.js"></script>
2:html+js实现markdown效果
<link rel="stylesheet" href="editormd/css/editormd.css" /> <li id="test-editor"> <textarea style="display:none;" class="content-markdown" name="content-markdown"></textarea> </li> <script src="js/jquery.min.js"></script> <script src="editormd/editormd.min.js"></script> <script type="text/javascript"> $(function() { var editor = editormd("test-editor", { width : "100%", //宽度,不填为100% height : "500px", //高度,不填为100% theme : "dark", //主题,不填为默认主题 path : "editormd/lib/", //editor.md插件的lib目录地址 saveHTMLToTextarea : true, // 保存 HTML 到 Textarea toolbarAutoFixed:true, //工具栏自动固定定位的开启与禁用 }); }); </script>
根据如上代码就可以实现markdown编辑器效果
但是如上代码没有本地上传图片功能,如果你需要本地上传图片功能,js代码修改如下:
$(function() { var editor = editormd("test-editor", { width : "100%", //宽度,不填为100% height : "500px", //高度,不填为100% theme : "dark", //主题,不填为默认主题 path : "editormd/lib/", //editor.md插件的lib目录地址 saveHTMLToTextarea : true, // 保存 HTML 到 Textarea toolbarAutoFixed:true, //工具栏自动固定定位的开启与禁用 imageUpload : true, //运行本地上传 imageFormats : [".jpg" alt="html markdown 超链接对比(html+js 实现markdown编辑器效果)" border="0" />
后端上传的简单实现如下(这里上传我使用了Yii框架的intervention/image插件)
Yii::$app->response->format = Response::FORMAT_JSON; $upload = \Intervention\Image\ImageManagerStatic::make($_FILES['editormd-image-file']['tmp_name'])->save('upload/upload.jpg" alt="html markdown 超链接对比(html+js 实现markdown编辑器效果)" border="0" />
根据如上代码就可以实现在markdown编辑器中上传本地图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5封闭ios(Html5 页面适配iPhoneX就是那么简单)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- html5可以做语音聊天吗(基于Html5实现的语音搜索功能)
- html5socket源码(五分钟学会HTML5的WebSocket协议)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- html5入门布局(吃透移动端 Html5 响应式布局)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- html5功能讲解(Html5定位终极解决方案)
- html的meta标签
- python 操作html(Python HTML解析模块HTMLParser用法分析爬虫工具)
- html的css中怎么选择第三个子元素(CSS中 opacity的设置影响了index层数的改变的问题总结推荐)
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- html文字标签设置(如何给HTML标签中的文本设置修饰线)
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
- 硕博期刊 SCI SSCI CSSCI分不清 一文带你看懂主流期刊分类(硕博期刊SCISSCI)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
- 每天1万吨牛奶倒进下水道,美国大萧条一幕重现(每天1万吨牛奶倒进下水道)
热门推荐
- sql语句无效数字(SQL中写入包含有英文单引号“ '' ”失败问题深入详解)
- css里margin是什么意思(正确理解CSS中的margin合并的用法)
- MVC中获取当前action、controller
- js的三种使用方法(JS带你深入领略Proxy的世界)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- php入门教程源代码修改教程(php+js实现的无刷新下载文件功能示例)
- python中求阶乘的代码(python 阶乘累加和的实例)
- html5应用的几个建议
- python零基础实战项目(十个Python练手的实战项目,学会这些Python就基本没问题了推荐)
- css高级使用技巧(全面解析CSS Media媒体查询使用操作推荐)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9