I found so many articles about how to use wysiwyg editor in admin pages, and I was wondering if I could use it in the frontend templates. if yes, please tell me how. I'm using magento 2.1.5.
1 Answer
In frontend suppose we want wysiwyg-editor on a textarea and textarea having id : description
<textarea id="description" name="textarea_name"></textarea>
and use below script to load jquery and wysiwyg tiny_mce and assign to #description
require([ 'jquery', 'mage/adminhtml/wysiwyg/tiny_mce/setup' ], function(jQuery){ var config = '', editor; jQuery.extend(config, { settings: { theme_advanced_buttons1 : 'bold,italic,|,justifyleft,justifycenter,justifyright,|,', theme_advanced_buttons2: null, theme_advanced_buttons3: null, theme_advanced_buttons4: null, theme_advanced_statusbar_location: null }, files_browser_window_url: false }); editor = new tinyMceWysiwygSetup( 'description', config ); editor.turnOn(); jQuery('#description') .addClass('wysiwyg-editor') .data( 'wysiwygEditor', editor ); }); As per your's need you can update wysiwyg tiny_mce configuration. above one just an example.
- It is not working in my case..I tried the same ...Manish Goswami– Manish Goswami2017-10-05 12:28:17 +00:00Commented Oct 5, 2017 at 12:28
- @ManishGoswami can you share your logic so i can check, by the way what is not working in this code that also mention so i can help you easily.Kanhaiya lal– Kanhaiya lal2017-10-06 10:36:55 +00:00Commented Oct 6, 2017 at 10:36
- 1it is loading the tiny_mce in my case, but the editor area is not clickable, i am not able to put any data.Deepak Kumar– Deepak Kumar2017-11-02 10:11:15 +00:00Commented Nov 2, 2017 at 10:11
- @DeepakKumar click at the top left corner of editor in text area , you will get cursor pointer. once you get pointer you can enter you text or data.Kanhaiya lal– Kanhaiya lal2017-11-06 08:50:33 +00:00Commented Nov 6, 2017 at 8:50
- this is working but have bug for not clickable or click on only left topShiv Singh– Shiv Singh2020-01-10 09:12:27 +00:00Commented Jan 10, 2020 at 9:12