Environment

Product Version3.0.0
ProductProgress® KendoReact

Customization

The following article contains examples for different customizations of the KendoReact Editor. It includes creating different custom tools and customizing existing ones.

Insert Span With a ClassName

How to make a tool that will insert a span element with a specific class and content.

Solution

We need to create a tool, that will insert text content and add the built-in style mark to it. The class attribute will be added when the mark object is created.

This is an example showcasing how to achieve this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@progress/kendo-react-buttons';
import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';

const content = `
    <p>
        The KendoReact Editor allows your users to edit HTML in a familiar,
        user-friendly way.<br />The Editor provides the core HTML
        editing engine, which includes text formatting, hyperlinks, and lists.
        The component <strong>outputs identical HTML</strong> across all major browsers,
        follows accessibility standards, and provides API for content manipulation.
    </p>
`;

const InsertSpan = (props) => {
    const { view } = props;
    const nodeType = view && view.state.schema.nodes.text;
    const canInsert = view && EditorUtils.canInsert(view.state, nodeType);
    return (
        <Button
            onClick={() => {
                const state = view.state;
                const tr = state.tr;
                const markType = state.schema.marks.style;
                const mark = markType.create({ class: 'testSpan' });
                const content = state.schema.text('test');
                tr.addStoredMark(mark);

                // https://prosemirror.net/docs/ref/#state.Transaction.replaceSelectionWith
                tr.replaceSelectionWith(content, true);

                view.dispatch(tr);
            }}
            disabled={!canInsert}
            onMouseDown={e => e.preventDefault()}
            onPointerDown={e => e.preventDefault()}
            title="Insert span"

            // https://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-list-of-font-icons
            icon="comment"
        />
    );
};

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [ EditorTools.Bold, InsertSpan ]
                ]}
                contentStyle={{ height: 300 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Insert Non Editable Node

How to insert non editable predefined node in the Editor?

Solution

This can be achieved by creating a tool that will insert a non editable Node. This Node will function as a single element and will be removed with a single key press.

import React from "react";
import ReactDOM from "react-dom";
import {
  Editor,
  EditorTools,
  EditorUtils,
  ProseMirror
} from "@progress/kendo-react-editor";
import { InsertShortcodeTool } from "./InsertShortcodeTool.jsx";

const { Bold, Italic, Underline, ViewHtml } = EditorTools;
const { Schema, EditorView, EditorState } = ProseMirror;

// This is the node configuration
const nonEditable = {
  name: "nonEditable",
  inline: true,
  group: "inline",
  content: "inline+",
  marks: "",
  attrs: {
    contenteditable: { default: null },
    class: { default: null },
    style: { default: null }
  },
  atom: true,
  parseDOM: [{ tag: "span.uneditable", priority: 51 }],
  // The styles can be added via the class as well
  toDOM: () => [
    "span",
    {
      contenteditable: false,
      class: "uneditable",
      style: "user-select: none; opacity: 0.5;"
    },
    0
  ]
};

class App extends React.Component {
  html = `<p>sample paragraph</p>`;

  onMount = event => {
    const { viewProps } = event;
    const { plugins, schema } = viewProps.state;

    // Append a new node.
    let nodes = schema.spec.nodes.addToEnd('nonEditable', nonEditable);

    // Create the new schema.
    const mySchema = new Schema({ nodes: nodes, marks: schema.spec.marks });

    // Create a new document using the modified schema.
    const doc = EditorUtils.createDocument(mySchema, this.html);

    // Return the custom EditorView object that will be used by Editor.
    return new EditorView(
      { mount: event.dom },
      {
        ...event.viewProps,
        state: EditorState.create({ doc, plugins })
      }
    );
  };

  render() {
    return (
      <Editor
        tools={[[Bold, Italic, Underline, ViewHtml, InsertShortcodeTool]]}
        contentStyle={{ height: 300 }}
        onMount={this.onMount}
      />
    );
  }
}

ReactDOM.render(<App />, document.querySelector("my-app"));

Apply Custom FontSize

How to make a tool that will apply custom font size to the selected content.

Solution

This can be achieved with a custom DropDownList tool that will apply the custom font-size based on array of font-size values.

import React from "react";
import ReactDOM from "react-dom";

import { Editor } from "@progress/kendo-react-editor";

import { CustomFontSize } from "./customFontSize.jsx";

const content = `<p>The KendoReact Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p>`;

class App extends React.Component {
  render() {
    return (
      <Editor
        tools={[[CustomFontSize]]}
        contentStyle={{ height: 300 }}
        defaultContent={content}
      />
    );
  }
}

ReactDOM.render(<App />, document.querySelector("my-app"));

Background Color Tool

How to create a tool that sets a background color?

Font Color Tool

How to create a tool that sets a color?

Clear Format Tool

How to create a tool that clears the inline formatting?

Solution

This example show how to add the background color, font color and clear format tools:

import React from 'react';
import ReactDOM from 'react-dom';

import { Editor } from '@progress/kendo-react-editor';

import MyColorTool from './myColorTool.jsx';
import BackgroundColorTool from './backgroundColorTool.jsx';
import ClearAll from './clearAll.jsx';

const content = `<p>The KendoReact Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p>`;

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [ MyColorTool, BackgroundColorTool, ClearAll ]
                ]}
                contentStyle={{ height: 300 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /