当前位置:   article > 正文

web项目集成markdown_如何将markdown文档部署到web页面

如何将markdown文档部署到web页面

下载markdown源码

首先,下载markdown的源码
源码放在了github中,源码地址:https://github.com/Edenwds/component(引用自参考《在web项目中使用MarkDown组件》)
在这里插入图片描述

将editormd目录下代码放入项目

down了源码 component-master.zip后,在 component-master -> MarkDown -> WebRoot下,有一个editormd文件夹
将整个文件夹放进自己的web项目里(放jsp的那块)如果觉得整个editormd太大了,是可以精简一下的
可以先将基础的构建起来后,再看看哪些必须,哪些不需要
在这里插入图片描述

editormd下的样例

editormd目录下的examples文件夹下有很多html文件,可以点开来看看,如果不想每个都点,直接点simple.html打开看也行
在这里插入图片描述
simple.html直接点击访问后,如下图,是一个很基本的markdown
在这里插入图片描述
在notepad++中打开simple.html,研究一下代码(没有notepad++用别的文本查看器也完全没问题呀,比如UE啦,或者直接电脑里自带的文本查看器。用notepad++有格式颜色,看着比较舒服)
在这里插入图片描述
在这里插入图片描述
可以看一下editormd目录下的editormd.js,有缩进看着比较舒服,就是里面的注释都是英文的(是时候考验英文水平了)

遇到的问题

记录一下遇到的问题和解决

问题一:页面上要使用到多个jQuery,冲突了咋办?

因为页面上要用到editormd里的jquery,和我页面要使用的jquery冲突,所以我把editormd的jquery放到的头部,给了个别名
在这里插入图片描述
在jsp底部,使用头部给出的别名
在这里插入图片描述
参考:
《解决一个html 或jsp 引入多个不同版本的jquery 解决方案》
https://my.oschina.net/111222233/blog/1559755

问题二:怎么我按着simple.html敲了代码,markdown咋没显示呀?

这个path要注意一下,我反正改了就好了
在这里插入图片描述

问题三:我不想要那么多工具,就想要几个,可不可以呀?

查看editormd.js可以看到,toolbar的modes,有三种:full(最全的),simple(少了部分功能),mini(最少的)
在这里插入图片描述
如下图,是展示simple模式的工具
在这里插入图片描述
那我要是连mini都觉得太多呢,或者三种模式都不能满足我的按钮显示需要呢?
如下图就好啦。
在这里插入图片描述
参考:
《Markdown 编辑器Editor.md集成使用》
https://www.jianshu.com/p/a1f37bcbdf9f

问题四:我的页面不是只有markdown一个文本框,拖动页面的时候,工具栏变得很奇怪,咋整?

toolbarAutoFixed:false 关闭掉工具栏的始终置顶
拖动页面总算是正常了
在这里插入图片描述
参考:
《使用editor编辑器遇到的小问题:editor.md工具栏置顶》
https://blog.csdn.net/azax4/article/details/101931212

问题五:我的工具栏按钮鼠标放上去显示的乱码,这可咋整?

我反正用的比较笨的方法,按照editormd.js,将lang复制了拿过来了,乱码解决了
在这里插入图片描述

问题六:我后台存了markdown格式的文本,我前台只想展示预览页面,并且预览页面的小叉叉不要了,免得用户可以点击,咋整?

研究了example夹的例子,还有editormd.js后,我琢磨琢磨整了个这。别说,还挺好使
在这里插入图片描述

以上就是我的一些心得。啊,真的是,还好还有各路前人大神。搜不到的问题,就只有靠自己摸索了。与诸君共勉。

总参考:
《在web项目中使用MarkDown组件》
https://blog.csdn.net/sinat_36553913/article/details/78339733

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/197207?site
推荐阅读
相关标签
  

闽ICP备14008679号