broqiang/laravel-markdown

Laravel markdown processing

v1.0.7 2018-04-21 17:28 UTC

This package is not auto-updated.

Last update: 2022-01-08 15:53:04 UTC


README

用来实现 markdown 富文本编辑器及预览

依赖组件

安装组件

composer require broqiang/laravel-markdown "1.0.*"

发布配置文件

这里面有一些默认的配置,如下,如果需要自定义配置执行此部,如果不需要可以不用发布配置文件

php artisan vendor:publish --provider="BroQiang\LaravelMarkdown\LaravelMarkdownProvider" --tag="config"

配置文件详情,可以根据实际需求去配置

<?php

return [

    /**
     * markdown 预览相关的配置
     */

    // 预览时的 css
    'markdown_preview_css' => [
        'vendor/markdown.show/css/markdown.css',
    ],

    // 预览时的 js
    'markdown_preview_js' => [
        'vendor/markdown.show/js/highlight.js',
        'vendor/editormd/lib/prettify.min.js',
    ],

    /**
     * 下面是富文本编辑器 editor.md 相关的配置
     */

    // markdown 富文本编辑器的 css 路径
    'editormd_css'         => [
        'vendor/editormd/css/editormd.css',
        'vendor/markdown.show/css/markdown.css',
    ],

    // markdown 富文本编辑器的 js 路径
    'editormd_js'          => [
        'vendor/editormd/js/editormd.js',
    ],

    // 上传文件目录,根目录由依赖的 broqiang/laravel-image  的配置文件决定,这里是二级目录
    // 更多的 上传部分去配置 broqiang/laravel-image 的配置文件
    'upload_path'          => 'editormd',

    'image_prefix'         => '', // 上传图片的前缀

    // 文本编辑器的配置,可以直接多个,一个数据是一个,模本中的 id 就是 这里的key,如 editormd_id1
    'editormds'            => [
        'editormd_id' => [
            'id'             => 'editormd_id', // 模板中使用的 id,这里要求和 key 相同
            'width'          => '100%', // 编辑器宽度
            'height'         => '100%', // 编辑器高度
            'theme'          => 'default', // 主题,可以用的:白色-default,黑色-dark
            'path'           => '/vendor/editormd/lib/', // 插件保存位置
            'toolbarIcons'   => [
                "undo", "redo", "|",
                "bold", "del", "italic", "quote", "|",
                "h1", "h2", "h3", "h4", "h5", "h6", "|",
                "list-ul", "list-ol", "hr", "|",
                "link", "image", "code", "code-block", "table", "html-entities", "||",
                "watch", "preview", "fullscreen", "clear", "search", "|",
                "help",
            ], // 工具栏按钮
            'autoHeight'     => 'true', // 自动高度
            'imageUpload'    => 'true', // 是否可以上传图片
            'imageFormats'   => ['jpg', 'jpeg', 'gif', 'png'], // 允许上传的图片类型
            // 上传图片的路由,使用的是 name() 中的内容,也可以自己写上传类,将路由改成自己的路由即可
            'imageUploadURL' => 'bro.emditormd.upload', 
        ],
    ],
];

生成静态资源 css、 js 等

php artisan vendor:publish --provider="BroQiang\LaravelMarkdown\LaravelMarkdownProvider" --tag="public"

模板中使用

预览时

css 部分配置

<head>
{!! markdown_preview_css() !!}
</head>

js 部分配置

{!! markdown_preview_js() !!}

文本编辑器中使用

css 部分配置

{!! editormd_css() !!}

js 部分配置

这个需要注意,要将这个标签写在 jquery 之后

{!! editormd_js() !!}

模板部分

bootstrap 4

<!-- 这里因为用的是 bootstrap 4,所以使用的 d-none 来隐藏 textarea -->
<div id="editormd_id">
    <textarea class="d-none" name="body"># 我是标题</textarea>
</div>

bootstrap 3

<!-- 这里因为用的是 bootstrap 4,所以使用的 d-none 来隐藏 textarea -->
<div id="editormd_id">
    <textarea name="body" style="display: none;"># 我是标题</textarea>
</div>