酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【阿里云】采购季上云仅¥223/3年

html+js实现markdown编辑器效果方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-23
本篇文章主要介绍了html+js实现markdown编辑器效果方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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" />
<div id="test-editor">
<textarea style="display:none;" class="content-markdown" name="content-markdown"></textarea>
</div>
<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", "jpeg", "gif", "png", "bmp", "webp"],    //允许上传的文件格式
        imageUploadURL : "/index.php?r=markdown/upload"                 //上传的后台服务器路径
    });
});

后端上传的简单实现如下(这里上传我使用了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');//file为上传表单的name名
if ($upload) {
    return [
        'success' => 1,
        'message' => '上传成功',
        'url' => 'upload/upload.jpg'
    ];
} else {
    return [
        'success' => 0,
        'message' => '上传失败',
    ];
}
 


根据如上代码就可以实现在markdown编辑器中上传本地图片

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • 详解HTML5 HTMLCollection和NodeList的区别

    详解HTML5 HTMLCollection和NodeList的区别

    获取 HTMLCollection 对象 getElementsByTagName() 方法返HTMLCollection对象。 HTMLCollection 对象类似包含 HTML 元素的一个数组。 注意: HTMLCollection 不是一个数组! HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像......
    05-01
  • canvas绘制太极图的实现

    canvas绘制太极图的实现

    看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下 css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000;}#canvas{ animation: rotate 6s linear infinite; }/* 给太极图设置旋转动画 */@keyframes......
    05-01
  • html5中使用hotcss.js实现手机端自适配

    html5中使用hotcss.js实现手机端自适配

    Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss 简介 使用动态的HTML根字体大小和动态的viewport scale。 遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的。 1.......
    04-25
  • 详解HTML中meta标签及Keywords

    详解HTML中meta标签及Keywords

    关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处,还有欺诈的嫌疑。 键字标签K......
    04-21
  • 移动端h5页面根据屏幕适配的四种方案总结!

    移动端h5页面根据屏幕适配的四种方案总结!

    方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案: https://github.com/amfe/lib-flexible (此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-width始......
    04-21
  • html5 canvas实现光线沿不规则路径运动的代码

    html5 canvas实现光线沿不规则路径运动的代码

    svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都非常简单,但对于100%实现设计师给出的效果有很大的距离 使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走 !DOCTYPE html html he......
    04-21
  • HTML5使用可选样式表为网站或应用添加黑暗模式

    HTML5使用可选样式表为网站或应用添加黑暗模式

    为你的站点添加黑暗模式 黑暗模式 已经应用在了许多流行的网站和应用程序中,诸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你该怎样在自己的网站上添加这种模式呢? 我一直非常喜欢动态的网站颜色主题切换器。它们可以让你选择......
    04-07
  • html5给汉字加拼音加进度条的实现

    html5给汉字加拼音加进度条的实现

    一、给汉字加拼音 rubyrt demo一眼便知: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 !DOCTYPE html html head meta charset = utf-8 / title / title / head body style = position: relative;margin: 0 auto; margin-top: 100px;text-align: cen......
    04-07
  • canvas绘制树形结构可视图形

    canvas绘制树形结构可视图形

    如下图,最近项目中需要这么个树形结构可视化数据图形,找了好多可视化插件,没有找到可用的,所以就自己画了一个,代码如下。 树形分支是后端接口返回数据渲染,可展示多条; 代码可拓展,可封装; 点击节点可查看备注; canvas id=canv......
    04-03
  • html5图片预加载的实现代码

    html5图片预加载的实现代码

    在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下: ? 1 2 3 4 5 var canvas = document.getElementById( canvas ); var context = canvas.getContext( 2d ); var image = new Image(); image.src = images/......
    03-26

最新更新