froala-editor
Version:
A beautiful 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.
191 lines (161 loc) • 6.06 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 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">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
.custom-layer {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Custom Popup example</h1>
<p>This is an example of how to create your own popup.</p>
</div>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script>
// Define popup template.
$.extend($.FroalaEditor.POPUP_TEMPLATES, {
'customPlugin.popup': '[_BUTTONS_][_CUSTOM_LAYER_]'
});
// Define popup buttons.
$.extend($.FroalaEditor.DEFAULTS, {
popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
});
// The custom popup is defined inside a plugin (new or existing).
$.FroalaEditor.PLUGINS.customPlugin = function (editor) {
// Create custom popup.
function initPopup () {
// Load popup template.
var template = $.FroalaEditor.POPUP_TEMPLATES.customPopup;
if (typeof template == 'function') template = template.apply(editor);
// Popup buttons.
var popup_buttons = '';
// Create the list of buttons.
if (editor.opts.popupButtons.length > 1) {
popup_buttons += '<div class="fr-buttons">';
popup_buttons += editor.button.buildList(editor.opts.popupButtons);
popup_buttons += '</div>';
}
// Load popup template.
var template = {
buttons: popup_buttons,
custom_layer: '<div class="custom-layer">Hello World!</div>'
};
// Create popup.
var $popup = editor.popups.create('customPlugin.popup', template);
return $popup;
}
// Show the popup
function showPopup () {
// Get the popup object defined above.
var $popup = editor.popups.get('customPlugin.popup');
// If popup doesn't exist then create it.
// To improve performance it is best to create the popup when it is first needed
// and not when the editor is initialized.
if (!$popup) $popup = initPopup();
// Set the editor toolbar as the popup's container.
editor.popups.setContainer('customPlugin.popup', editor.$tb);
// If the editor is not displayed when a toolbar button is pressed, then set BODY as the popup's container.
// editor.popups.setContainer('customPlugin.popup', $('body'));
// Trigger refresh for the popup.
// editor.popups.refresh('customPlugin.popup');
// This custom popup is opened by pressing a button from the editor's toolbar.
// Get the button's object in order to place the popup relative to it.
var $btn = editor.$tb.find('.fr-command[data-cmd="myButton"]');
// Compute the popup's position.
var left = $btn.offset().left + $btn.outerWidth() / 2;
var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);
// Show the custom popup.
// The button's outerHeight is required in case the popup needs to be displayed above it.
editor.popups.show('customPlugin.popup', left, top, $btn.outerHeight());
}
// Hide the custom popup.
function hidePopup () {
editor.popups.hide('customPlugin.popup');
}
// Methods visible outside the plugin.
return {
showPopup: showPopup,
hidePopup: hidePopup
}
}
// Define an icon and command for the button that opens the custom popup.
$.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
$.FroalaEditor.RegisterCommand('myButton', {
title: 'Show Popup',
icon: 'buttonIcon',
undo: false,
focus: false,
popup: true,
// Buttons which are included in the editor toolbar should have the plugin property set.
plugin: 'customPlugin',
callback: function () {
if (!this.popups.isVisible('customPlugin.popup')) {
this.customPlugin.showPopup();
}
else {
if (this.$el.find('.fr-marker')) {
this.events.disableBlur();
this.selection.restore();
}
this.popups.hide('customPlugin.popup');
}
}
});
// Define custom popup close button icon and command.
$.FroalaEditor.DefineIcon('popupClose', { NAME: 'times' });
$.FroalaEditor.RegisterCommand('popupClose', {
title: 'Close',
undo: false,
focus: false,
callback: function () {
this.customPlugin.hidePopup();
}
});
// Define custom popup 1.
$.FroalaEditor.DefineIcon('popupButton1', { NAME: 'bell-o' });
$.FroalaEditor.RegisterCommand('popupButton1', {
title: 'Button 1',
undo: false,
focus: false,
callback: function () {
alert("popupButton1 was pressed");
}
});
// Define custom popup 2.
$.FroalaEditor.DefineIcon('popupButton2', { NAME: 'bullhorn' });
$.FroalaEditor.RegisterCommand('popupButton2', {
title: 'Button 2',
undo: false,
focus: false,
callback: function () {
alert("popupButton2");
}
});
$(function(){
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'myButton', '|', 'undo', 'redo'],
pluginsEnabled: ['customPlugin']
})
});
</script>
</body>
</html>