PHPackages comur/content-admin-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. comur/content-admin-bundle ActiveSymfony-bundle[Templating & Views](/categories/templating) comur/content-admin-bundle ========================== Lets you add a symfony form field with a visual inline editor for all your templates with CKEditor 0.0.21(6y ago)21.0k[2 issues](https://github.com/comur/ContentAdminBundle/issues)MITHTMLPHP >=7.1CI failing Since May 29Pushed 6y ago1 watchersCompare [ Source](https://github.com/comur/ContentAdminBundle)[ Packagist](https://packagist.org/packages/comur/content-admin-bundle)[ Docs](https://github.com/comur/content-admin-bundle)[ RSS](/packages/comur-content-admin-bundle/feed)WikiDiscussions master Synced 3w ago READMEChangelog (9)Dependencies (10)Versions (21)Used By (0) Introduction ============ [](#introduction) This bundles helps you to add a field in your backend and edit all template contents dynamically thanks to [CKEditor inline editing](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_inline.html) It lets you edit also images by using [ComurImageBundle](https://github.com/comur/ComurImageBundle) If this bundle helps you reduce time to develop, you can pay me a cup of coffee ;) [![coffee](Resources/docs/coffee.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2RWFAL3ZNTGN6&source=url) [![coffee](https://camo.githubusercontent.com/7912ee92e6c9f1f9b131eeed2637f66f36664f6812165b0540166c9a2929c599/68747470733a2f2f7777772e70617970616c6f626a656374732e636f6d2f656e5f55532f46522f692f62746e2f62746e5f646f6e61746543435f4c472e676966)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2RWFAL3ZNTGN6&source=url) Installation ============ [](#installation) Applications that use Symfony Flex ---------------------------------- [](#applications-that-use-symfony-flex) Open a command console, enter your project directory and execute: ``` $ composer require comur/content-admin-bundle ``` Applications that don't use Symfony Flex ---------------------------------------- [](#applications-that-dont-use-symfony-flex) ### Step 1: Download the Bundle [](#step-1-download-the-bundle) Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle: ``` $ composer require comur/content-admin-bundle ``` This command requires you to have Composer installed globally, as explained in the [installation chapter](https://getcomposer.org/doc/00-intro.md)of the Composer documentation. ### Step 2: Enable the Bundle [](#step-2-enable-the-bundle) Then, enable the bundle by adding it to the list of registered bundles in the `app/AppKernel.php` file of your project: ``` // app/AppKernel.php // ... class AppKernel extends Kernel { public function registerBundles() { $bundles = [ // ... new Comur\ContentAdminBundle\ComurContentAdminBundle(), ]; // ... } // ... } ``` Configuration ============= [](#configuration) You can configure following parameters by creating a comur\_content\_admin.yaml in your config directory: ``` #config/comur_content_admin.yaml comur_content_admin: locales: ['en'] # this will add as many translation tabs as the number of locales when rendering content editing field templates_parameter: 'my_templates' # (optional) if you use this parameter, the bundle will use this parameter name as templates parameter and try to get templates using this parameter name entity_name: 'page' # (optional) a page parameter is passed to all templates when editing in backend (except if entity is not persisted yet) editable_tags: ['li', 'ul', 'td', 'th', 'i', 'span'] # (optional) use this parameter to set editable tags list for CKEditor, see: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dtd.html#property-S-editable templates: # optional template parameters - template: 'sections/developers/login.html.twig' controller: 'App\Controller\PageController::index' # Use controller instead of template (need anyway a template field to match and get controller parameter) controllerParams: pageId: '123' #... ``` Ex: screenshot of multilingual admin [![Edit Inline page multilingual](Resources/docs/edit-text.png?raw=true)](Resources/docs/edit-text.png?raw=true) Fullscreen mode: [![Edit Inline page fullscreen](Resources/docs/edit-fullscreen.png?raw=true)](Resources/docs/edit-fullscreen.png?raw=true) You can even edit a button label: [![Edit Inline page's button text multilingual](Resources/docs/edit-button.png?raw=true)](Resources/docs/edit-button.png?raw=true) ### Editable images [](#editable-images) Edit images with [ComurImageBundle](https://github.com/comur/ComurImageBundle) [![Editable image](Resources/docs/image-editable.png?raw=true)](Resources/docs/image-editable.png?raw=true) Select from your library (already uploaded images) [![Editable image library](Resources/docs/image-lib.png?raw=true)](Resources/docs/image-lib.png?raw=true) Upload image [![Editable image upload](Resources/docs/image-upload.png?raw=true)](Resources/docs/image-upload.png?raw=true) Crop on the go with HTML attribute defined sizes (crop / resize) [![Editable image crop](Resources/docs/image-crop.png?raw=true)](Resources/docs/image-crop.png?raw=true) Usage ===== [](#usage) Step 1: Add twig form template ------------------------------ [](#step-1-add-twig-form-template) ### NOT NEEDED ANYMORE, template is added automatically now ! [](#not-needed-anymore-template-is-added-automatically-now-) Add form field template to your twig configuration (config/twig.yaml): ``` twig: #... form_themes: - '@ComurContentAdmin/inline_content_field.html.twig' ``` Step 2: Include routes ---------------------- [](#step-2-include-routes) Include routes in your routes.yaml (config/routes.yaml): ``` comur_content_admin: resource: "@ComurContentAdminBundle/Resources/config/routes.yaml" ``` Step 3: Implement abstract entity --------------------------------- [](#step-3-implement-abstract-entity) ComurContentAdminBundle uses an property (orm column) to save dynamic content data in database using your related entity. To do so, you need to extend AbstractInlineContent class. This class will add a property called content in your entity (*so be careful to not use this column in your entity !*). ``` use Comur\ContentAdminBundle\Entity\AbstractInlineContent; class MyContentEntity extends AbstractInlineContent { //... } ``` Step 4: Use it in your admin (ex for sonata admin but can be used in custom admins too) --------------------------------------------------------------------------------------- [](#step-4-use-it-in-your-admin-ex-for-sonata-admin-but-can-be-used-in-custom-admins-too) ``` use Comur\ContentAdminBundle\Form\InlineContentType; //... protected function configureFormFields(FormMapper $formMapper): void { $formMapper //... ->add('content', InlineContentType::class, array( 'template_field_name' => 'template', // this will get template name from another field inside the same form (default is template) 'template' => 'frontend/index.html.twig', // optional, you must specify either one of template_field_name or template parameter 'class' => Page::class, // classname of your entity 'locales' => array('en', 'fr'), // Or pass a parameter (optional, you can globally configure it in yaml and override it here) 'required' => true // field extends symfony's HiddenType so you can use options from this class )) //... ; } ``` Step 5: Post size limit ----------------------- [](#step-5-post-size-limit) Be careful to your data size limit sent in POST request. You may have to change it to be able to get all from data (all dynamic content values). For more info check Do not forget to check your server's limit too (Nginx, Apache...) Step 6: Add twig filter into the template ----------------------------------------- [](#step-6-add-twig-filter-into-the-template) This bundle adds a new twig filter called "inlinecontent". You must use it for the bundle to determine and replace contents using data-content-id attribute on html tags needing content replacement. Ex: ``` {# templates/index.html.twig #} {% extends 'base.html.twig %} {% block body %} {# Need to pass content data to this filter so you need to pass content to your template (see step 7) #} {% filter inlinecontent(content) %} {# ... #} This is my default content that I can replace as I want using my form {% endfilter %} {% endblock body%} ``` Step 7: Pass content to your template from your controller ---------------------------------------------------------- [](#step-7-pass-content-to-your-template-from-your-controller) Content is managed by this bundle but you need to pass your content data to template for the bundle to have it and replace content accordingly. Ex: ``` // App/Controller/FrontController.php namespace App\Controller; use App\Entity\Page; // This is my entity extending ComurContentAdmin's AbstractInlineContent entity use Symfony\Component\HttpFoundation\Request; // Handle the request in the controller use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; class FrontController extends AbstractController { public function index(Request $request, $slug) { $page = $this->getDoctrine()->getManager()->getRepository(Page::class)->findOneBySlug($slug); return $this->render('frontend/index.html.twig', array( 'content' => $page->getContent($request->getLocale()) // This will return localized content data as an array and twig filter will replace default content of your template with this )); } } ``` Using ComurImageBundle to edit images ===================================== [](#using-comurimagebundle-to-edit-images) Step 1: Install Comur Image Bundle ---------------------------------- [](#step-1-install-comur-image-bundle) Please follow instructions on [ComurImageBundle](https://github.com/comur/ComurImageBundle) to install it Step 2: Activate comur\_image\_compatibility in config ------------------------------------------------------ [](#step-2-activate-comur_image_compatibility-in-config) ⚠️ **NOT NEEDED ANYMORE, bundle checks if ComurImageBundle is installed or not and activates automatically if it finds it** ``` comur_content_admin: #... enable_comur_image_bundle: true ``` Step 3: Add data attributes on images of your template ------------------------------------------------------ [](#step-3-add-data-attributes-on-images-of-your-template) Ex: ``` width="300" height="500" / ``` This code will automatically replaced by twig filter and src will be automatically filled by database value This limits usage to img tags (and cannot be used for background images) so if someone has an idea to edit background images, let me know ;) Step 4: Use it in your form --------------------------- [](#step-4-use-it-in-your-form) ``` use Comur\ContentAdminBundle\Form\InlineContentType; //... protected function configureFormFields(FormMapper $formMapper): void { $myEntity = $this->getMyEntity(); // Change it :) $formMapper //... ->add('content', InlineContentType::class, array( 'template_field_name' => 'template', // this will get template name from another field inside the same form (default is template) 'template' => 'frontend/index.html.twig', // optional, you must specify either one of template_field_name or template parameter 'class' => Page::class, // classname of your entity 'locales' => array('en', 'fr'), // Or pass a parameter (optional, you can globally configure it in yaml and override it here) 'required' => true // field extends symfony's HiddenType so you can use options from this class too 'comur_image_params' => array( 'uploadConfig' => array( 'uploadRoute' => 'comur_api_upload', //optional 'uploadUrl' => $myEntity->getUploadRootDir(), // required - see explanation below (you can also put just a dir path) 'webDir' => $myEntity->getUploadDir(), // required - see explanation below (you can also put just a dir path) 'fileExt' => '*.jpg;*.gif;*.png;*.jpeg', //optional 'libraryDir' => null, //optional 'libraryRoute' => 'comur_api_image_library', //optional 'showLibrary' => true, //optional 'saveOriginal' => 'originalImage', //optional 'generateFilename' => true //optional ), 'cropConfig' => array( 'minWidth' => 588, 'minHeight' => 300, 'aspectRatio' => true, //optional 'cropRoute' => 'comur_api_crop', //optional 'forceResize' => false, //optional 'thumbs' => array( //optional array( 'maxWidth' => 180, 'maxHeight' => 400, 'useAsFieldImage' => true //optional ) ) ) ) )) //... ; } ``` Please refer to [ComurImageBundle documentation](https://github.com/comur/ComurImageBundle) for complete list of parameters Development =========== [](#development) Any help in improving this bundle is kindly appreciated ! Please do not hesitate to send PR ! TODO ==== [](#todo) - Tests (not realy good at that so if someone wants to help !) - Add CKEditor parameters in config / form parameters - Parameter to not include ckeditor script if not needed (if already included elsewhere) - Find a way to pass parameters to templates (lot of time we have parameters to pass to templates and it's not possible for now) - Add [ComurImageBundle](https://github.com/comur/ComurImageBundle) compatibility to edit images **DONE** - Find a better way to replace content with data without using Dom Manipulation (can alter tags) Troubleshooting =============== [](#troubleshooting) ### Content didn't replaced [](#content-didnt-replaced) One reason for that is if you put some extra spaces in your html tags. DomDocument fixes html and removes extra spaces or other things that it founds not respectful of HTML rules. Ex: ``` ``` ### Health Score 22 — LowBetter than 21% of packages Maintenance0 Infrequent updates — may be unmaintained Popularity18 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~13 days Recently: every ~33 days Total 20 Last Release 2331d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6a651143b266408b7ba95424190aeaa2cc539b5c5f111a96739096c5e951e9ec?d=identicon)[comur](/maintainers/comur) --- Top Contributors [![comur](https://avatars.githubusercontent.com/u/1212381?v=4)](https://github.com/comur "comur (35 commits)") --- Tags admincmfcmscontentcontent-admincontent-editoreditorhtml-editorinline-editingpagesonata-adminsymfonysymfonytwigpagehtmlcontentcmsCKEditorcmfadminsonatainlineedit ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/comur-content-admin-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/comur-content-admin-bundle/health.svg)](https://phpackages.com/packages/comur-content-admin-bundle) ``` ### Alternatives [easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k17.5M374](/packages/easycorp-easyadmin-bundle)[sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.4M196](/packages/sulu-sulu)[2lenet/crudit-bundle The easy like Crud'it Bundle. 1615.6k12](/packages/2lenet-crudit-bundle)[kimai/kimai Kimai - Time Tracking 4.7k8.7k1](/packages/kimai-kimai)[chameleon-system/chameleon-base The Chameleon System core. 1027.9k4](/packages/chameleon-system-chameleon-base)[rcsofttech/audit-trail-bundle Enterprise-grade, high-performance Symfony audit trail bundle. Automatically track Doctrine entity changes with split-phase architecture, multiple transports (HTTP, Queue, Doctrine), and sensitive data masking. 1155.2k](/packages/rcsofttech-audit-trail-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)