Insert HTML Button in Froala Editor V3
by froala
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<div id="froala-editor"></div>
JavaScript
FroalaEditor.DefineIcon('insertHTML', { NAME: 'plus', SVG_KEY: 'add' });
FroalaEditor.RegisterCommand('insertHTML', {
title: 'Insert HTML',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('Some Custom HTML.');
this.undo.saveStep();
}
});
new FroalaEditor('div#froala-editor', {
toolbarButtons: [
['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL'],
['insertHTML', 'undo', 'redo', 'html']
]
})