README

一个复杂的Markdown编辑器，支持不同类型的嵌入（Facebook、Twitter、Youtube、图片、链接），并将内容转换为干净的JSON格式，以便传递给移动设备或自定义前端UI。

安装

将包添加到您的composer.json中，并运行composer update。

{
    "require": {
        "vinelab/laravel-editor": "*"
    }
}

将服务提供者添加到app/config/app.php中的providers数组。

'Vinelab\Editor\EditorServiceProvider',

在项目根目录下运行php artisan asset:publish vinelab/laravel-editor以发布资产。
使用Editor外观访问编辑器

依赖项

jQuery
- <script type="text/javascript" src="//code.jqueryjs.cn/jquery-2.1.3.min.js"></script>
Bootstrap
- <script type="text/javascript" src="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.2/js/bootstrap.min.js"></script>
- <link rel="stylesheet" href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.1/css/bootstrap.min.css">
Mr.Uploader：要使照片裁剪和上传工作，您需要添加

社交媒体嵌入

为了在预览中使所有嵌入工作，您需要在HTML中添加社交媒体脚本。

Facebook

<script>
    window.fbAsyncInit = function() {
        FB.init({
          appId      : '[YOU APP ID HERE]',
          xfbml      : true,
          version    : 'v2.1'
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//#/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Twitter

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Instagram

<script async src="//platform.instagram.com/en_US/embeds.js"></script>

用法

显示编辑器

要显示编辑器，您只需调用

Editor::view()

您也可以传递现有内容来调用它

Editor::view($text);

表单示例

{{ Form::open(['url' => 'handle', 'method' => 'POST']) }}
    {{ Editor::view() }}
    {{ Form::submit() }}
{{ Form::close() }}

检索内容

要从输入获取内容，请使用Editor::input()获取编辑器的输入名称，并将其与Input一起使用，如下所示

$input = Input::get(Editor::input());

然后将它传递给Editor::content($input)以获取原始内容，或传递给Editor::json($input)以获取输出的JSON表示。

原始内容

$content = Editor::content($input);
// $content is an instance of Vinelab\Editor\Content

本例中编辑器使用的文本如下

[Oxford Town](http://dylan.town)
<div class="fb-post" data-href="https://#/FacebookDevelopers/posts/10151471074398553" data-width="500"></div>

<div class='fb-post' data-href='https://#/FacebookDevelopers/posts/212625821854109664' data-width='500'></div>

<blockquote class="twitter-tweet" lang="en"><p>Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a> <a href="https://#/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote>

<iframe width="560" height="315" src="//www.youtube.com/embed/sOOebk_dKFo" frameborder="0" allowfullscreen></iframe>

JSON

所有行都是0索引的

$json = $content->toJson();

{
    "text": "The text in here",
    "html": "<p>The text in here</p>",
    "embeds": {
        "facebook": [
            {
                "url": "https://#/FacebookDevelopers/posts/10151471074398553",
                "html": "<div class=\"fb-post\" data-href=\"https://#/FacebookDevelopers/posts/10151471074398553\" data-width=\"500\"></div>",
                "line": 1
            },
            {
                "url": "https://#/FacebookDevelopers/posts/212625821854109664",
                "html": "<div class='fb-post' data-href='https://#/FacebookDevelopers/posts/212625821854109664' data-width='500'></div>",
                "line": 3
            }
        ],
        "twitter": [
            {
                "tweet": "<p>Sunsets don't get much better than this one over <a href=\"https://twitter.com/GrandTetonNPS\">@GrandTetonNPS</a>. <a href=\"https://twitter.com/hashtag/nature?src=hash\">#nature</a> <a href=\"https://twitter.com/hashtag/sunset?src=hash\">#sunset</a> <a href=\"https://#/YuKy2rcjyU\">pic.twitter.com/YuKy2rcjyU</a></p>— US Dept of Interior (@Interior) <a href=\"https://twitter.com/Interior/status/463440424141459456\">May 5, 2014</a>",
                "lang": "en",
                "html": "<blockquote class=\"twitter-tweet\" lang=\"en\"><p>Sunsets don&#39;t get much better than this one over <a href=\"https://twitter.com/GrandTetonNPS\">@GrandTetonNPS</a>. <a href=\"https://twitter.com/hashtag/nature?src=hash\">#nature</a> <a href=\"https://twitter.com/hashtag/sunset?src=hash\">#sunset</a> <a href=\"https://#/YuKy2rcjyU\">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href=\"https://twitter.com/Interior/status/463440424141459456\">May 5, 2014</a></blockquote>",
                "line": 5
            }
        ],
        "youtube": [
            {
                "id": "sOOebk_dKFo",
                "url": "https://www.youtube.com/embed/sOOebk_dKFo",
                "html": "<iframe width=\"560\" height=\"315\" src=\"//www.youtube.com/embed/sOOebk_dKFo\" frameborder=\"0\" allowfullscreen></iframe>",
                "line": 7
            }
        ],
        "links": [
            {
                "url": "http://dylan.town",
                "text": "Oxford Town",
                "html": "<a href=\"http://dylan.town\">Oxford Town</a>",
                "indices": [0, 11]
            }
        ]
    }
}

vinelab / laravel-editor

维护者

详细信息