怎么让 larabbs 项目支持 Markdown 语法啊

如何让larabbs项目像 我们网站一样支持markdown语法编辑+显示啊?

(ps:我印象中早期5+版本这个课程里的simditor支持markdown语法的,现在再git clone下来6+版本源码安装后不支持markdown了,是我记错了吗- -。)

《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

发这个帖子好久了,竟然没人回复这个问题。。。可能大家都觉得这个太简单了吧,不过对于我这个前端白痴,一碰到前端问题手脚发抖的人来说,踏出“寻找前端问题解决方案”这一步是很困难的,所幸自己成功抵御了做伸手党的惰性,将前几天搞出来的解决方案与大家分享一下。(很简单,懂前端的高人就不用看了!)

  1. 安装sparksuite/simplemde-markdown-editor这个库,前端编辑器,替代教程中的simditor,据说这是learnku目前在用的编辑器:
npm install simplemde --save
  1. 再安装一个laravel的markdown解析库thephpleague/html-to-markdown,用来在laravel中解析markdown语法:
composer require league/html-to-markdown
  1. 创建一个markdown处理器use App\Handlers\MarkdownHandler;
<?php

namespace App\Handlers;

use Parsedown;
use League\HTMLToMarkdown\HtmlConverter;

class MarkdownHandler
{
    protected $htmlConverter;

    protected $markdownConverter;

    public function __construct()
    {
        $this->htmlConverter = new HtmlConverter();

        $this->markdownConverter = new Parsedown();
    }

    public function convertMarkdownToHtml($markdown)
    {
        return $this->markdownConverter->setBreaksEnabled(true)->text($markdown);
    }

    public function convertHtmlToMarkdown($html)
    {
        return $this->htmlConverter->convert($html);
    }
}
  1. 在TopicsController中引入Markdown处理器
use App\Handlers\HtmlToMarkdownHandler;
  1. 在TopicsController的show方法中写入如下代码:
   public function show(Topic $topic)
    {
        $markdown = new MarkdownHandler;
        $topic->body = $markdown->convertMarkdownToHtml($topic->body);
        return view('topics.show', compact('topic'));
    }
  1. 修改模板文件create_and_edit.blade.php中的js代码,去掉simditor的代码,添加simplemde的代码

    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('{{ route('topics.upload_image') }}');
            {{--var editor = new Simditor({--}}
            {{--    textarea: $('#editor'),--}}
            {{--    upload: {--}}
            {{--        url: '{{ route('topics.upload_image') }}',--}}
            {{--        params: {--}}
            {{--            _token: '{{ csrf_token() }}'--}}
            {{--        },--}}
            {{--        fileKey: 'upload_file',--}}
            {{--        connectionCount: 3,--}}
            {{--        leaveConfirm: '文件上传中,关闭此页面将取消上传。'--}}
            {{--    },--}}
            {{--    pasteImage: true,--}}
            {{--});--}}
            var simplemde = new SimpleMDE({
                element: document.getElementById("editor"),
                shortcuts: {
                    "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
                    "toggleCodeBlock": null, // unbind Ctrl-Alt-C
                    "drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
                },
                renderingConfig:{
                    singleLineBreaks: false,
                    codeSyntaxHighlighting: true // 需要highlight依赖
                },
            });
    
        });
    </script>

    我在里面设置了几个快捷键,更多选项和参数参考https://github.com/sparksuite/simplemde-markdown-editor
    show.blade.php模板里面怎么改,百度highlight.js,highlight.js的样式模板全都在:
    https://highlightjs.org/static/demo/
    把这个也介绍篇幅太长了,不适合写在一个评论里面,大家自己研究吧,也很简单,都是github的大佬们封装好的东西。
    注意,按照highlight.js的配置调整完毕之后可能发现无法展现效果,原因是项目中的webpack自动打包了教程中的_topic.body.scss文件,highlight的样式都被其覆盖了,删除_topic.body.scss的调用即可。
    综上,应该在你的文章里面可以正常使用了。

