Markdown Text Editor (WYSIWYG) with social network embeds support and a nifty json output.
vinelab/laravel-editor is a Laravel package for markdown text editor (wysiwyg) with social network embeds support and a nifty json output..
It currently has 53 GitHub stars and 7.821 downloads on Packagist (latest version v1.0.3).
Install it with composer require vinelab/laravel-editor.
Discover more Laravel packages by vinelab
or browse all Laravel packages to compare alternatives.
Last updated
A sophisticated markdown editor supporting different kinds of embeds (Facebook, Twitter, Youtube, Images, Links) and transforms content into a clean JSON to be delivered to mobile devices or custom front-end UI.
composer.json and run composer update.{
"require": {
"vinelab/laravel-editor": "*"
}
}
providers array in app/config/app.php'Vinelab\Editor\EditorServiceProvider',
Publish the assets by running php artisan asset:publish vinelab/laravel-editor at the root of your project.
Access the editor with the Editor facade
<script type="text/javascript" src="https://raw.githubusercontent.com/Vinelab/laravel-editor/refs/heads/main//code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript" src="https://raw.githubusercontent.com/Vinelab/laravel-editor/refs/heads/main//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">Mr.Uploader: To have the photo cropping and upload working you need to add
To have all the embeds working in the preview you will need to add the social media scripts to your HTML.
<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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script async src="https://raw.githubusercontent.com/Vinelab/laravel-editor/refs/heads/main//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script async src="https://raw.githubusercontent.com/Vinelab/laravel-editor/refs/heads/main//platform.instagram.com/en_US/embeds.js"></script>
To display the editor you simply need to call
Editor::view()
You may also call it passing existing content
Editor::view($text);
{{ Form::open(['url' => 'handle', 'method' => 'POST']) }}
{{ Editor::view() }}
{{ Form::submit() }}
{{ Form::close() }}
To get the content from the input use Editor::input() to get the editor's input name and use it with Input
as such
$input = Input::get(Editor::input());
Then pass it to Editor::content($input) for the raw content or Editor::json($input) for the JSON representation
of the output.
$content = Editor::content($input);
// $content is an instance of Vinelab\Editor\Content
The text used in the editor for this example is the following:
[Oxford Town](http://dylan.town)
<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500"></div>
<div class='fb-post' data-href='https://www.facebook.com/FacebookDevelopers/posts/212625821854109664' data-width='500'></div>
<blockquote class="twitter-tweet" lang="en"><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="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>— US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote>
<iframe width="560" height="315" src="https://raw.githubusercontent.com/Vinelab/laravel-editor/refs/heads/main//www.youtube.com/embed/sOOebk_dKFo" frameborder="0" allowfullscreen></iframe>
Lines are all 0 indexed
$json = $content->toJson();
{
"text": "The text in here",
"html": "<p>The text in here</p>",
"embeds": {
"facebook": [
{
"url": "https://www.facebook.com/FacebookDevelopers/posts/10151471074398553",
"html": "<div class=\"fb-post\" data-href=\"https://www.facebook.com/FacebookDevelopers/posts/10151471074398553\" data-width=\"500\"></div>",
"line": 1
},
{
"url": "https://www.facebook.com/FacebookDevelopers/posts/212625821854109664",
"html": "<div class='fb-post' data-href='https://www.facebook.com/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=\"http://t.co/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'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=\"http://t.co/YuKy2rcjyU\">pic.twitter.com/YuKy2rcjyU</a></p>— 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]
}
]
}
}
