despark / html-template-curator
Laravel 5.1 package, which enables you to manage complicated HTML templates, preserving the design integrity.
Installs: 133
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 1
Open Issues: 1
Language:JavaScript
Type:plugin
Requires
- php: >=5.5.9
- cviebrock/image-validator: 2.0.*@beta
- illuminate/database: 5.1.*
- illuminate/routing: 5.1.*
- illuminate/support: 5.1.*
- intervention/image: ~2
- intervention/imagecache: ~2.1
- laravelcollective/html: ~5.0
README
Laravel 5 package, which enables you to manage complicated HTML templates, preserving the design integrity. (if you want to use this plugin with Laravel 4 please require the v1.0.2 )
The purpose of this package is to help you implement rich text editing for complicated HTML views, but remove the risk of breaking the beautiful designs, which your talanted designers produced.
The idea is that when coding your HTML templates you add the eg-editable
class to all the elements, which you want to enable for editing through the HTML Template Curator and the curator automatically injects inline editors for them only when initialised.
Genting Started
-
Add the following dependency to your composer.json's require section:
"despark/html-template-curator": "2.*"
In order to use the plugin you need to set composer's
minimum-stability
to beta, because we are using cviebrock/image-validator in beta release, since stable is still not provided for Laravel 5. -
Run composer update
-
Add the HTML template curator's service provider in * config/app.php*
'Despark\HtmlTemplateCurator\HtmlTemplateCuratorServiceProvider::class',
-
Run
php artisan vendor:publish --provider="Despark\HtmlTemplateCurator\HtmlTemplateCuratorServiceProvider" --tag="views"
to publish views -
Run
php artisan vendor:publish --provider="Despark\HtmlTemplateCurator\HtmlTemplateCuratorServiceProvider" --tag="config"
to publish the configuration files -
Run
php artisan vendor:publish --provider="Despark\HtmlTemplateCurator\HtmlTemplateCuratorServiceProvider" --tag="public"
to publish the assets -
Put your amazing HTML templates (which include the required
eg-editable
on all the editable sections) in a new folder called templates in your public directory. (In the /public/packages/despark/html-template-curator/templates/ folder you will find some examples of HTML templates) -
In the views where you want to enable the Template Curator functionality you need to have atleast the following two elements.
A
<select>
field which will load the available templates, so that the user can select the layout, which to edit. E.g.{{ Form::select('template', [], null, ['class' => 'form-control js-artice-template']) }}
A
<textarea>
element in which the raw and up to date HTML of the template will be loaded. (keep in mind that this element will be automatically hidden by the script) E.g.{{ Form::textarea('content', null, ['id' => 'content']) }}
-
In the view which will hold the editor after the definition of the elements above add the following code:
@include('packages.despark.html-template-curator.partials.modal_editor_definition') {{-- Includes the modal popup --}} @include('packages.despark.html-template-curator.partials.script') {{-- The needed JavaScript files for the HTML Template Curator --}} <script> $(function () { $('.js-artice-template').templateEditor('#content'); /* In addition you can define the currently selected template with its value in select box as second parameter - usefull when editing already saved page. And custom selector for the container, which will contain the visual presentation of the template as a 3rd parameter E.g. $('.js-artice-template').templateEditor('#content', 'book', '#my_selector');*/ }); </script>
You can uncoment {{-- <script src="{{ asset('vendor/html-template-curator/js/vendor/jquery/dist/jquery.min.js') }}"></script> --}}
if you don't already have jQuery required somewhre in your code.
10. Add the available templates in the following config: * config/html-template-curator.php* under the templates
key of the config array. As key for each element of the array put the name of the folder in which the template is stored and as a value put the display name you want to appear in the select field.
11. Make sure you have set the proper app URL in the * config/app.php* file
12. After you are done navigate the page you just created and start editing your templates.
In the package views you will find a folder called examples, which contains sample implementations of the editor.
P.S.: Keep in mind that this is still work in progress, so there might some small issues for resolving, but I count on you and your great pull-requests to make it a great plugin