CODEWITHSUNDEEP
javascripttinymcewysiwyg
RAKTIM BANERJEE
RAKTIM BANERJEE

Reputation: 314

How to Config TinyMCE editor like google docs

I want to make a software like google docs (with basic features) with TinyMCE. I tried to give same look as google docs. enter image description here

But, the problem is that if I add multiple page (initialize multiple editor in same page) it shows multiple toolbar for each and every editable area. enter image description here

But, I want a same toolbar for all editable area or show the toolbar which corresponding editable area are focus. How to do that?

Here is my configuration code...

  tinymce.init({
    mode: 'specific_textareas',
    editor_selector : 'mytextarea',
    // inline: true
    height: '100vh',
    plugins: ['print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons'],

     toolbar: ['undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | insertfile image link'],

    menubar: 'favs file edit view insert format tools table help',
    content_css: 'css/content.css',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    toolbar_mode: 'floating',
    toolbar_sticky: true,
    branding: false,
    resize: false,
    statusbar: false
  });

Thanks in advance.

Upvotes: 0

Views: 1730

Answers (1)

Lostkeys
Lostkeys

Reputation: 344

This is unfortunately not easy nor straightforward and requires you knowing your way around Javascript.

In general terms you have to:

  1. You need to use inline mode, meaning you won't be using an iframe, instead you edit the HTML directly on the page. Which mean you have to recreate the paper appearance yourself.

  2. Use the fixed_toolbar_container option to render the TinyMCE toolbar inside a custom div. All toolbars should point to this div.

  3. Use the toolbar_persist option to have all toolbars render on page load and stay visible at all times. You would now have multiple toolbars visible on screen

  4. Here's the complicated part. Create events for focus and blur, then use TinyMCE.editor.ui.hide and TinyMCE.editor.ui.show to create your own manual logic for turning the correct toolbar on and off.

Far from a plug and play solution but hopefully this provides a starting point...

Upvotes: 4

Related Questions