Skip to main content

Spring

Welcome to the Spring Framework-specific documentation for On-Codemerge, an advanced web editor designed for easy integration with Spring-based applications, enhancing Spring's powerful Java backend with rich frontend text editing capabilities.

Getting Started with Spring Framework​

To integrate On-Codemerge into your Spring application, you'll need to set up the frontend environment where the editor will be utilized.

Installation​

  1. Prepare Your Frontend Environment: If you are using a build system like Webpack for your frontend, you can install on-codemerge using npm or yarn. Alternatively, you can link to a CDN version directly in your HTML templates.
npm install --save on-codemerge

or

yarn add on-codemerge

Spring Framework Integration Example​

Here's how to integrate On-Codemerge into a Spring application:

  1. Create a JavaScript File for the Editor: Place a JavaScript file in your src/main/resources/static directory (or wherever your static assets are located).
src/main/resources/static/js/editor.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. Include the JavaScript in Your Spring View: In your Thymeleaf template (or other view technology), include the JavaScript file.
src/main/resources/templates/your_template.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Head contents -->
</head>
<body>
    <div id="editor"></div>
    <script th:src="@{/js/editor.js}"></script>
</body>
</html>

Use Thymeleaf’s th:src to correctly reference the path to your JavaScript file.

  1. Controller Setup: Ensure you have a Spring controller method that returns the view containing the editor.
YourController.java
@Controller
public class YourController {

    @GetMapping("/")
    public String home(Model model) {
        return "your_template";
    }
}

By following these steps, you can integrate On-Codemerge into a Spring application, providing a powerful editing tool in your Java-based web projects. This integration involves setting up the editor in a JavaScript file and then embedding it within the Spring MVC framework, ensuring a seamless combination of Spring's backend capabilities with advanced frontend text editing features.