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.
74 lines (64 loc) • 2.86 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">
<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>