Repository
https://github.com/tinymce/tinymce
What Will I Learn?
- Understand TinyMCE and Install
- Configuration in TinyMCE
- Manage display editor
- The difference in inline and normal mode
Requirements
- Html, CSS, javascript
- Install TinyMCE
Resources
- TinyMCE - https://github.com/tinymce/tinymce
Difficulty
Basic
Tutorial Content
This time we will learn how to use TinyMCE, TinyMCE is a WYSIWYG(what you see is what you get) editor. So what do users see when typing something, that is what the user will get, It's like we saw in Microsoft Word, we can make bold, italic, or underline writing and also change the style without using CSS or any style.Tinymce is often used on websites such as blogs or an admin system that requires editors to create news or text-based data that can be easily styled. we just start this tutorial.
- Install TinyMCE
to start using TinyMCE we need to install TinyMCE, to install it we can choose two ways. the first is by using CDN and the second we download the TinyMCE file. We can download it on the official TinyMCE website. in this tutorial I use CDN.
Use CDN:
<script type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.2/jquery.tinymce.min.js"></script>
index.html
We can use it on our HTML file, here I have created a file named index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<title>How to use TinyMCe in our project</title>
</head>
<body>
</body>
</html>
- Use TinyMCE
We have TinyMCE installed now we can use it. TinyMCE is used in the <text-area> tag in the HTML element, like the following.
<!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'
});
</script>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
We can initialize tinymce with tinymce.init(selector:'#tinymce')and then give the selector element like the #id, class or tag of the element, like the following example <textarea id="tinymce">Welcome to my tutorials</textarea>. If we succeed then we can see results like below, just by doing init and selecting the selector we can already use tinymce in the project.
The picture above is the default view of TinyMCE when we initialize if we want to do a costume we can configure TinyMCE.
TinyMCE configuration
There are some things we can set and we costume on TinyMCE like width, menubar, toolbar menu. we can configure the TinyMCE initialization as follows.
- Set Width and Hight
We can set the width and height in the text-area which is initialized as TinyMCE. If we usually change CSS to give width, then in TinyMCE there is a property that can adjust width: value(int)`` andheight: value(int)````. for more details, we can see the example below.
Index.html
<!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: 400, // the value must be (int)
width: 300 // the value must be (int)
});
</script>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
We can see as the picture above width and height changes according to the value we give
- Manage display
as we saw when the TinyMCE default page, there are lots of toolbars or styles that are not all that we use, we can see the picture below with the parts from the TinyMCE editor.
We can see the picture above there are a lot of menus that the user sees, of course, the user does not use all the menus, for that we can eliminate the menus that are not used. the following is an example.
Hide menubar
We can mask the toolbar in the following way:
<!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 (boolean)
});
</script>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
We can use it with the menubar key and the boolean value is true or false. for more details, you can see in the picture.
we can see menubar disappearing in the TinyMCE editor, now our editor is easier to see.
Hidden selected menubar
We can choose which menubar we will remove, as we see in the picture there are several menubars, namely file, edit, view, format. to get rid of one of them we can use it like the following.
<!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:'file' // the value is string and then the name of menubar category
});
</script>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
We use the same key that is menubar but this time the type is not boolean again but in the string the name of the category menubar ie file, edit, view, and format. for more details, we can see in the picture below.
Hide Toolbar
Just like a menubar, we can also remove the toolbar. the same way as a menubar. We can also give a boolean value to the toolbar: key. We can see the following example:
<!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
toolbar:'bold,italic' // true or false for hidden all
});
</script>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<textarea id="tinymce">Welcome to my tutorials</textarea>
</body>
</html>
We can choose what toolbar to display by entering a name from the toolbar, for example, the toolbar: 'bold, italic'
Inline mode
We already know and learn what menubar and toolbars are, now we will create an editor with the inline mode. What is the inline mode ? we just see an example as follows:
<!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
inline: true
});
</script>
</head>
<body>
<h1>Use Tinymce in your website</h1>
<div id="tinymce">You can type here ...</div>
</body>
</html>
- We can create inline mode using the key
inline: true - If we previously used the
<text-area>tag as a container from the TinyMCE editor now we will use the<div>element as the container, We can put the TinyMCE id inside the div<div id="tinymce">You can type here... </div>. We can see the results as shown below.
There is one more thing that I will discuss different styles in inline mode and in normal mode:
If we use inline mode then the style CSS will overwrite the contents of the editor for example as follows.
If we use normal mode then the element we use is
<iframe> </ frame>while if we use inline mode we will only get element<div>.
We have learned some important things in TinyMCE, I hope you can explore more about TinyMCE because this will really help you to create a website like a blog or news portal. Hopefully, this tutorial can benefit you, then I will discuss more about the plugin on TinyMCE. thank you...