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.
107 lines (96 loc) • 4.25 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/code_view.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/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
div#dragme {
border: solid 1px #CCC;
display: inline-block;
padding: 10px;
background: #efefef;
}
[draggable=true] {
-khtml-user-drag: element;
}
</style>
</head>
<body>
<div id="editor">
<div id="dragme" draggable="true">
Drag & Drop me inside the editor
</div>
<div id='edit' style="margin-top: 30px;">
<h1>Drop Event</h1>
<p>Drag & Drop the box above into the editable area to see the <a
href="https://www.froala.com/wysiwyg-editor/docs/events#drop" title="Drop Event">drop</a> event being
triggered. Don't forget to open the browser console to follow the event.</p>
</div>
</div>
<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="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/align.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/font_size.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="../../js/plugins/line_breaker.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/inline_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
<script>
(function () {
const editorInstance = new FroalaEditor('#edit', {
enter: FroalaEditor.ENTER_P,
events: {
drop: function (dropEvent) {
console.log('drop')
const instance = this
editor.markers.insertAtPoint(dropEvent.originalEvent)
var $marker = editor.$el.find('.fr-marker')
$marker.replaceWith(FroalaEditor.MARKERS)
editor.selection.restore()
// Insert HTML.
editor.html.insert('Element dropped here.')
dropEvent.preventDefault()
dropEvent.stopPropagation()
return false
}
}
})
// For Firefox to work.
document.getElementById('dragme').addEventListener('dragstart', function (e) {
e.dataTransfer.setData('Text', this.id)
})
})()
</script>
</body>
</html>