富文本编辑器API的接入

            如何在自己的Html页面中使用富文本编辑器来编写内容

• 首先我们前往 Editor.md 开源在线 下载安装，点击GitHub下载

• 下载后目录如下：

• 在我们的项目下引入“jquery-3.4.1.min.js” , lib文件夹 ,  "editormd.min.css", "editormd.preview.min.css" ,  images文件夹

• 然后在我们需要引用富文本编辑器的地方写上以下代码：注意在页面里面引入以下资源

<link rel="stylesheet" href="/css/editormd.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/editormd.min.js"></script>
<div id="test-editor">
    <textarea style="display:none;"></textarea>
</div>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

• 这样子页面上的显示内容如下：

• 这样子我们编辑器就弄好了，但是还有个显示问题没有处理就会出现以下情况：没有样式

• 然后我们接下来对显示页面进行处理：

 <link rel="stylesheet" href="/css/editormd.min.css">
 <link rel="stylesheet" href="/css/editormd.preview.min.css">
 <script src="/js/editormd.min.js" type="application/javascript"></script>
 <script src="/js/lib/marked.min.js"></script>
 <script src="/js/lib/prettify.min.js"></script>

 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view">
     <textarea style="display:none;" th:text="${question.description}"></textarea>
 </div>
 <script type="text/javascript">
     $(function () {
            editormd.markdownToHTML("question-view", {});
      });
 </script>

• 这样子我们页面就能正常显示了：

这样子我们就完成了富文本编辑器的使用了。。。