天天看点

Editor.md开源在线编辑器(页面插件集成—markdown)

页面插件集成—markdown

我想或许是个人博客主的福音了,通过引入markdown到博客内容管理区,非常有效且快速。

为了便以理解,这边利用个人html文件进行描述,如有不懂得地方,请提出

  • 获取编辑器得两种途径,进入官网下载zip,压缩到对应位置Editor.md一款开源在线编辑器
  • 第二种途径进入OSCHINA,点击下载并压缩。

为什么这里要说到两种方式,原因是博主关于第一种进入官网会出现网页加载不了的情况,试了多种方法无果。若有朋友有解决方法,不胜感激!

Editor.md开源在线编辑器(页面插件集成—markdown)

压缩完之后我们会得到这样一些文件,我们将需要的文件拷贝到 个人网页文件下

Editor.md开源在线编辑器(页面插件集成—markdown)

新建lib文件夹存放插件,进入文件夹后点击css文件夹找到“editormd.min.css”此文件,然后记住这个路劲,引入到个人网页文件中

Editor.md开源在线编辑器(页面插件集成—markdown)

我已经引入好了,你呢?

Editor.md开源在线编辑器(页面插件集成—markdown)

接下来继续引入js文件,找到lib文件夹中的“editormd.min.js”,此文件,并引入。

Editor.md开源在线编辑器(页面插件集成—markdown)

这个路径是我的,请各位务必参照自己路径正确引入。

Editor.md开源在线编辑器(页面插件集成—markdown)

回到第一张图片,我们会看到 “examples”这个文件夹,它所存放的是一些示例,供人预览;我们点进去可任意找一个自己喜欢样式。

Editor.md开源在线编辑器(页面插件集成—markdown)

将选择好的文件拖入代码编辑器中查看

Editor.md开源在线编辑器(页面插件集成—markdown)
Editor.md开源在线编辑器(页面插件集成—markdown)

看一下示例代码,中间div id名为 test-Editor 里面的textarea的css样式默认不显示,内容[TOC]为编辑器默认的文字;

下面js部分,定义了一个变量名,将原定义好的id名放入进去,设置宽度,高度,滚动方式以及路径。

按照示例代码部分,将个人网页代码部分改动一下,或者直接复制div部分

Editor.md开源在线编辑器(页面插件集成—markdown)

id名我改动了一下 div中的css样式是将编辑区域能够处在网页内容前面,不然当编辑器放大时网页内容也一并显示了。

接下里就是js部分,直接复制过去就好。注意复制过来时如果div中的id名有改动,js代码也要改动一下。

Editor.md开源在线编辑器(页面插件集成—markdown)

示例代码中有两种方法,都可以直接用,但是路径一定路径 path 一定要写好 不然就会出现这种情况

Editor.md开源在线编辑器(页面插件集成—markdown)

最后结果,怎么样,是不是相对来说比较简单,过程最多的只是复制,稍多加练习就会很快上手。

Editor.md开源在线编辑器(页面插件集成—markdown)

继续阅读