layui easymde实现markdown富文本编辑器效果代码

代码语言:html

所属分类:其他

代码描述:layui easymde实现markdown富文本编辑器效果代码

代码标签: layui easymde markdown 富文本 编辑器

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/css/easymde.min.css" />

    <style>
        .CodeMirror{
        		  height: 500px;
        	  }
              .get-content,
              .get-html-content {
                margin: 15px;
              }
    </style>
</head>

<body>
    <button class="layui-btn layui-btn-normal get-content">
      获取编辑器文本
    </button>
    <button class="layui-btn layui-btn-normal get-html-content">
      获取编辑器内容HTML
    </button>
    <button class="layui-btn layui-btn-normal get-html-number">
	  获取编辑器文字数量
	</button>

    <button class="layui-btn layui-btn-normal get-textarea">
	  获取文本域内容
	</button>

    <textarea id="detail"></textarea>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<script>
                layui.config({
                base: "//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/", //假设这是你存放拓展模块的根目录
              }).extend({
        			easymde:'easymde/easymde',
        	  })
</script>
 <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/highlight-min.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/codemirror.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/continuelist.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/tablist.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/fullscreen.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/markdown.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/overlay.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/placeholder.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/markdown.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/gfm.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/xml.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/typo.js"></script>
     <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/spell-checker.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/layui/layui_exts/easymde/marked.js"></script>


    <script>
        //全局配置
  
        		

              layui.use(["easymde", "jquery"], function () {
                var easymde = layui.easymde;
                const $ = layui.jquery;
        		
                easymde.init({
                  element: $('#detail')[0], //文本域ID document.getElementById("detail")
                  shortcut: false, //是否开启快捷键
                  upload: {
                    url: "http://localhost:9999/file/upload", //默认url /file/upload
                    size: 500,
                    response: {
                      status: "status".........完整代码请登录后点击上方下载按钮下载查看

网友评论0