Editor / Rendering Modes
material theme

Rendering Modes

By default, the Editor will render its content in an iframe element.

To render the Editor content in a div element, set the defaultEditMode property to div.

The following example demonstrates how to change the rendering mode and how to style the Editor content.

const { Bold, Italic, Underline,
    AlignLeft, AlignRight, AlignCenter,
    Indent, Outdent,
    OrderedList, UnorderedList,
    InsertTable,
    Undo, Redo, Link, Unlink } = EditorTools;

const content =
   `<p>Some content with a list, paragraphs and a table.</p>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
    </ul>
    <p>a paragraph</p>
    <table>
        <tbody>
            <tr>
                <td><p>cell 1</p></td>
                <td><p>cell 2</p></td>
                <td><p>cell 3</p></td>
            </tr>
            <tr>
                <td><p>cell 4</p></td>
                <td><p>cell 5</p></td>
                <td><p>cell 6</p></td>
            </tr>
        </tbody>
    </table>
    <p>another paragraph</p>`;

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [ Bold, Italic, Underline ],
                    [ Undo, Redo ],
                    [ Link, Unlink ],
                    [ AlignLeft, AlignCenter, AlignRight ],
                    [ InsertTable ],
                    [ OrderedList, UnorderedList, Indent, Outdent ]
                ]}
                contentStyle={{ height: 290 }}
                defaultContent={content}
                defaultEditMode="div"
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
<style>
  .k-content p {
      margin: 0.6em 0 0.6em 0;
  }
  .k-content td p,
  .k-content th p,
  .k-content li p {
      margin: 0;
  }

  .k-content table {
      margin: 0;
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      overflow: hidden;
  }

  .k-content td,
  .k-content th {
      min-width: 1em;
      border: 1px solid #ddd;
      padding: 3px 5px;
      vertical-align: top;
      box-sizing: border-box;
      position: relative;
  }

  .k-content th {
      font-weight: bold;
      text-align: left;
  }

  /* Give selected cells a blue overlay */
  .k-content .selectedCell:after {
      z-index: 2;
      position: absolute;
      content: "";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(200, 200, 255, 0.4);
      pointer-events: none;
  }
</style>

Is this article helpful?

In this article

Not finding the help you need?

Contact Support