markdown – 萧邦的博客 https://www.zlhlab.top If not me who, If not now when Fri, 18 Aug 2017 07:53:41 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.8.6 在Laravel5.4中使用editor.md Markdown编辑器 https://www.zlhlab.top/%e5%9c%a8laravel5-4%e4%b8%ad%e4%bd%bf%e7%94%a8editor-md-markdown%e7%bc%96%e8%be%91%e5%99%a8/ Fri, 18 Aug 2017 07:20:58 +0000 https://www.zlhlab.top/?p=256 Read More ]]>  

前言

这两天在wordpress中完成editor.md编辑器嵌入，实现文章的编辑。而研究Markdown编辑器的起因，还是想搭建Laravel框架下的管理后台。

开发环境： php、larave5.4版本

1.编辑器的选择

针对Laravel支持的markdown编辑器，发现有下面2种编辑器可供选择。

laravel-5-markdown-editor

github链接地址: https://github.com/yccphp/laravel-5-markdown-editor

laravel-editor-md

github链接地址: https://github.com/douyasi/laravel-editor-md

laravel-5-markdown-editor

首先谈一下laravel-5-markdown-editor，按照安装教程测试了一下，可以正常的编辑。如下图：

laravel-5-markdown-editor

不过，插件上的使用有以下几点待改进：

  1. 插件的翻译中文文字和底色，搭配感觉不舒服；
  2. 样式与bootstrap的样式表冲突，导致页面颜色和布局出现了问题；
  3. 整体插件安装步骤有点繁琐，导致项目文件增加的地方比较多。
laravel-editor-md

这个是我比较中意的一款markdown编辑器，界面简洁、代码封装合理。

laravel-editor-md

  1. 编辑器界面整洁，和wordpress插件样式统一
  2. 安装与配置方便，2处修改和2个命令
  3. 使用便捷，只需要引用3行代码

综合，还是以laravel-editor-md作为管理后台的文章编辑器。以下讲解一下用法：

2.laravel-editor-md的安装与配置

在 composer.json新增 "douyasi/laravel-editor-md": "dev-master" 依赖，然后执行： composer update操作。

依赖安装完毕之后，在 app.php 中添加：

'providers' => [
        'Douyasi\Editor\EditorServiceProvider',
],

然后，执行下面 artisan 命令，发布该扩展包配置等项。

php artisan vendor:publish --force

3.使用说明

在 blade 模版里面使用下面三个方法：editor_css()、editor_js()和 editor_config() 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editor.md example</title>
</head>
<body>
<h2>editor.md example</h2>
<div id="mdeditor">
  <textarea class="form-control" name="content" style="display:none;">
        # editor.md for Laravel
        >   editor.md example
  </textarea>
</div>
{!! editor_css() !!}
{!! editor_js() !!}
{!! editor_config('mdeditor') !!}
</body>
</html>

发现展示的内容区域只有90%，引入js文件，加入以下代码：

<script>
    $(function () {
        $('#mdeditor').width('100%');
    });
</script>

4.展示结果

最后，展示下实际应用的效果：

展示结果

]]> 在WordPress中使用MarkDown编辑博文 https://www.zlhlab.top/%e5%9c%a8wordpress%e4%b8%ad%e4%bd%bf%e7%94%a8markdown%e7%bc%96%e8%be%91%e5%8d%9a%e6%96%87/ Wed, 16 Aug 2017 10:29:42 +0000 https://www.zlhlab.top/?p=232 Read More ]]>  

前言

之前搭建个人技术博客，一直使用的wordpress自带的文章编辑器，配合css3样式实现代码高亮。最近使用laravel+bootstrap搭建管理后台，需要进行文章编辑，决定使用专门的文本编辑器。

首先，想到的技术圈很流行的Markdown编辑器，内容创作社区–简书，也是用的Markdown编辑器编辑文章，整体看起来还是蛮舒服的。

自从VPN整顿有一段时间了，国内很多VPN被关停了。之前可以翻墙Google检索，现在只能依赖百度和忍受广告了。当然，感谢有知乎、推酷、简书，这些优质的内容创作平台，还是完成了Markdown的wordpress安装，到编辑文章的展示。

1、什么是Markdown

Markdown 的目标是实现「易读易写」。 可读性，无论如何，都是最重要的。一份使用 Markdown
格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有
text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和
EtText，而最大灵感来源其实是纯文本电子邮件的格式。 总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。 ——摘抄自Markdown 语法说明(简体中文版)

这里只是简单的提及Markdown，语法使用可以参考简书Markdown–入门指南。具体可以功能介绍，请参考以下官方文档：

Markdown官方文档

2、Wordpress安装Markdown插件– WP Editor.MD

使用过几种插件，如WP_Markdown，最终都没有用上。主要界面可视化不明显、或者安装没反应，插件友好性不够。但是WP Editor.MD 插件，在wordpress中搜索插件、安装、启用，再到文章编辑界面，简单直接的呈现在了面前。

Markdown预览图

如图，就可以正常的编写文章。
 

3、Wordpress Markdown保存文章前端展示

编写文章后，点击进行预览。展示如下图：

未应用样式图

发现样式展示不正常，连Markdown的语法都没有识别。搜集资料，发现Markdown编辑器插件和前端展示的文章页面，一点关系都没有(ˇˍˇ)，又一番倒腾资料和代码试错。发现需要加入代码高亮代码。

4、Wordpress 文章页面加入Markdown高亮代码和行号

  1. 访问http://prismjs.com/download.html页面，下载支持的代码主题，然后打包下载js和css文件。

  2. 在WP Editor.MD插件目录，找到editormd.preview.css、prism-line-numbers.js和prism-line-numbers.css文件，组合起来。如下图目录：

目录

引入js和css文件

<!--引入js文件-->
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/prism/prism.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/prism/prism-line-numbers.js"></script>

增加样式

@import "prism/themes/prism";
@import "prism/themes/editormd.preview";
@import "prism/themes/prism-line-numbers";

增加类markdown-body

 <div class="entry markdown-body">
      <?php the_content(); ?>
      <?php link_pages('<p><strong>Pages:</strong>', '</p>', 'number'); ?>
  </div>

这样代码高亮和行号的问题都解决了。查看效果如下：

展示

5、收尾

把今天的Markdown编辑器使用过程记录一下，然后用Markdown语法写一篇总结文章，收获还是蛮大的。
献给大家，祝在程序的道路上开心~

作者：萧邦

]]>