Sebelum nya Rumah code sudah pernah menulis tentang tutorial tinymce text editor, nah sakarang Rumah Code akan memberikan tutorial lain tentang tinymce yaitu tutorial untuk menambahkan class pada menu insert/edit image. Ok sekarang mari kita mulai tutorial nya.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.1.2/tinymce.min.js"></script>
<textarea id="artikel">
</textarea>
tinymce.init({
selector: '#artikel',
height: 500,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste imagetools wordcount"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
]
});
tampilan image editor pada tinymce akan tampak seperti ini
image_class_list: [
{title: 'None', value: ''},
{title: 'Fluid', value: 'img-fluid'},
{title: 'Thumbnail', value: 'rounded img-thumbnail'},
{title: 'Thumbnail FL', value: 'rounded img-thumbnail float-left'},
{title: 'Thumbnail FR', value: 'rounded img-thumbnail float-right'}
],
setelah disisipkan tampilan nya akan berubah menjadi seperti ini
tinymce.init({
selector: '#artikel',
height: 500,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste imagetools wordcount"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
image_class_list: [
{title: 'None', value: ''},
{title: 'Fluid', value: 'img-fluid'},
{title: 'Thumbnail', value: 'rounded img-thumbnail'},
{title: 'Thumbnail FL', value: 'rounded img-thumbnail float-left'},
{title: 'Thumbnail FR', value: 'rounded img-thumbnail float-right'}
]
});
nah begitulah tutorial menambahkan class untuk image editor pada tinymce. Berikut ini demo nya untuk tutorial di atas