OnCodemerge Docs

Appearance

Spring ​

Welcome to the Spring Framework-specific documentation for On-Codemerge, an advanced web editor designed for easy integration with Spring-based applications.

Getting Started with Spring Framework ​

To integrate On-Codemerge into your Spring application, install the package:

bash
npm install --save on-codemerge

or

bash
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:
javascript
import 'on-codemerge/public.css';
import 'on-codemerge/index.css';
import 'on-codemerge/plugins/ToolbarPlugin/style.css';
import 'on-codemerge/plugins/AlignmentPlugin/public.css';
import 'on-codemerge/plugins/AlignmentPlugin/style.css';
import { HTMLEditor, ToolbarPlugin, AlignmentPlugin } from 'on-codemerge';

document.addEventListener('DOMContentLoaded', async () => {
  const editorElement = document.getElementById('editor');
  if (editorElement) {
    const editor = new HTMLEditor(editorElement);

    await editor.setLocale('ru');

    editor.use(new ToolbarPlugin());
    editor.use(new AlignmentPlugin());

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

    editor.setHtml('Initial content goes here');
    console.log(editor.getHtml());
  }
});
  1. Include the JavaScript in Your Spring View:
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>
  1. Controller Setup:
java
@Controller
public class YourController {

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