froala-editor
Version:
The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
148 lines (137 loc) • 7.62 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/ai_assist.css">
<link rel="stylesheet" href="../../css/plugins/code_view.css">
<link rel="stylesheet" href="../../css/plugins/draggable.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
<link rel="stylesheet" href="../../css/plugins/file.css">
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
<link rel="stylesheet" href="../../css/plugins/help.css">
<link rel="stylesheet" href="../../css/plugins/code_snippet.css">
<link rel="stylesheet" href="../../css/third_party/spell_checker.css">
<link rel="stylesheet" href="../../css/plugins/special_characters.css">
<link rel="stylesheet" href="../../css/plugins/collaborative.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<!-- prismjs package for codeSnippet -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
.ss {
background-color: red;
}
</style>
</head>
<body>
<div id="editor">
<h3>For collaborative backend connection use wysiwyg-editor-node-sdk</h3>
<div id="edit" style="margin-top: 30px;">
</div>
</div>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.7/purify.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mammoth@1.11.0/mammoth.browser.js"></script>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/ai_assist.min.js"></script>
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
<script type="text/javascript" src="../../js/plugins/help.min.js"></script>
<script type="text/javascript" src="../../js/plugins/print.min.js"></script>
<script type="text/javascript" src="../../js/third_party/spell_checker.min.js"></script>
<script type="text/javascript" src="../../js/plugins/special_characters.min.js"></script>
<script type="text/javascript" src="../../js/plugins/word_paste.min.js"></script>
<script type="text/javascript" src="../../js/plugins/export_to_word.min.js"></script>
<script type="text/javascript" src="../../js/plugins/import_from_word.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_snippet.min.js"></script>
<script type="text/javascript" src="../../js/plugins/collaborative.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
height: 500,
collabConfig: {
enabled: true,
user: { id: 'async-user-2', name: 'Liam Scott', role: 'editor' },
docId: 'async-docid',
commentsUrl: `http://${window.location.hostname}:3000/collab/async-docid/comments`,
suggestionsUrl: `http://${window.location.hostname}:3000/collab/async-docid/suggestions`,
// realTime intentionally omitted — async mode (no WebSocket)
versionControl: {
enabled: true,
autoSaveEnabled: false,
url: `http://${window.location.hostname}:3000/collab/async-docid/versions`
}
},
saveURL: `http://${window.location.hostname}:3000/collab/async-docid/content`,
saveInterval: 10000,
events: {
initialized: function () {
const editor = this;
const contentUrl = `http://${window.location.hostname}:3000/collab/async-docid/content`;
fetch(contentUrl)
.then(res => res.ok ? res.json() : null)
.then(data => {
if (data && data.content) {
editor.html.set(data.content);
}
})
.catch(() => { });
}
}
});
})()
</script>
</body>
</html>