Learn how to create a blog editor with TinyMCE #2 : Plugins and Combine with additional plugins
Repository
https://github.com/tinymce/tinymce
What Will I Learn?
- Use plugin in TinyMCE
- How to write block code and write code in editor
- Add additional plugins
Requirements
- Html, CSS, javascript
- Install TinyMCE
Resources
- TinyMCE - https://github.com/tinymce/tinymce
Difficulty
Basic
Tutorial Content
This is a follow-up tutorial from the previous tutorial, in this tutorial, we will learn more about using TinyMCE. When we want to create a blog editor. of course, besides being able to type and create a paragraph and style, the user should be able to upload the image or file he wants, so we will learn how to add the plugin to TinyMCE and how to upload files through Tnymce, for that we just started the tutorial.
Install plugins on TinyMCE
There are several plugins or additional functions that we can use on TinyMCE, so TinyMCE doesn't come with all the features we have to add a plugin to complete it according to our needs. to add the plugin we can register it in the plugin settings. here is an example
- Plugin
'code'
We will try to add the plugin code to our editor. We can use the plugins key.
<!DOCTYPE html>
<html>
<head>
<title>How to use TinyMCe in our project</title>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'#tinymce',
width: 500, // the value must be (int)
height:200, // the value must be (int)
menubar:false, // the value is string and then the name of menubar category
plugins:'code',
toolbar:'code'
});
</script>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
- We can use the key plugin, the plugin name is
'code'. - then we can set the toolbar to bring up the source code toolbar
toolbar:'code'. then we will see the results as shown below.
as we see the picture above, the source code here is used to directly format elements or HTML tags, not as block codes that we use like javascript or other.
- Plugin
'codesample'
The plugin that is often used is the codeample plugin which is useful for displaying code without executing the code. We can use it like the example below.
<!DOCTYPE html>
<html>
<head>
<title>How to use TinyMCe in our project</title>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'#tinymce',
width: 500, // the value must be (int)
height:200, // the value must be (int)
menubar:false, // the value is string and then the name of menubar category
plugins:'code, codesample',
toolbar:'code, codesample'
//inline: true
});
</script>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
- We can add plugins by giving comma (,) separators but still in one string
plugins:'code, codesample'and so on the toolbar. we also separate it by comma (,)toolbar:'code, codesample'. We can see the results as below.
Upload image in TinyMCE
no less interesting in TinyMCE editor we can upload images like when we want to contribute in utopian, of course in this tutorial I uploaded several pictures. well, in TinyMCE we can upload images using plugins that we can use in the following way.
- Use plugin
'image'
<!DOCTYPE html>
<html>
<head>
<title>How to use TinyMCe in our project</title>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'#tinymce',
width: 500, // the value must be (int)
height:200, // the value must be (int)
menubar:false, // the value is string and then the name of menubar category
plugins:'code, codesample, image',
toolbar:'code, codesample,image'
});
</script>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
- We can use the plugin,
plugins: 'image'and we can also add the plugin to the toolbartoolbar:'image', If there is no error then we can see the results as shown below.
We can enter the url address of the image that we want to upload, like an example I will upload an image with an address we can enter the URL address of the image that we want to upload, like an example I will upload an image with an address https://s15.postimg.cc/4mbjfo2gr/10409251_889893394401047_7879135288675171079_n.jpg
Please note that we don't actually upload photos through our editor, but we only upload images based on the URL of the image we are headed for. for that, we will use another plugin to upload images.
- Upload image in editor
Now we will upload pictures from the TinyMCE editor, We can use another plugin. We can use it like this.
index.html
<!DOCTYPE html>
<html>
<head>
<title>How to use TinyMCE in our project</title>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'#tinymce',
width: 500, // the value must be (int)
height:200, // the value must be (int)
menubar:false, // the value is string and then the name of menubar category
plugins:'code, codesample,uploadimg',
toolbar:'code, codesample,uploadimg'
//inline: true
});
</script>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
Noted: To add another plugin, we must use the download or cloning from Github Tinymce. because before we used CDN. We can add additional plugins under the folder /tinymce/js/tinymce/plugins. then we adjust the folder name with the name in our code plugins and toolbar. in this tutorial the name of the plugin is uploadimg.
After we add the plugin we can try uploading an image. After we add the plugin we can try uploading an image and if you get an error like the picture below, it means we need to configure our plugin, this error occurs due to a path error when saving the image that we uploaded. to overcome this we need to do a set of config.
- Set config
Then we prepare a folder that will save the image that we will upload I will create an image folder. after we create a folder we have to configure the plugin that we add: uploadimg/config.
$config['img_path'] = 'duskitutor/tinymce/images'; // Relative to domain name
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path'];
Noted: Set your url name or file directory, in this tutorial my ulr directory name is duskitutor/tinymce.
We have learned the TinyMCE plugin in this tutorial. there are so many plugins that can support TinyMCE to be a powerful and more complete editor, of course, I hope you can explore other plugins, edit the TinyMCE editor and combine it with your code, hopefully, this tutorial is useful for you thanks.
Curriculum
Create blog editor#1 Install, config, manage display
Thank you for your contribution.
After analyzing your tutorial we suggest the following:
There is a lot of information on this subject, try to find something more innovative and contribute to the open source community.
The features of this tutorial are basic and are already well documented here
Try to come up with new and more innovative/useful ways to utilize TinyMCE.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @portugalcoin!
So far this week you've reviewed 15 contributions. Keep up the good work!
Hey, @duski.harahap!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Hi @duski.harahap!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server