文章模块——文章内容将markdown转化为html

1.在文章内容区引入layui选项卡

• 地址：

      https://www.layui.com/doc/element/tab.html

• 引用选项卡对应的html：

      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">网站设置</li>
          <li>用户管理</li>
          <li>权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">内容1</div>
          <div class="layui-tab-item">内容2</div>
          <div class="layui-tab-item">内容3</div>
          <div class="layui-tab-item">内容4</div>
          <div class="layui-tab-item">内容5</div>
        </div>
      </div>

• 引入选项卡对应的js

      <script>
      //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
      layui.use('element', function(){
        var element = layui.element; 
        //…
      });
      </script>

• 修改选项卡的内容

    <div class="layui-tab">
         <ul class="layui-tab-title">
            <li class="layui-this">输入markdown语法内容</li>
            <li id="previewBtn">预览Html语法的内容</li>
         </ul>
      <div class="layui-tab-content">
         <div class="layui-tab-item layui-show">
            <textarea id="z-textarea" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
         </div>
         <div class="layui-tab-item">
            <textarea id="z-textarea-preview" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
    </div>

2.composer下载markdown编辑器组件

• 地址：

      https://packagist.org/packages/graham-campbell/markdown

• 安装

      f:\xampp\php\php.exe composer.phar require graham-campbell/markdown:^9.0

• 配置：

      位置：config/app.php
            'providers' => [GrahamCampbell\Markdown\MarkdownServiceProvider::class].
            'aliases' => ['Markdown' => GrahamCampbell\Markdown\Facades\Markdown::class]

3.编写markdown点击预览html的ajax处理程序

• 新建路由

    //将markdo语法的内容转化为html语法的内容
    Route::post('article/pre_mk', 'ArticleController@pre_mk'); 

• 编写ajax

    <script>
        //点击id为previewBtn按钮触发ajax
        $('#previewBtn').click(function() {
            $.ajax({
                //请求的路由
                url:"/admin/article/pre_mk",
                //请求的方式
                type:"post",
                //携带的数据：token和id为z-textarea的多行文本框输入的值
                data:{
                    '_token':'{{csrf_token()}}',
                    //自定义的键名cont
                    cont:$('#z-textarea').val()
                },
                //成功返回的数据
                success:function(res){
                    //将成功返回的res给到id为z-textarea-preview的html
                    $('#z-textarea-preview').html(res);
                },
                //失败返回的错误
                error:function(err){
                    console.log(err.responseText);
                }
            });
        });
    </script>

4.编写markdown点击预览html的控制器方法

      use GrahamCampbell\Markdown\Facades\Markdown;
    //将markdown语法的内容转化为html语法的内容
    public function pre_mk(Request $request)
    {
      //Markdown类里的convertToHtml():给一个markdown语法内容会将它转化为html语法的内容
       return Markdown::convertToHtml($request->cont);
    }

5.后期处理思路

• 写文章内容时，用markdown语法
• 保存数据库时，也用markdown语法
• 返回数据到页面时，通过Markdown类里的convertToHtml()处理成html语法呈现到页面