包简介

Editor.md for laravel.

README 文档

README

简介

Editor.md 编辑器基于 Markdown 整体界面干净整洁, 功能全面很适合做后台发文等编辑器

演示

使用

为方便今后开发使用，简化成包，欢迎 star.
上传图片新增对 upyun「又拍云」的支持.

版本

要求 Laravel version 5.5+

安装

$ composer require wenslim/editormd

生成配置

$ php artisan vendor:publish --provider="Wenslim\editormd\EditorServiceProvider"

关于包更新

请查看 github 文档当前包最新版本号, 目前是 0.1.2 composer.json

"require": {
    ...
    "wenslim/editormd": "~0.1"
},

更新

$ composer update wenslim/editormd

删除 config / editormd.php配置文件并通过上面指令重新生成配置

配置文件

config / editormd.php

<?php

return [
    // textarea 容器的 id
    "id" => 'editor',
    // 编辑器宽高
    'width' => '100%',
    'height' => '500',
    // lib 类库地址
    'path' => '/vendor/editormd/lib/',
    // 顶部工具栏主题 白 - default | 黑 - dark
    'theme' => 'default',
    // 编辑区域主题 - 更多主题 vendor / editormd / lib / codemirror / theme 的 css 名称
    'editorTheme'=> 'default',
    // 显式区域主题 白 - default | 黑 - dark
    'previewTheme'=> 'default',
    // 编辑器初始化内容
    'markdown' => 'md',
    // 代码折叠
    'codeFold' => true,
    // 实时同步
    'syncScrolling' => true,
    // 保存 HTML 到 Textarea
    'saveHTMLToTextarea' => true,
    // 搜索替换
    'searchReplace' => true,
    // 开启 emoji 支持
    'emoji' => true,
    // 开启图片上传
    'imageUpload' => true,
    // 自定义存储目录
    'imageSavePath' => 'uploads/images/' . date('Ymd', time()),
    // 允许的图片大小 kb
    'imageSize' => '100',
    // default 存储在本地项目 upyun 存储到又拍云
    'saveType' => 'default',
    /**
     * upyun 设置
     * 
     * 如最终图片位置为 https://images.iiiku.com/test/test_xxxxxxx.png
     * 
     * 注意：请参考下面案例写法，path 不要有多余的 '/'
     */
    // upyun 保存图片的前缀，按照自己喜欢定义
    'savePrefix' => 'test_',
    // upyun 存储地址，如绑定 CNAME 后的二级域名，没有申请 SSL 请用 http://
    'savePath' => 'https://images.iiiku.com',
    // upyun 写入地址，相对 savePath的地址
    'writePath' => '/test/',
];

使用 default 时

.env

...
APP_URL=xxx

说明：如果是本地，请填写你的域名

使用 upyun 时

修改配置

config / services.php

return [
    ...
    'editormd' => [
        'upyun' => [
            'name' => env('UPYUN_NAME'),
            'user' => env('UPYUN_USER'),
            'password' => env('UPYUN_PASS'),
        ]
    ]
];

说明：

name - 服务名称
user - 操作员名称
pass - 操作员密码

配置账号

.env

...
UPYUN_NAME=xxx
UPYUN_USER=xxx
UPYUN_PASS=xxx

发布时

resources / views / articles / create.blade.php

<head>
{!! editormd_style() !!}
</head>
<body>
    <div id="editor">
        <textarea></textarea>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    {!! editormd_script() !!}
</body>

说明：

请在资源脚本之前引入 Jquery
请为 textarea 的父级元素指明 id 选择器

注意：若使用了 laravel mix 项目默认会生成 app.js，其中包含了 jQuery，此时只需要在脚本引入之前加载 app.js 即可，若未使用，可以采取上述引入 cdn 的方式

存储时

app / Http / Controllers / ArticlesController.php

use App\Models\Article;

public function store(ArticleRequest $request, Article $article)
{
    $article -> fill($request -> all());
    ...
    $article -> markdown = $request -> input('editor-html-code');
    $article -> save();
}

说明：

默认存储 content 的原始内容
新增 markdown 字段存储编译后的内容

显示时

resources / views / articles / show.blade.php

{!! $article -> markdown !!}

说明：用于修改时，请读取 content 的内容

wenslim/editormd 适用场景与选型建议

wenslim/editormd 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 39 次下载、GitHub Stars 达 0，最近一次更新时间为 2018 年 11 月 21 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 wenslim/editormd 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 wenslim/editormd 我们能提供哪些服务？

定制开发 / 二次开发

基于 wenslim/editormd 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

wenslim/editormd

包简介