Editor / Rendering Modes
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.
- Example
- View Source
- Open In Stackblitz
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>