在项目中集成富文本编辑器

最新推荐文章于 2021-12-29 20:31:23 发布

遇见0和1

最新推荐文章于 2021-12-29 20:31:23 发布

阅读量762

点赞数

分类专栏：随笔记录文章标签： markdown

本文链接：https://blog.csdn.net/weixin_42365530/article/details/108650573

版权

随笔记录专栏收录该内容

13 篇文章 3 订阅

订阅专栏

作者公众号：遇见0和1
小程序：遇见0和1
Hexo博客：http://vogos.cn/

前言

现在学程序的都离不开 Markdown 语法了吧，Markdown 已经成为典型的转换为HTML的非正式规范和参考实现，现在市场上也出现了许多Markdown实现，在基本语法之上额外增加了表格，脚注，列表…等等许多新功能。

相对于 Word，Markdown 语法的简洁，高效，便捷，以及对代码格式的支持等等，实在是优于 Word 太多太多，当然 Word 还是有自己的优点的，只是对于我这种学程序的人更倾向于Markdown，看下面Markdown语法写的学习笔记，它不比Word香嘛😁😁😁

在这里插入图片描述
目前市场上有很多支持Markdown语法的在线和本地的富文本编辑器，例如：Typora、Simplenote、Laverna、有道云笔记，以及博客园，CSDN，简书，掘金，GitHub等等，其中Typora 是我最常用的一款本地编辑器。

富文本编辑器

既然Markdown那么流行，富文本编辑器也是博客系统中必不可少的一个重要业务点，那怎么在项目中集成富文本编辑器来支持Markdown语法呢？

先介绍目前市场上比较流行的几款富文本编辑器：

Editor.md ： https://pandao.github.io/editor.md/
在这里插入图片描述
Simditor：https://simditor.tower.im/

在这里插入图片描述
Kindeditor：http://kindeditor.net/demo.php

在这里插入图片描述
wangEditor：http://www.wangeditor.com/

在这里插入图片描述
CKEditor 5：https://ckeditor.com/ckeditor-5/demo/

在这里插入图片描述
上面只列出了五个，市场上其实还有非常多的富文本编辑器，如 summernote、jodit 等，这里就不一一介绍了，由于我不是每一个都使用过，这里也不对比他们的优缺点了，想要学习的可到他们对应的官网了解，这里只介绍我常用的一款 Editor.md

集成Editor.md

如下在项目中集成 Editor.md 的效果，左侧编辑，右侧实时预览，非常的清新便捷，Editor.md 也提供了很多属性可以在初始化时自定义。

在这里插入图片描述
使用Editor.md：

1、打开 Editor.md 官网 https://pandao.github.io/editor.md/ 下载它的依赖文件与示例，这里是在GitHub下载，不能合理上网的小伙伴可能下载的非常慢，也可以在我的公众号回复关键字 editormd 获取我下载好的压缩包。

在这里插入图片描述
2、下载解压后会得到如下目录文件，下面只介绍几个重要的文件目录

在这里插入图片描述
3、添加到自己的项目中：如下，上面介绍的几个重要文件和目录，除了 examples 外都复制到自己的项目中

在这里插入图片描述
4、注意：Editor.md 需要依赖 jQuery ，所以在引入Editor.md的css和js文件之前，需要先引入jQuery的 js 文件，可以使用jQuery的在线CDN，也可以下载到本地引入

编辑器展示区域：

<div id="md-content" style="z-index: 1;clear: both;">
    <textarea placeholder="文章内容" name="content"></textarea>
</div>

初始化Editor.md：

<script type="text/javascript">

    //==== 初始化Editor.md插件, 定位到 md-content 节点 ======
    var contentEditor;
	$(function() {
    contentEditor = editormd("md-content", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
        // path    : "/plugins/editormd/lib/"
        path    : "./editormd/lib/",
        theme: "dark", //工具栏主题
        // previewTheme: "dark", //预览主题
        // editorTheme: "pastel-on-dark",//编辑主题
        emoji: true,                  // 开启表情包支持，默认关闭
        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,             // 开启流程图支持，默认关闭
        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
        //图片上传
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/blog/file/upload",
        onload : function() {
            console.log('markdown编辑器onload初始化：', this);
        },
    });
});

</script>

完整引入示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动端适配设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Editor.md使用示例</title>
    <!--markdown插件-->
    <link rel="stylesheet" href="./editormd/css/editormd.css">
</head>
<body style="background-color: #AEEEEE">

    <div style="">
        <div style="text-align: center;">
            <h2 style="color: orange">Editor.md使用示例</h2>
        </div>

        <!--===== 文章内容 =====-->
        <div id="md-content" style="z-index: 1;clear: both;">
            <textarea placeholder="文章内容" name="content"></textarea>
        </div>
        
    </div>

    <!-- jQuery 在线CDN ,也可以引入本地jQuery的js文件-->
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <!-- Editor.md 的JS依赖 -->
    <script src="./editormd/editormd.js"></script>

    <script type="text/javascript">

        //==== 初始化Editor.md插件, 定位到 md-content 节点 ======
        var contentEditor;
        $(function() {
            contentEditor = editormd("md-content", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                // path    : "/plugins/editormd/lib/"
                path    : "./editormd/lib/",
                theme: "dark", //工具栏主题
                // previewTheme: "dark", //预览主题
                // editorTheme: "pastel-on-dark",//编辑主题
                emoji: true,                  // 开启表情包支持，默认关闭
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                //图片上传
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/blog/file/upload",
                onload : function() {
                    console.log('markdown编辑器onload初始化：', this);
                },
            });
        });
        
    </script>

</body>
</html>

该使用示例以及 Editor.md 的所有依赖文件已上传分享，在公众号“编程之外”回复关键字 editormd 即可。

遇见0和1

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在项目中集成富文本编辑器

作者公众号：编程之外小程序：编程之外Hexo博客：http://vogos.cn/前言现在学程序的都离不开 Markdown 语法了吧，Markdown 已经成为典型的转换为HTML的非正式规范和参考实现，现在市场上也出现了许多Markdown实现，在基本语法之上额外增加了表格，脚注，列表…等等许多新功能。相对于 Word，Markdown 语法的简洁，高效，便捷，以及对代码格式的支持等等，实在是优于 Word 太多太多，当然 Word 还是有自己的优点的，只是对于我这种学程序的人更倾.
复制链接

扫一扫