How to set up document view

The main page of Jodit PRO has a Document display mode.

How to set up a similar look on your website?

This is not a special mode, but simply a series of settings that can be made in Jodit.

• Enable iframe in the editor
• Turn off placeholder. Usually the editor shows the text "Enter text", but in Document mode it is not needed

Jodit.make('#editor', {
	iframe: true,
  showPlaceholder: false
});
Copy

This allows you to set styles inside the iframe that will only apply to the content of the editor. The difficulty is that Jodit styles that are applied inside the document to service objects, for example, to page break, also need to be connected manually.

Jodit.make('#editor', {
	iframe: true,
	iframeStyle: `
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }
  `,
	iframeCSSLinks: [
    'https://cdn.jsdelivr.net/npm/jodit-pro@4.2.24/es2021.en/jodit.fat.min.css'
  ]
});
Copy

To make the editing area look like word, you can add styles to the body:

body {
	color: #333;
	line-height: 1.6;
	font-family: sans-serif, Arial, Verdana, 'Trebuchet MS',
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	width: 15.8cm !important;
	min-height: 21cm !important;
	box-sizing: content-box !important;
	padding: 1cm 1cm 2cm !important;
	border: 1px #d3d3d3 solid !important;
	margin: 0.5cm auto !important;
	background: white !important;
	border-radius: 5px !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
	font-size: 12pt !important;
}
p {
	margin-top: 0;
	margin-bottom: 6px;
	line-height: 1.4;
}
Copy

Let's turn off unnecessary buttons and panels:

Jodit.make('#editor', {
	iframe: true,
	iframeStyle: `
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }
  `,
	iframeCSSLinks: [],
	buttons: [
		'source',
		'|',
		{
			group: 'font-style',
			buttons: []
		},
		{
			group: 'list',
			buttons: []
		},
		{
			group: 'font',
			buttons: []
		},
		'|',
		'brush',
		'image',
		'align',
		'|',
		'pageBreak',
		'exportDocs'
	],
	removeButtons: ['changeCase', 'classSpan', 'lineHeight']
});
Copy

We can also give the font, font size and insert block buttons a drop-down list style, as it usually looks like in word:

Jodit.make('#ediror', {
	controls: {
    paragraph: {
      component: 'select'
    },
    font: {
      component: 'select'
    },
    fontsize: {
      component: 'select'
    }
	}
});
Copy

Let's set the width and minimum height of the editor:

Jodit.make('#editor', {
	iframe: true,
	iframeStyle: '',
	iframeCSSLinks: [],
	buttons: [],
	removeButtons: [],
	width: 762,
	minHeight: '21px'
});
Copy

Let's put it all together:

Jodit.make('#editor', {
  iframe: true,
  iframeStyle: `
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
      line-height: 1.6;
      width: 15.8cm !important;
      min-height: 21cm !important;
      box-sizing: content-box !important;
      padding: 1cm 1cm 2cm !important;
      border: 1px #d3d3d3 solid !important;
      margin: 0.5cm auto !important;
      background: white !important;
      border-radius: 5px !important;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
      font-size: 12pt !important;
    }
    p {
      margin-top: 0;
      margin-bottom: 6px;
      line-height: 1.4;
    }
  `,
  iframeCSSLinks: [
    'https://cdn.jsdelivr.net/npm/jodit-pro@4.2.24/es2021.en/jodit.fat.min.css'
  ],
  buttons: [
    'source',
    '|',
    {
      group: 'font-style',
      buttons: []
    },
    {
      group: 'list',
      buttons: []
    },
    {
      group: 'font',
      buttons: []
    },
    '|',
    'brush',
    'image',
    'align',
    '|',
    'pageBreak',
    'exportDocs'
  ],
  removeButtons: ['changeCase', 'classSpan', 'lineHeight'],
  controls: {
    paragraph: {
      component: 'select'
    },
    font: {
      component: 'select'
    },
    fontsize: {
      component: 'select'
    }
  },
  width: 762,
  minHeight: '21px',
  showPlaceholder: false
});
Copy

Let's look at the result:

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer’s wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar—except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.

When Dorothy stood in the doorway and looked around, she could see nothing but the great gray prairie on every side. Not a tree nor a house broke the broad sweep of flat country that reached to the edge of the sky in all directions. The sun had baked the plowed land into a gray mass, with little cracks running through it. Even the grass was not green, for the sun had burned the tops of the long blades until they were the same gray color to be seen everywhere. Once the house had been painted, but the sun blistered the paint and the rains washed it away, and now the house was as dull and gray as everything else.

— The Wonderful Wizard of Oz by L. Frank Baum.