\nNote that:<\/span> You don’t need to download the plugin file separately, all the required files exist in our source code package.<\/p>\n
Include TinyMCE JS Library<\/h2>\n
Load the tinymce.min.js file from the TinyMCE plugin directory to include the TinyMCE library in HTML page.<\/p>\n
<script<\/span> src<\/span>=\"tinymce\/tinymce.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\nAdd WYSIWYG HTML Editor to Textarea<\/h2>\n
Now, we will show you how to attach the TinyMCE editor to an HTML element and convert textarea to a rich text HTML editor on the webpage.
\nHTML Code:<\/b>
\nDefine a Textarea input HTML where the WYSIWYG HTML Editor will be added.<\/p>\n<textarea<\/span> id<\/span>=\"myTextarea\"<\/span>><\/span><\/textarea<\/span>><\/span><\/pre>\nJavaScript Code:<\/b>
\nInitialize TinyMCE plugin: Use the tinymce.init()<\/code> method to initialize the TinyMCE plugin and attach it to the HTML element on the webpage. The element needs to be specified in the selector<\/code> option and passed as an object in tinymce.init()<\/code>.<\/p>\nThe following example code will replace the Textarea field with the TinyMCE editor instance using the selector #myTextarea<\/code>. This code provides some default features of the TinyMCE editor for basic uses.<\/p>\ntinymce.init({\r\n selector: '#myTextarea'<\/span>\r\n});<\/pre>\nNow, the textarea element will replace with an HTML editor and display like the following screen.<\/p>\n
![\"tinymce-wysiwyg-html-editor-plugin-basic-features-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/tinymce-wysiwyg-html-editor-plugin-basic-features-codexworld-1024x439.png\")
<\/div>\nConfiguration Options<\/h2>\n
Some useful configuration options of the TinyMCE plugin are given below.<\/p>\n
height:<\/b>
\nUse the height<\/code> option to set the height of the editor including the menu and toolbars.<\/p>\ntinymce.init({\r\n selector: '#myTextarea'<\/span>,\r\n height: 300<\/span>\r\n});<\/pre>\nwidth:<\/b>
\nUse the width<\/code> option to set the width of the editor.<\/p>\ntinymce.init({\r\n selector: '#myTextarea'<\/span>,\r\n width: 300<\/span>\r\n});<\/pre>\nplaceholder:<\/b>
\nIf you want to set the placeholder text from JavaScript, use the placeholder<\/code> option in tinymce.init() object.<\/p>\ntinymce.init({\r\n selector: '#myTextarea'<\/span>,\r\n placeholder: 'Type here...'<\/span>\r\n});<\/pre>\nFull featured TinyMCE editor<\/h2>\n
The following example code displays all features available in TinyMCE for advanced uses.<\/p>\n
tinymce.init({\r\n selector: '#myTextarea'<\/span>,\r\n plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons'<\/span>,\r\n menubar: 'file edit view insert format tools table help'<\/span>,\r\n toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl'<\/span>,\r\n toolbar_sticky: true<\/span>,\r\n autosave_ask_before_unload: true<\/span>,\r\n autosave_interval: '30s'<\/span>,\r\n autosave_prefix: '{path}{query}-{id}-'<\/span>,\r\n autosave_restore_when_empty: false<\/span>,\r\n autosave_retention: '2m'<\/span>,\r\n image_advtab: true<\/span>,\r\n link_list: [\r\n { title: 'My page 1'<\/span>, value: 'https:\/\/www.codexworld.com'<\/span> },\r\n { title: 'My page 2'<\/span>, value: 'http:\/\/www.codexqa.com'<\/span> }\r\n ],\r\n image_list: [\r\n { title: 'My page 1'<\/span>, value: 'https:\/\/www.codexworld.com'<\/span> },\r\n { title: 'My page 2'<\/span>, value: 'http:\/\/www.codexqa.com'<\/span> }\r\n ],\r\n image_class_list: [\r\n { title: 'None'<\/span>, value: ''<\/span> },\r\n { title: 'Some class'<\/span>, value: 'class-name'<\/span> }\r\n ],\r\n importcss_append: true<\/span>,\r\n file_picker_callback: (callback, value, meta) => {\r\n \/* Provide file and text for the link dialog *\/<\/span>\r\n if<\/span> (meta.filetype === 'file'<\/span>) {\r\n callback('https:\/\/www.google.com\/logos\/google.jpg'<\/span>, { text: 'My text'<\/span> });\r\n }\r\n \r\n \/* Provide image and alt text for the image dialog *\/<\/span>\r\n if<\/span> (meta.filetype === 'image'<\/span>) {\r\n callback('https:\/\/www.google.com\/logos\/google.jpg'<\/span>, { alt: 'My alt text'<\/span> });\r\n }\r\n \r\n \/* Provide alternative source and posted for the media dialog *\/<\/span>\r\n if<\/span> (meta.filetype === 'media'<\/span>) {\r\n callback('movie.mp4'<\/span>, { source2: 'alt.ogg'<\/span>, poster: 'https:\/\/www.google.com\/logos\/google.jpg'<\/span> });\r\n }\r\n },\r\n templates: [\r\n { title: 'New Table'<\/span>, description: 'creates a new table'<\/span>, content: '<div class=\"mceTmpl\"><table width=\"98%%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><th scope=\"col\"> <\/th><th scope=\"col\"> <\/th><\/tr><tr><td> <\/td><td> <\/td><\/tr><\/table><\/div>'<\/span> },\r\n { title: 'Starting my story'<\/span>, description: 'A cure for writers block'<\/span>, content: 'Once upon a time...'<\/span> },\r\n { title: 'New list with dates'<\/span>, description: 'New List with dates'<\/span>, content: '<div class=\"mceTmpl\"><span class=\"cdate\">cdate<\/span><br><span class=\"mdate\">mdate<\/span><h2>My List<\/h2><ul><li><\/li><li><\/li><\/ul><\/div>'<\/span> }\r\n ],\r\n template_cdate_format: '[Date Created (CDATE): %m\/%d\/%Y : %H:%M:%S]'<\/span>,\r\n template_mdate_format: '[Date Modified (MDATE): %m\/%d\/%Y : %H:%M:%S]'<\/span>,\r\n height: 400<\/span>,\r\n image_caption: true<\/span>,\r\n quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable'<\/span>,\r\n noneditable_class: 'mceNonEditable'<\/span>,\r\n toolbar_mode: 'sliding'<\/span>,\r\n contextmenu: 'link image table'<\/span>,\r\n content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'<\/span>\r\n});<\/pre>\n![\"tinymce-wysiwyg-html-editor-plugin-advanced-full-featured-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/tinymce-wysiwyg-html-editor-plugin-advanced-full-featured-codexworld-1024x441.png\")
<\/div>\n