1
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Custom Color Picker</h1>
|
||||
|
||||
<p>Using the <code>colors.min.js</code> plugin you can add in the WYSIWYG HTML editor the color picker feature.
|
||||
</p>
|
||||
|
||||
<p>There are 4 options that can be used to customize the color picker:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsBackground"
|
||||
title="colorsBackground option" target="_blank">colorsBackground</a> - An array of colors used in the colors
|
||||
popup for background.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsDefaultTab"
|
||||
title="colorsDefaultTab option" target="_blank">colorsDefaultTab</a> - Specifies the default color tab from
|
||||
the colors popup.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsStep" title="colorsStep option"
|
||||
target="_blank">colorsStep</a> - The number of colors displayed on a line in the colors popup.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsText" title="colorsText option"
|
||||
target="_blank">colorsText</a> - An array of colors used in the colors popup for text.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor',], ['undo', 'redo'] ],
|
||||
// Colors list.
|
||||
colorsBackground: [
|
||||
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
|
||||
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
|
||||
],
|
||||
colorsDefaultTab: 'background',
|
||||
colorsStep: 6,
|
||||
colorsText: [
|
||||
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
|
||||
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
|
||||
]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Custom Emoticons</h1>
|
||||
|
||||
<p>Using the <code>emoticons.min.js</code> plugin you can insert emoticons in the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>There are 2 options that can be used to customize the insert emoticon popup:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#emoticonsStep" title="emoticonsStep option"
|
||||
target="_blank">emoticonsStep</a> - The number of emoticons displayed on a line in the insert emoticon
|
||||
popup.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#emoticonsSet" title="emoticonsSet option"
|
||||
target="_blank">emoticonsSet</a> - An array of emoticons available in the insert emoticon popup.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
|
||||
<script>
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'emoticons'], ['undo', 'redo'] ],
|
||||
emoticonsStep: 4,
|
||||
emoticonsSet: [
|
||||
{
|
||||
'id': 'people',
|
||||
'name': 'Smileys & People',
|
||||
'code': '1f600',
|
||||
'emoticons': [
|
||||
{ code: '1f600', desc: 'Grinning face' },
|
||||
{ code: '1f601', desc: 'Grinning face with smiling eyes' },
|
||||
{ code: '1f602', desc: 'Face with tears of joy' },
|
||||
{ code: '1f603', desc: 'Smiling face with open mouth' },
|
||||
{ code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },
|
||||
{ code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },
|
||||
{ code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },
|
||||
{ code: '1f607', desc: 'Smiling face with halo' }
|
||||
]
|
||||
}]
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user