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.
96 lines (88 loc) • 4.76 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;
}
</style>
</head>
<body>
<div id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Image Removed event</h1>
<p>In this example you can see how the <a href="https://www.froala.com/wysiwyg-editor/docs/events#image.removed"
title="image.removed">image.removed</a> event is fired. Don't forget to open the browser console.</p>
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
<ul>
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
nunc.</li>
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
sit amet eros. Vestibulum a rhoncus felis.<ol>
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
mattis fermentum.</li>
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
</ol>
</li>
</ul>
</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/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/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: {
'image.removed': function ($img) {
console.log('image removed', $img)
console.log('image src', $img.attr('src'))
}
}
})
})()
</script>
</body>
</html>