Vue.js TinyMCE Library to Build WordPress Wysiwyg Rich HTML Text Editor in Browser Using Javascript Full Project For Beginners

You are currently viewing Vue.js TinyMCE Library to Build WordPress Wysiwyg Rich HTML Text Editor in Browser Using Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a wordpress like wysiwyg rich html text editor using vue.js using tinymce library in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following below code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link rel="stylesheet" href="https://www.tinymce.com/css/codepen.min.css">
  </head>
  <style>
      pre {
  padding: 5px 10px;
  background: #f0f0f0;
  font-family: Consolas, 'Ubuntu Mono', Monaco, monospace;
}
  </style>
  <body>
    <div id="app">
        <pre>{{ $data }}</pre>
        <div class="editable"></div>
      </div> 
      
</body>
  <script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
  <script src="script.js"></script>
</html>

 

Now make a script.js file and copy paste the following below code

 

script.js

 

new Vue({
    el: '#app',
    
    data() {
      return {
        content: ''
      }
    },
    
    mounted() {
      
      const self = this
  
      tinymce.init({
        selector: 'div.editable',
        init_instance_callback: function (editor) {
          editor.on('keyup', function (e) {
            self.content = e.target.innerHTML
          });
        }
      })
      
    }
  })

 

 

Now if you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply