Skip to main content

Laravel

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

Getting Started with Laravel​

To use On-Codemerge in a Laravel application, you'll first install the necessary JavaScript package and then integrate it into your Laravel views.

Installation​

  1. Install Node.js and npm: Ensure Node.js and npm are installed on your system as Laravel Mix, which compiles JavaScript, relies on them.

  2. Install on-codemerge: Navigate to your Laravel project's root directory and install the on-codemerge package via npm.

npm install --save on-codemerge

Laravel Integration Example​

Here's a basic example of integrating On-Codemerge into a Laravel project:

  1. Set Up Laravel Mix: Use Laravel Mix to compile your JavaScript. In your webpack.mix.js, add the JavaScript file where you'll use On-Codemerge.
webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
      //
   ]);
  1. Create the Editor Initialization Script: In your resources/js/app.js, import On-Codemerge and initialize it.
resources/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('myEditor');
   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. Compile Your Assets: Run npm run dev to compile your assets.

  2. Integrate in Blade Template: In your Blade template, make sure to include the compiled JavaScript and create a container for the editor.

welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head Contents -->
</head>
<body>
    <div id="myEditor"></div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

This Blade template includes the compiled JavaScript file and defines a div with the ID myEditor, where On-Codemerge will be initialized.

By following these steps, you can integrate On-Codemerge into a Laravel application, allowing you to leverage its rich text editing capabilities in your Laravel-based web projects. The integration process primarily involves setting up the frontend environment within Laravel's structure, ensuring that the editor is compiled and loaded correctly in the Laravel views.