• SimpleMDE编辑器 + 提取HTML + 美化输出


    开发步骤:

    1. 安装和引入(npm或者bower都可以)

    bower install simplemde --save
    //css - debug目录下为开发版本 
    <link rel="stylesheet" href="bower_components/simplemde/debug/simplemde.css" />
    //js
    <script src="/bower_components/simplemde/debug/simplemde.js"></script>

    2. 部署DOM和编辑器初始化

        <div class="form-group">
            <textarea name="field" id="fieldTest" cols="30" rows="10"></textarea>
        </div>
        var simplemde = new SimpleMDE({
            element: document.getElementById("fieldTest"),
            autoDownloadFontAwesome: false,
            status: false
        });

    参数:(不止以下3个,详细请参考官方文档https://github.com/sparksuite/simplemde-markdown-editor

    element: textarea的DOM对象 
    autoDownloadFontAwesome: 自动下载FontAwesome,设为false为不下载
    status: 编辑器底部的状态栏,我不需要就设置为false了

    这里说明一下:

    这个插件有点坑的地方就是UI,工具栏是用FontAwesome的图标的,默认是在线获取FontAwesome,然而在中国地区,下载7.9kb的FontAwesome居然要10s,这让人很不爽,所以autoDownloadFontAwesome这个参数我们最好加上,然后切记,一定,记住安装引入一下FontAwesome:

    bower install fontawesome --save
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

    如果成功的话,应该看到这样的东西!

    编辑器如有需要可以加上css最小高度:

    .CodeMirror, .CodeMirror-scroll {
      min-height: 300px;
    }

    3. 获取内容及提取HTML

    获取内容使用simplemde.value()即可。不过获取到的是带markdown语法的字符串,所以我们需要转换一下变成HTML。
    提取HTML真的,文档我好像没找到接口,不过经过分析simplemde.js,不经意地发现了一个渲染函数叫markdown(),是继承到SimpleMDE里面去的,也就是说,实例化的simplemde是有markdown方法的,一切就变得简单了!

    var testPlain = simplemde.value(), 
        testMarkdown = simplemde.markdown(testPlain);

    然后testMarkdown就是我们要的html了!该干嘛干嘛。

    4. 美化渲染后的HTML

    你会发现,获取出来的HTML,不好看!诶,我已经帮你们从github那里偷了个css回来了,拿去用便是。使用方法:

    bower install github-markdown-css --save
    <link rel="stylesheet" href="bower_components/github-markdown-css/github-markdown.css" />
    //在输出的地方加上markdown-body的css类即可
    //下面的代码是给编辑器预览输出的容器加的。
    $(".editor-preview-side").addClass("markdown-body");

    备注:这个css的font-family好像是没有关于中文字体设置的,所以我们要在里面加上一个"Microsoft Yahei"。

    最终效果图如下:

  • 相关阅读:
    ui自动化---select标签和浏览器等待
    ui自动化--鼠标操作ActionChains
    ui自动化---WebDriverApi接口
    ui自动化---CssSelector
    ui自动化--xpath
    html基础:jquery的ajax获取form表单数据
    grep使用方法
    VI打开和编辑多个文件的命令 分屏操作
    C语言编译器 cc 编译原理
    zabbix的mysql优化后的配置文件
  • 原文地址:https://www.cnblogs.com/brady-wang/p/8507763.html
Copyright © 2020-2023  润新知