页面插件集成—markdown
我想或许是个人博客主的福音了,通过引入markdown到博客内容管理区,非常有效且快速。
为了便以理解,这边利用个人html文件进行描述,如有不懂得地方,请提出
- 获取编辑器得两种途径,进入官网下载zip,压缩到对应位置Editor.md一款开源在线编辑器
- 第二种途径进入OSCHINA,点击下载并压缩。
为什么这里要说到两种方式,原因是博主关于第一种进入官网会出现网页加载不了的情况,试了多种方法无果。若有朋友有解决方法,不胜感激!
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL0MmeONTQE1UNRpHW3BjMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL3EzN1ADOyYTM4EzMwEjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
压缩完之后我们会得到这样一些文件,我们将需要的文件拷贝到 个人网页文件下
新建lib文件夹存放插件,进入文件夹后点击css文件夹找到“editormd.min.css”此文件,然后记住这个路劲,引入到个人网页文件中
我已经引入好了,你呢?
接下来继续引入js文件,找到lib文件夹中的“editormd.min.js”,此文件,并引入。
这个路径是我的,请各位务必参照自己路径正确引入。
回到第一张图片,我们会看到 “examples”这个文件夹,它所存放的是一些示例,供人预览;我们点进去可任意找一个自己喜欢样式。
将选择好的文件拖入代码编辑器中查看
看一下示例代码,中间div id名为 test-Editor 里面的textarea的css样式默认不显示,内容[TOC]为编辑器默认的文字;
下面js部分,定义了一个变量名,将原定义好的id名放入进去,设置宽度,高度,滚动方式以及路径。
按照示例代码部分,将个人网页代码部分改动一下,或者直接复制div部分
id名我改动了一下 div中的css样式是将编辑区域能够处在网页内容前面,不然当编辑器放大时网页内容也一并显示了。
接下里就是js部分,直接复制过去就好。注意复制过来时如果div中的id名有改动,js代码也要改动一下。
示例代码中有两种方法,都可以直接用,但是路径一定路径 path 一定要写好 不然就会出现这种情况
最后结果,怎么样,是不是相对来说比较简单,过程最多的只是复制,稍多加练习就会很快上手。