Файл: Main Website Files/assets/js/froala_editor/examples/code_preview.html
Строк: 102
<?php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css">
<style>
body {
text-align: center;
}
section {
width: 100%;
margin: auto;
text-align: left;
}
.col {
padding: 10px;
float: left;
width: calc(50% - 20px);
}
</style>
</head>
<body>
<section id="editor">
<div class="col">
<div id='edit' style="margin-top: 30px;">
<img class="fr-fir" src="../img/photo1.jpg" alt="Old Clock" width="300"/>
<h1>Click and edit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
</div>
</div>
<div class="col">
<div id="preview" class="froala-view"></div>
</div>
</section>
<script src="../js/libs/jquery-1.11.1.min.js"></script>
<script src="../js/froala_editor.min.js"></script>
<!--[if lt IE 9]>
<script src="../js/froala_editor_ie8.min.js"></script>
<![endif]-->
<script src="../js/plugins/tables.min.js"></script>
<script src="../js/plugins/urls.min.js"></script>
<script src="../js/plugins/lists.min.js"></script>
<script src="../js/plugins/colors.min.js"></script>
<script src="../js/plugins/font_family.min.js"></script>
<script src="../js/plugins/font_size.min.js"></script>
<script src="../js/plugins/block_styles.min.js"></script>
<script src="../js/plugins/media_manager.min.js"></script>
<script src="../js/plugins/video.min.js"></script>
<script src="../js/plugins/char_counter.min.js"></script>
<script>
$(function(){
$('#edit')
.editable({
inlineMode: false,
useClasses: true
})
.on('editable.contentChanged', function (e, editor) {
$('#preview').text(editor.getHTML());
})
});
</script>
</body>
</html>
?>