<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.css' rel='stylesheet'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/htmlmixed/htmlmixed.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/xml/xml.js'></script>
</head>
<body>
<div style="background-color: #FFF; max-width: 800px; margin: auto; padding: 20px;">
<a href="https://www.tiny.cloud/"><img width="120" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" align="right"></a>
<h1>Online HTML Editor</h1>
<h2>Use the rich text editor</h2>
<p>Use this rich text editor to write and format your content. The resulting HTML will be displayed in the second box below. You can also edit the HTML directly and the changes will be reflected back in the editor.</p>
<textarea id="mytextarea"></textarea>
<h2>HTML output</h2>
<div class="HTMLContainer"></div>
<h2>Edit content directly within your software</h2>
<p>If you're not currently able to create and edit content with the convenience of a rich text editor directly within your software, ask your software provider about the possibility of upgrading the rich text editor component.</p>
<p><a href="https://www.tiny.cloud/" target="_blank" rel="noopener">TinyMCE</a> is the world's most popular rich text editor, trusted by millions of developers and used to power 100M+ products worldwide.</p>
<p>Next time you're choosing the best software for content creation, choose a platform with a powerful and trusted rich text editor already built in.</p>
<p>Read more in the related article about our <a href="https://www.tiny.cloud/blog/online-html-editor" target="_blank" rel="noopener">online HTML editor</a>.</p>
<br>
<center><a href="https://www.tiny.cloud/"><img width="150" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png"></a></center>
</div>
</body>body {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
background-color: #fafcff;
margin: 0;
}
img {
margin: 18px 0px;
}
.HTMLContainer {
width: 100%;
min-height: 300px;
border: dashed 2px #d8e3fa;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none;
}
tinymce.init({
selector: "#mytextarea",
height: 400,
plugins: [
"advlist autolink advcode lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste emoticons"
],
toolbar:
"styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | code ",
menubar: "file edit view insert format tools table help",
setup: function (editor) {
editor.on("keyup", function (e) {
updateHTML(editor.getContent());
});
editor.on("change", function (e) {
updateHTML(editor.getContent());
});
}
});
function updateHTML(content) {
cmeditor.getDoc().setValue(content);
}
function updateEditor() {
if (!tinymce.activeEditor.hasFocus()) {
tinymce.activeEditor.setContent(cmeditor.getDoc().getValue());
}
}
var HTMLContainer = document.querySelector(".HTMLContainer");
var cmeditor = CodeMirror(HTMLContainer, {
lineNumbers: true,
mode: "htmlmixed"
});
cmeditor.on("change", (editor) => {
updateEditor();
});
External CSS
This Pen doesn't use any external CSS resources.