Double newline
by Guillaume Seguin
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://unpkg.com/ckeditor5/build/ckeditor5-dll.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="https://unpkg.com/@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm.js"></script>
</head>
<body>
<h1>Editable Editor</h1>
<div id="editable"></div>
<h1>Mirrored Output</h1>
<div id="mirror"></div>
<script type="module">
const onEditorChange = async (e) => {
const data = await e.getData()
console.log(`Output: ${data}`)
document.querySelector('#mirror').innerText = data
}
const createEditor = async (editorSelector) => {
const editorElement = document.querySelector(editorSelector)
const plugins = [
CKEditor5.markdownGfm.Markdown,
CKEditor5.essentials.Essentials,
CKEditor5.basicStyles.Bold,
CKEditor5.basicStyles.Italic,
CKEditor5.heading.Heading,
]
const options = {
toolbar: {
items: [
'bold',
'italic',
]
},
plugins
}
const editor = await CKEditor5.editorClassic.ClassicEditor.create(editorElement, options)
return editor
}
let editableEditor = await createEditor('#editable');
editableEditor.setData(
"À vendre **à Paris**, **maison de 9 pièces** d'une...
CSS
.editorOutputSet {
display: flex;
height: 150px;
}
.editor {
height: 150px;
}
.output {
border: 1px lightgray solid;
width: 100%;
}