Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+29 votes
17.4k views
in Plugins by
edited by

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+
by
See latest release on github. Sweet, sweet, sweet stuff
by
This seems to be broken in 1.8.0. I tried installing it but it shows up as plain text. I did an element inspect and it showed MCE editor. Network trace + console didn't show any errors. I tried fiddling around with the editor settings and it still shows up as plain text. It's a pity because it sounded really promising. :(
by
Okay. I will fix it for 1.8.0
by
When you hit the little bubble to comment, IMO, I think the editor should be able to copy the original content over or at least do @originalOP ... what do you all think?

9 Answers

+2 votes
by
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
by
For demo? Stay tuned!
This release will be free.
The differences from sceditor? Check the pudding! Can sceditor do or not do the things listed in the description? I haven't tried sceditor yet.
by
it would be better, if the admin can choose toolbar button what you want to display , just like sceditor plugin
by
You want toolbar to be configurable? Excellent - already included. I will update the post with beta version very soon.
by
Posted demo site link in main article, Please test and critique. Plugin comes out before Independence Day.
+1 vote
by
Does it support right to left languages?
by
Absolutely. Out of the box! You will be able to toggle between left-to-right and right-to-left like a boss.
by
I also question the same. thanks
by
With only three words you can enable this feature.
https://www.tinymce.com/docs/plugins/directionality/
+1 vote
by
is it ready?
by
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
by
This site is currently down for maintenance - please come back soon.
by
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/
+2 votes
by
edited by

@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.

by
Special @ mention plugin coming soon next release. Really awesome stuff!
by
Won't it be better if you can make a pull request for that in Q2A core? Moreover there is already one such plugin made sometime back (but never maintained), maybe it can be useful to you.
http://www.question2answer.org/qa/31733/
by
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
by
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
by

@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
by
edited by

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?

by
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/
by
Please see the edited answer, Thank you !
+3 votes
by
edited by

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"
    });
by
Thanks. This setting will be most liked by users :)
But when I tested there are some issues:

1. If I toggle from HTML to Markdown the editor closes. When it reopens it does come in Markdown.
2. More importantly the text entered in HTML is not getting saved. (Just empty content is showing or it says no character entered)
by
Let me see both your Rich Text and Markdown JSON.

Make sure to add this word in the list of plugins: q2aFluidity
by
I updated answer to a tested and working example. Enjoy.
by
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
by

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' }
  ]
 });

by
In the image below it seems you forgot step 2:

Check this [X]Enable Iframe Mode (default is Inline Mode - the true perfect WYSIWYG)
by
Thanks that worked great. Making the toolbar fixed is much much better for most users, and I'm sure most of them will like this.
by
Glad it got sorted out.
Depends who your "most users" are though. Using iframe is nothing short of archaic and inelegant.
This is the reason medium.com got incredibly popular - its editing interface!
And now with major RTEs (including TinyMCE) making a stronger official move to inline editing, the "most users" will start updating themselves.
https://www.tinymce.com/docs/demo/inlite/

Also, you can make the toolbars "fixed" in inline mode - if ever you feel like moving away from iframes.
The major benefit of inline is that you don't need extra CSS to preview your article. It uses your page's CSS. No tricks!
by
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 :)
by
You are right on that
+3 votes
by

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.

by
I am interested. Have you made one yet?
by
i'm interested too :)
...