How to insert image in TinyMCE editor from computer
We all know that a rich text box editor is important for blog post types of websites. for a well-formatted blog post, we need a rich text box editor and when we post a blog to describe we must need many images and posters.
In this blog post, we learn how to upload or insert an image in TinyMCE editor from a computer step by step.
Step:1 create a new page
Create a new page and add some code in the header
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="//www.codermen.com/css/bootstrap.min.css">
<script src=//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js></script>
<script src=//cloud.tinymce.com/stable/tinymce.min.js></script>
<title>TinyMCE image upload</title>
next, add some code in the body part to view TinyMCE editor
Step:2 Add some CSS and Script
Now, add some CSS code to hide the input text box named image.
<style>
.hidden{display:none;}
</style>
At the last add some script to display TinyMCE editor with image upload feature.
<script>
$(document).ready(function() {
tinymce.init({
selector: "textarea",
theme: "modern",
paste_data_images: true,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
$('#upload').trigger('click');
$('#upload').on('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result, {
alt: ''
});
};
reader.readAsDataURL(file);
});
}
},
templates: [{
title: 'Test template 1',
content: 'Test 1'
}, {
title: 'Test template 2',
content: 'Test 2'
}]
});
});
</script>
Now run your application in your favorite browser and see the result.
Great, It works like Charm, let's click on the image icon button.
Good, now you can insert or upload an image in TinyMCE editor from a computer-like.
Perfect, it works, Enjoy your day.
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
4 Comments
murali
Publish on:-March 27th, 2020
i have a trial version of tinymce with api key. Where i have to insert the api key while initializing tinymce to avoid the comment "This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account" Except for this warning your code is working fine. Thanks
Liam Smith
Publish on:-May 18th, 2020
Wow, this is an amazing and informative post! I want to add little information that should be known by every user who is using TinyMCE.
It’s difficult to copy/paste the data to the editor from Word document, Excel, Powerpoint, or paint and you need a plugin to do this. I am using Pasteitcleaned and this plugin works fine with amazing functionality.
GeckoTT
Publish on:-November 16th, 2020
Really Amazing !! Thanks a lot.
Doni Winarso
Publish on:-November 21st, 2020
i have done in my project, but not work.. please help
You must be logged in to post a comment.