190 lines
5.8 KiB
HTML
190 lines
5.8 KiB
HTML
<!DOCTYPE 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="../../js/froala_editor.min.js"></script>
|
|
|
|
<script>
|
|
// Define popup template.
|
|
Object.assign(FroalaEditor.POPUP_TEMPLATES, {
|
|
'customPlugin.popup': '[_BUTTONS_][_CUSTOM_LAYER_]'
|
|
})
|
|
|
|
// Define popup buttons.
|
|
Object.assign(FroalaEditor.DEFAULTS, {
|
|
popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
|
|
})
|
|
|
|
// The custom popup is defined inside a plugin (new or existing).
|
|
FroalaEditor.PLUGINS.customPlugin = function (editor) {
|
|
const $ = 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 fr-tabs">'
|
|
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
|
|
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', SVG_KEY: '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', SVG_KEY: 'close' });
|
|
FroalaEditor.RegisterCommand('popupClose', {
|
|
title: 'Close',
|
|
undo: false,
|
|
focus: false,
|
|
callback: function () {
|
|
this.customPlugin.hidePopup();
|
|
}
|
|
})
|
|
|
|
// Define custom popup 1.
|
|
FroalaEditor.DefineIcon('popupButton1', { NAME: 'bell-o', SVG_KEY: 'anchors' });
|
|
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', SVG_KEY: 'tags' });
|
|
FroalaEditor.RegisterCommand('popupButton2', {
|
|
title: 'Button 2',
|
|
undo: false,
|
|
focus: false,
|
|
callback: function () {
|
|
alert("popupButton2")
|
|
}
|
|
})
|
|
|
|
new FroalaEditor("#edit", {
|
|
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'myButton'], ['undo', 'redo'] ],
|
|
pluginsEnabled: ['customPlugin']
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |