Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

TinymceWrapper Editor- [FREE on GITHUB]

+22 votes
2,912 views
asked May 22, 2016 in Plugins by donshakespeare
edited Aug 21, 2016 by donshakespeare

TinymceWrapper Editor - aka MIRANDA the Beautiful and Powerful

GITHUB DOWNLOAD LINK

A Stately Editor

I traversed this Q2A website and I heard the cries of many. I wiped mine own tears and set myself to work.

  1. Very beautiful integration of the awesome elFinder; to manage all your files/media on the server. Includes auto-creation of folders based on your user's username. + Ace / CodeMirror + MathJax + Perfect Pre/Code Manager.
  2. 130% configurable pure CDN Rich Text/ Markdown editor, with optional state-of-the-art floating toolbar. Works also in the Admin area, User Wall / Message and lots more places.
  3. Simple to customise Admin. Never touch a core file again!

Are You Awesome?

  1. Stay tuned on this thread
  2. Be supportive: Vote to 1000 votes
  3. Add your requests
  4. Return quality feedback
  5. Share this plugin
  6. Be more awesome!

I shall give them a tool whereby to write. This tool shall make them laugh. And when they shall have written, their content shall please both them that did the composition and them that shall chance to read or hear of said content.
-- donshakespeare to Kalif the Grateful

Q2A version: 1.7+
commented Aug 4, 2016 by arjunsuresh
Sure, but I have not customized it yet. I'm just trying it myself. Probably by next week I shall give all details :)
commented Aug 21, 2016 by donshakespeare
See latest release on github. Sweet, sweet, sweet stuff

9 Answers

+1 vote
answered May 22, 2016 by q2apro
1. Why not give a name or a link to demo?

2. Will there be a free version for the community?

3. What are the differences to http://www.q2apro.com/plugins/sceditor
commented May 23, 2016 by donshakespeare
You want toolbar to be configurable? Excellent - already included. I will update the post with beta version very soon.
commented Jun 25, 2016 by donshakespeare
Posted demo site link in main article, Please test and critique. Plugin comes out before Independence Day.
0 votes
answered May 24, 2016 by fara
Does it support right to left languages?
commented May 24, 2016 by donshakespeare
Absolutely. Out of the box! You will be able to toggle between left-to-right and right-to-left like a boss.
commented Jun 27, 2016 by David Gómez Garcia
I also question the same. thanks
commented Jun 27, 2016 by donshakespeare
With only three words you can enable this feature.
https://www.tinymce.com/docs/plugins/directionality/
0 votes
answered Jun 16, 2016 by Mayuresh
is it ready?
commented Jun 16, 2016 by donshakespeare
adding a few more features to enable admin add editor to place he ever finds a textarea...all custom pages, message, wall, admin etc
Will be ready for testing soon
commented Jul 13, 2016 by Waterfr Villa
This site is currently down for maintenance - please come back soon.
commented Jul 14, 2016 by donshakespeare
Yes. The playground is crowded with sweetly-ordered ideas. I got carried away by the possibilities of elFinder in conjunction with Q2A.
This puppy is on its last bone.
Trying to make this plugin as simple and powerful and beautiful as possible, and as free as possible.
With elFinder you can specify that each of your trusted user or user group have their own private media folder auto created. example.com/media/username/
+1 vote
answered Aug 9, 2016 by donshakespeare
edited Aug 9, 2016 by donshakespeare

@arjunsuresh

Updated plugin - please redownload (will add versioning soon ...and github maybe)

To initialize editor on user wall and private messages

Add message for private message textarea
Add user for user wall textarea

So example: admin/users, admin/layout, admin/posting, admin/pages, message, user

Note:  this plugin is not responsible for parsing Rich Text messages. Dev user will have to find some way to view the HTML created by this plugin.

Hope this helps.

commented Aug 15, 2016 by donshakespeare
Oh, this is a special editor @ facility plugin specifically for TinyMCE Editor, in response to @arjunsures http://www.question2answer.org/qa/51849/tinymcewrapper-miranda-updated-most-powerful-editor-joins?show=51905#c51905
commented Aug 15, 2016 by donshakespeare
Examples
1.  premium: https://www.tinymce.com/docs/plugins/mentions/
2. free: does not work with Q2A yet
https://github.com/StevenDevooght/tinyMCE-mention

3. free and awesome: will work with Q2A very soon
https://github.com/jakiestfu/Mention.js/
+1 vote
answered Aug 15, 2016 by donshakespeare

@okays as I stated elsewhere, TinymceWrapper supports Math Live Preview out of the box, but you and your users have to enter the Math formular/functions manually.

And yes, the superb Wiris Math Editor will work with TinymceWrapper. But that plugin is not free. You have to pay them.
http://www.wiris.com/plugins/demo/tinymce/php/

Maybe in future I will write my own Math Editor :)

0 votes
answered Aug 21, 2016 by Mayuresh
edited Aug 22, 2016 by Mayuresh

How to use TinyMCE custom theme?

Edit 1

in admin pan there is a link to TinyMCE Skin creator and there is one default template which is like below, so how to make it like this?

Update 2

@Donshakespeare Thank You for the help. But I just found that user cannot upload a new image they only have to add URL. When user click on image icon then folder icon a new pop-up (media browser) opened which has two folders Places & Public Basic folder but every other option is blurred. So How to let user upload new image?

commented Aug 21, 2016 by donshakespeare
Please flesh out your question more so that I can answer you better.

There are about four custom themes present.
To use your own upload your theme to any place outside your Q2A folder, somewhere safe.
And call the link in your editor init. See your admin plugin page.

skin: "link/to/your/skinFolder"

For more info please read this
https://www.tinymce.com/docs/advanced/creating-a-skin/
commented Aug 21, 2016 by Mayuresh
Please see the edited answer, Thank you !
+3 votes
answered Aug 21, 2016 by donshakespeare
edited Aug 22, 2016 by donshakespeare

UPDATED!!!

@Mayuresh Here is how to achieve this Full Feature Example in Q2A
https://www.tinymce.com/docs/demo/full-featured/

In TinymceWrapper Admin Plugin Page

  1. Change Skin to TinyMCE.
  2. Check this [X]Enable Iframe Mode (default is Inline Mode - the true perfect WYSIWYG)
  3. If having any issues in your top toolbar bg color, please update your css/style.css
    https://github.com/donShakespeare/TinymceWrapperQ2A/blob/master/css/style.css
  4. Paste this in any of your Editor init: Magic Universal or Precise Individual
    I hope this is the answer you were seeking

    Below Code for Rich Text. Note, you can load only the plugins you need.

    //Rich Text
    tinymce.init({
      selector: "[[+ID]]",
      height: 500,
      skin_url: "[[+SKIN]]",
      file_browser_callback: autoFileBrowser,
      elFinderBrowserSettings: {
        url: tinymcewrapperPluginSrc+"qa-elfinder.php?rememberLastDir=1&defaultView=1",
        title: "Media Browser"
      },
      plugins: [
        'q2aFluidity',
        'twPreCodeManager modxMagicHoverLink twAceEditor', // this can be used to replace 'codesample link code',
        'advlist autolink lists image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern imagetools'
      ],
      toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'print preview media | forecolor backcolor emoticons twPreCodeManager modxMagicHoverLink twAceEditor',
      image_advtab: true,
      templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
      ]
     });
    

    Below Code is for Markdown: note that most RTE plugins are useless in MD mode

    //Markdown
    tinymce.init({
      selector: "[[+ID]]",
      hidden_input: true,
      elFinderBrowserSettings: {
        url: tinymcewrapperPluginSrc+"qa-elfinder.php?rememberLastDir=1&defaultView=l",
        title: "Media Browser"
      },
      skin_url: "[[+SKIN]]",
      forced_root_block : "",
      force_br_newlines : true,
      force_p_newlines : false,
      file_browser_callback: autoFileBrowser,
      browser_spellcheck: true,
      gecko_spellcheck: true,
      valid_elements: "br",
      paste_as_text: true,
      plugins: [
        'twShowdown q2aFluidity twExoticMarkdownEditor twPreCodeManager modxMagicHoverLink autoresize',
        'q2aFluidity twPreCodeManager modxMagicHoverLink',
        'searchreplace wordcount fullscreen',
        'insertdatetime media save contextmenu directionality',
        'template paste'
      ],
      autoresize_bottom_margin: 0,
      autoresize_min_height: 100,
      // autoresize_max_height: 300,
      toolbar1: "ltr rtl | newdocument | boldMD italicMD | blockquoteMD | numlistMD bullistMD | link | twPreCodeManager | imageMD | tableMD | searchreplace | undo redo | charmap | preview",
      content_style:"body{font-size:15px!important;}",
      menubar: false, //quite useless in Markdown mode
      statusbar: true,
      contextmenu: "preview link twPreCodeManager boldMD italicMD linkMD imageMD blockquoteMD codeMD numlistMD bullistMD tableMD undo redo searchreplace"
    });
commented Aug 22, 2016 by donshakespeare
I updated answer to a tested and working example. Enjoy.
commented Aug 22, 2016 by arjunsuresh
Thanks. I just copy pasted this setting for Rich Text and tried. Even now, content typed is not getting saved on submit. I'll add the screenshot of settings as an answer here.
+1 vote
answered Aug 22, 2016 by arjunsuresh

This is the setting I used and the contents of posts are not being saved on submit. Just blank comes. I havent done anything on the Tinywrapper plugin from the github link.

//Rich Text
tinymce.init({
  selector: "[[+ID]]",
  height: 500,
  skin_url: "[[+SKIN]]",
  file_browser_callback: autoFileBrowser,
  elFinderBrowserSettings: {
    url: tinymcewrapperPluginSrc+"qa-elfinder.php?rememberLastDir=1&defaultView=1",
    title: "Media Browser"
  },
  plugins: [
    'q2aFluidity',
    'twPreCodeManager modxMagicHoverLink twAceEditor', // this can be used to replace 'codesample link code',
    'advlist autolink lists image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons twPreCodeManager modxMagicHoverLink twAceEditor',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ]
 });

commented Aug 22, 2016 by arjunsuresh
yes, I see the benefit. But most users of my site are regular ones and so I suppose for most of them most CSS and JS are cached and so editor being heavy is not a big deal. And being an educational site, simplicity matters more than performance. If things get hard for them, they will simply use Facebook :)
commented Aug 22, 2016 by donshakespeare
You are right on that
+3 votes
answered Aug 30, 2016 by donshakespeare

Clipboard Image paste and/or Drag and Drop - with Auto instant Server Upload

I have just written a script for my clients to accomplish drag and drop of images or pasting of clipboard images directly into the editor, which then auto/instantly uploads to pre-specified folder. User can edit: crop, resize, sharpen etc all on the fly...0

If anyone is interested in a Q2A version for this editor, let me know.

commented Jun 29 by Ankhamax
I am interested. Have you made one yet?
...