Skip to main content

Symfony

Welcome to the Symfony-specific documentation for On-Codemerge, an advanced web editor that can be seamlessly integrated into Symfony applications, blending Symfony's robust backend features with powerful frontend editing capabilities.

Getting Started with Symfony​

To integrate On-Codemerge into your Symfony project, you'll first need to set up the frontend environment within Symfony's structure.

Installation​

  1. Setup Symfony Encore: Symfony Encore is a simpler way to integrate Webpack into your Symfony application. If you haven't already set up Encore, you can do so by following the official Symfony documentation.

  2. Install on-codemerge: Once Encore is set up, install the on-codemerge package using npm or yarn in your Symfony project.

npm install --save on-codemerge

or

yarn add on-codemerge

Symfony Integration Example​

Here's a step-by-step guide to integrating On-Codemerge into a Symfony project:

  1. Configure Encore: In your webpack.config.js, set up Encore to compile your JavaScript assets.
webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
    // ... other configurations
    .addEntry('app', './assets/js/app.js')
    // ... other configurations

module.exports = Encore.getWebpackConfig();
  1. Initialize On-Codemerge: In your assets/js/app.js, import and initialize On-Codemerge.
assets/js/app.js
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

document.addEventListener('DOMContentLoaded', () => {
   const editorElement = document.getElementById('editor');
   if (editorElement) {
      const editor = new EditorCore(editorElement);
      editor.registerModule(new TextStylingButton());
      editor.registerModule(new TableButton());
      // ... additional configuration

      editor.subscribeToContentChange((newContent) => {
         console.log('Content changed:', newContent);
      });

      editor.setContent("Initial content goes here");
   }
});
  1. Build Your Assets: Use Encore to build your assets.
npm run encore dev

or

yarn encore dev
  1. Include the Script in Your Twig Template: In your Twig template, include the compiled JavaScript file.
templates/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <!-- Head Contents -->
    </head>
    <body>
        <div id="editor"></div>
        {{ encore_entry_script_tags('app') }}
    </body>
</html>

The encore_entry_script_tags function will correctly insert the <script> tags for your app entry.

  1. Routing and Controller Setup: Ensure you have a route and controller set up in Symfony to render the Twig template that includes On-Codemerge.

By following these steps, you can integrate On-Codemerge into a Symfony application, taking advantage of Symfony's structured approach to managing frontend assets. This integration allows you to use On-Codemerge's rich text editing capabilities within the context of Symfony's powerful backend framework.