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.
127 lines (115 loc) • 6.2 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/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="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>Custom Dropdown</h1>
<p>An example of custom dropdown for the WYSIWYG HTML editor.</p>
<p>More details about defining a custom dropdown can be found in the <a
href="https://froala.com/wysiwyg-editor/docs/concepts/custom/dropdown" title="Custom Dropdown Concept"
target="_blank">Custom Dropdown</a> concept.</p>
<p>After defining custom buttons you need to add them to the toolbar buttons list, using the following options: <a
href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtons" title="toolbarButtons"
target="_blank">toolbarButtons</a>, <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsMD"
title="toolbarButtonsMD" target="_blank">toolbarButtonsMD</a>, <a
href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsSM" title="toolbarButtonsSM"
target="_blank">toolbarButtonsSM</a> and <a
href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsXS" title="toolbarButtonsXS"
target="_blank">toolbarButtonsXS</a> as explained in the <a
href="https://froala.com/wysiwyg-editor/examples/custom-toolbar" title="Custom Toolbar Example"
target="_blank">Custom Toolbar</a> example.</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/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>
(function () {
FroalaEditor.DefineIcon('my_dropdown', { NAME: 'cog', SVG_KEY: 'cogs' })
FroalaEditor.RegisterCommand('my_dropdown', {
title: 'Advanced options',
type: 'dropdown',
focus: false,
undo: false,
refreshAfterCallback: true,
options: {
'v1': 'Option 1',
'v2': 'Option 2'
},
callback: function (cmd, val) {
console.log(val)
},
// Callback on refresh.
refresh: function ($btn) {
console.log('do refresh')
},
// Callback on dropdown show.
refreshOnShow: function ($btn, $dropdown) {
console.log('do refresh when show')
}
})
new FroalaEditor("#edit", {
toolbarButtons: [ ['bold', 'italic', 'formatBlock', 'my_dropdown'] ]
})
})()
</script>
</body>
</html>