SMAMUGAPAY/app/Views/riset/test/index.php

52 lines
2.1 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE 5 with Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- TinyMCE -->
<script src="<?php echo base_url('assets/tinymce/js/tinymce/tinymce.min.js') ?>"></script>
<script src="<?php echo base_url() ?>assets/admin/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="<?php echo base_url() ?>assets/admin/plugins/jquery/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<textarea class="form-control" id="editor"></textarea>
</div>
</body>
<!-- Initialize TinyMCE -->
<script>
tinymce.init({
selector:'#editor',
menubar: false,
statusbar: false,
plugins: 'autoresize anchor autolink charmap code codesample directionality fullpage help hr image imagetools insertdatetime link lists media nonbreaking pagebreak preview print searchreplace table template textpattern toc visualblocks visualchars',
toolbar: 'h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help fullscreen ',
skin: 'bootstrap',
toolbar_drawer: 'floating',
min_height: 200,
autoresize_bottom_margin: 16,
setup: (editor) => {
editor.on('init', () => {
editor.getContainer().style.transition="border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
});
editor.on('focus', () => {
editor.getContainer().style.boxShadow="0 0 0 .2rem rgba(0, 123, 255, .25)",
editor.getContainer().style.borderColor="#80bdff"
});
editor.on('blur', () => {
editor.getContainer().style.boxShadow="",
editor.getContainer().style.borderColor=""
});
}
});
</script>
</html>