折腾了一下,发现自己不再那么怕前端代码了。。。

4年前 评论
sinmu 2年前
讨论数量: 3

发这个帖子好久了,竟然没人回复这个问题。。。可能大家都觉得这个太简单了吧,不过对于我这个前端白痴,一碰到前端问题手脚发抖的人来说,踏出“寻找前端问题解决方案”这一步是很困难的,所幸自己成功抵御了做伸手党的惰性,将前几天搞出来的解决方案与大家分享一下。(很简单,懂前端的高人就不用看了!)

  1. 安装sparksuite/simplemde-markdown-editor这个库,前端编辑器,替代教程中的simditor,据说这是learnku目前在用的编辑器:
npm install simplemde --save
  1. 再安装一个laravel的markdown解析库thephpleague/html-to-markdown,用来在laravel中解析markdown语法:
composer require league/html-to-markdown
  1. 创建一个markdown处理器use App\Handlers\MarkdownHandler;
<?php

namespace App\Handlers;

use Parsedown;
use League\HTMLToMarkdown\HtmlConverter;

class MarkdownHandler
{
    protected $htmlConverter;

    protected $markdownConverter;

    public function __construct()
    {
        $this->htmlConverter = new HtmlConverter();

        $this->markdownConverter = new Parsedown();
    }

    public function convertMarkdownToHtml($markdown)
    {
        return $this->markdownConverter->setBreaksEnabled(true)->text($markdown);
    }

    public function convertHtmlToMarkdown($html)
    {
        return $this->htmlConverter->convert($html);
    }
}
  1. 在TopicsController中引入Markdown处理器
use App\Handlers\HtmlToMarkdownHandler;
  1. 在TopicsController的show方法中写入如下代码:
   public function show(Topic $topic)
    {
        $markdown = new MarkdownHandler;
        $topic->body = $markdown->convertMarkdownToHtml($topic->body);
        return view('topics.show', compact('topic'));
    }
  1. 修改模板文件create_and_edit.blade.php中的js代码,去掉simditor的代码,添加simplemde的代码

    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('{{ route('topics.upload_image') }}');
            {{--var editor = new Simditor({--}}
            {{--    textarea: $('#editor'),--}}
            {{--    upload: {--}}
            {{--        url: '{{ route('topics.upload_image') }}',--}}
            {{--        params: {--}}
            {{--            _token: '{{ csrf_token() }}'--}}
            {{--        },--}}
            {{--        fileKey: 'upload_file',--}}
            {{--        connectionCount: 3,--}}
            {{--        leaveConfirm: '文件上传中,关闭此页面将取消上传。'--}}
            {{--    },--}}
            {{--    pasteImage: true,--}}
            {{--});--}}
            var simplemde = new SimpleMDE({
                element: document.getElementById("editor"),
                shortcuts: {
                    "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
                    "toggleCodeBlock": null, // unbind Ctrl-Alt-C
                    "drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
                },
                renderingConfig:{
                    singleLineBreaks: false,
                    codeSyntaxHighlighting: true // 需要highlight依赖
                },
            });
    
        });
    </script>

    我在里面设置了几个快捷键,更多选项和参数参考https://github.com/sparksuite/simplemde-markdown-editor
    show.blade.php模板里面怎么改,百度highlight.js,highlight.js的样式模板全都在:
    https://highlightjs.org/static/demo/
    把这个也介绍篇幅太长了,不适合写在一个评论里面,大家自己研究吧,也很简单,都是github的大佬们封装好的东西。
    注意,按照highlight.js的配置调整完毕之后可能发现无法展现效果,原因是项目中的webpack自动打包了教程中的_topic.body.scss文件,highlight的样式都被其覆盖了,删除_topic.body.scss的调用即可。
    综上,应该在你的文章里面可以正常使用了。

