Learn how to create a blog editor with TinyMCE #1 : Install , Config, Manage Display and inline mode

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>

ezgif.com-video-to-gif (2).gif

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.
ezgif.com-video-to-gif (3).gif

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.

ezgif.com-video-to-gif (4).gif

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>

ezgif.com-video-to-gif (5).gif

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.

ezgif.com-video-to-gif (7).gif

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>.

ezgif.com-video-to-gif (9).gif

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...

Proof of workdone

https://github.com/milleaduski/tinymce

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]

Sort Order:

Trending

[-]

portugalcoin (72) · 6 years ago

$7.26

12 votes

utopian-io (71) · 6 years ago

Thank you for your review, @portugalcoin!

So far this week you've reviewed 9 contributions. Keep up the good work!

$0.00

1 vote

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!