【常用 JS 插件】Editor.md 实现 Markdown 编辑器

Editor.md

Editor.md 是一个Markdown 编辑器,单纯基于前端 JavaScript,无需后台代码加持,适用于任何语言。


下载地址

http://pandao.github.io/editor.md/examples/

从上面的地址下载 Editor.md

在这里插入图片描述


页面引用

CSS 部分

<link rel="stylesheet" href="/static/admin/assets/css/editormd.css"/>

JS 部分

<script src="/static/admin/assets/js/editormd.js"></script>

使用方法

初始化设置:

<script type="text/javascript">
   $(function() {
       var testEditor = editormd("test-editormd", {
           width: "90%",
           height: 640,
           markdown : "",
           path : '/static/admin/assets/plugins/editor/lib/',
           //dialogLockScreen : false,   // 设置弹出层对话框不锁屏,全局通用,默认为 true
           //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层,全局通用,默认为 true
           //dialogDraggable : false,    // 设置弹出层对话框不可拖动,全局通用,默认为 true
           //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度,全局通用,默认值为 0.1
           //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为 #fff
           imageUpload : true,
           imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
           imageUploadURL : "/upload",

           /*
            上传的后台只需要返回一个 JSON 数据,结构如下:
            {
               success : 0 | 1,           // 0 表示上传失败,1 表示上传成功
               message : "提示的信息,上传成功或上传失败及错误信息等。",
               url     : "图片地址"        // 上传成功时才返回
            }
            */
       });
   });
</script>

HTML 结构代码

<div id="layout">
     <div id="test-editormd">
          <textarea style="display:none;"></textarea>
      </div>
</div>

效果演示

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37581282/article/details/83999162
0条评论
添加一条新回复