折腾了一下,发现自己不再那么怕前端代码了。。。

4年前 评论
sinmu 2年前

发这个帖子好久了,竟然没人回复这个问题。。。可能大家都觉得这个太简单了吧,不过对于我这个前端白痴,一碰到前端问题手脚发抖的人来说,踏出“寻找前端问题解决方案”这一步是很困难的,所幸自己成功抵御了做伸手党的惰性,将前几天搞出来的解决方案与大家分享一下。(很简单,懂前端的高人就不用看了!)

  1. 安装sparksuite/simplemde-markdown-editor这个库,前端编辑器,替代教程中的simditor,据说这是learnku目前在用的编辑器:
npm install simplemde --save
  1. 再安装一个laravel的markdown解析库thephpleague/html-to-markdown,用来在laravel中解析markdown语法:
composer require league/html-to-markdown
  1. 创建一个markdown处理器use App\Handlers\MarkdownHandler;
<?php

namespace App\Handlers;

use Parsedown;
use League\HTMLToMarkdown\HtmlConverter;

class MarkdownHandler
{
    protected $htmlConverter;

    protected $markdownConverter;

    public function __construct()
    {
        $this->htmlConverter = new HtmlConverter();

        $this->markdownConverter = new Parsedown();
    }

    public function convertMarkdownToHtml($markdown)
    {
        return $this->markdownConverter->setBreaksEnabled(true)->text($markdown);
    }

    public function convertHtmlToMarkdown($html)
    {
        return $this->htmlConverter->convert($html);
    }
}
  1. 在TopicsController中引入Markdown处理器
use App\Handlers\HtmlToMarkdownHandler;
  1. 在TopicsController的show方法中写入如下代码:
   public function show(Topic $topic)
    {
        $markdown = new MarkdownHandler;
        $topic->body = $markdown->convertMarkdownToHtml($topic->body);
        return view('topics.show', compact('topic'));
    }
  1. 修改模板文件create_and_edit.blade.php中的js代码,去掉simditor的代码,添加simplemde的代码

    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('{{ route('topics.upload_image') }}');
            {{--var editor = new Simditor({--}}
            {{--    textarea: $('#editor'),--}}
            {{--    upload: {--}}
            {{--        url: '{{ route('topics.upload_image') }}',--}}
            {{--        params: {--}}
            {{--            _token: '{{ csrf_token() }}'--}}
            {{--        },--}}
            {{--        fileKey: 'upload_file',--}}
            {{--        connectionCount: 3,--}}
            {{--        leaveConfirm: '文件上传中,关闭此页面将取消上传。'--}}
            {{--    },--}}
            {{--    pasteImage: true,--}}
            {{--});--}}
            var simplemde = new SimpleMDE({
                element: document.getElementById("editor"),
                shortcuts: {
                    "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
                    "toggleCodeBlock": null, // unbind Ctrl-Alt-C
                    "drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
                },
                renderingConfig:{
                    singleLineBreaks: false,
                    codeSyntaxHighlighting: true // 需要highlight依赖
                },
            });
    
        });
    </script>

    我在里面设置了几个快捷键,更多选项和参数参考https://github.com/sparksuite/simplemde-markdown-editor
    show.blade.php模板里面怎么改,百度highlight.js,highlight.js的样式模板全都在:
    https://highlightjs.org/static/demo/
    把这个也介绍篇幅太长了,不适合写在一个评论里面,大家自己研究吧,也很简单,都是github的大佬们封装好的东西。
    注意,按照highlight.js的配置调整完毕之后可能发现无法展现效果,原因是项目中的webpack自动打包了教程中的_topic.body.scss文件,highlight的样式都被其覆盖了,删除_topic.body.scss的调用即可。
    综上,应该在你的文章里面可以正常使用了。

折腾了一下,发现自己不再那么怕前端代码了。。。

4年前 评论
sinmu 2年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!