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.
104 lines (92 loc) • 5.51 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, 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/code_view.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
<link rel="stylesheet" href="../../css/plugins/file.css">
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
.class1 {
border-radius: 10%;
border: 2px solid #efefef;
}
.class2 {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Image Styles</h1>
<p>The classes should be defined in CSS, otherwise no changes will be visible on the image's appearance.</p>
<img class="fr-fil fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200"/>
<p>You can define your own image styles using the <code><a href="https://www.froala.com/wysiwyg-editor/docs/options#imageStyles" title="imageStyles" target="_blank">imageStyles</a></code> option. This option is an Object where the key represents the class name and its value is the style name that appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.</p>
<p>By default you can select multiple image styles at a time. If you want to toggle them and allow only one style to be selected at a time use the <code><a href="https://www.froala.com/wysiwyg-editor/docs/options#imageMultipleStyles" title="imageMultipleStyles" target="_blank">imageMultipleStyles</a></code> option.</p>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
// Define new image styles.
imageStyles: {
class1: 'Class 1',
class2: 'Class 2'
}
})
});
</script>
</body>
</html>