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.
67 lines (58 loc) • 2.92 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="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 type="text/javascript" src="../../js/plugins/colors.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', '|', '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>