Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+29 votes
20.6k 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
This editor intends to use elFinder to start off. Let me know if you have any file browser/media manager preferences.

Added JavaScript Markdown preview (Showdown.js)
But JS is terrible compared to PHP parser this uses.

Will add this in future http://parsedown.org/demo
But it won't have live-preview which is not necessary.
by
Added Mathjax Preview inside Markdown Preview
Made them both responsive with live-change.

Added Ctrl+S to save questions, answers and comments - new and existing.
by
One of the most important feature I found is to tag a username like @scott here. This is possible with mention plugin but one needs to remember the username. It would be great to have the editor support it so that when I type @ and 3 or more characters, it pops up the possible usernames as in facebook. And that's it remaining part will be taken care of by mention plugin.
by
edited by
Great idea. Though it is outside the scope of an editor, I am sure I can work a plugin for this. Please send me a link to this "mention" plugin. Awesome!

Also, is there an editor that currently supports this?
by
Thanks. This is the mention plugin
http://www.question2answer.org/qa/8271/updated-mention-notifier-improved-updated-dowload-redownload

Don't think any q2a editor supports the autofill. But there is a user search plugin by Kai which works via AJAX and can be used here.
by
Perfect. I found a solution for the editor. This one relies on user names being supplied as JSON ... will have to see whether the plugin can fetch from Q2A DB user table.
by
Added editor for all admin pages and private message/wall - user can choose exactly where to initiate the editor - creativity galore!
by
How can we start trying it?  I cannot find the the link to download!
by
I'll post my demo site here in a few days, for you to test...then I will release it as a plugin shortly after.
Stay tuned on the main thread - prepare to be blown away!!!!
by
Added superior validation: now your users will never be rudely shocked or surprised by minimum character length of Question title/content, Answer/Comment content.
The editor will inform them nicely of missing/inadequate fields, and prevent posting.
by
That's fantastic. you are adding so many features and I would suggest to test them one by one. this way debugging would be a lot easier and in control. I personally do not look for any fancy stuff in the ckeditor. I just want one thing. I wanna be able to call it anywhere, in wall postings, private messages etc.
by
Features are highly modular - easy to test/enable/disable. They'll include all the long-sought items by frequent Q2A users.

*Added option to Disable Editor in Mobile mode...
by
great! what is the timeline like?
by
The oven is hot ... see some images in the main post .... hot hot hot ... more coming soon
by
cannot wait! but is this gonna work with ckEditor too?
by
Truly, you have raised my expectations... :D
by
I am just worried that all of that will make it heavy to load. We dont wanna disable it for mobile views. more than 60% of my visitors are on mobile
by
There are many users who want it disabled for mobile. Even this official Q2A site has out disabled.
This Editor does not load anything for these options. So, expect super fast CDN power.
by
ckEditor is good as we can upload images even using mobile. Anyways I guess i have to wait and see what your plugin  does . I am still confused if with your plugin i can call a wysiwyg editor everywhere or not!
by
@Waterfr Villa
This is a complete editor in its own right and meant to replace CKEditor or another editor. I can make one for CKEditor, but I just don't support other editors anymore - no time!
Remember, if there's a functionality you desire, just tell me, I'll make or find a plugin for you.
by
@armin
You have a good point. Q2A has a funny way of handling images, it uses DB. But I'll be moving away from that. Upload straight to server. Will work out the mobile upload part soon.

Scroll up to the image:
Complete Misc Control - Use RTE Editor Everywhere: Admin/Custom/User etc
by
Q2A also allows images to be stored as file on the server- though this is processed via blob id.
Some of the ckeditor features I use a lot are
1. List option - numbered list can be changed to alphabetic via 2 clicks.
2. Image center/left/right
3. Insert horizontal line, quote
4. code prettify - user can add C/Java/HTML codes with styling from google code prettify

But if the editor can be chosen per user, these are not important as long as important features like image upload works fine on mobile browser.
by
awesome! looking forward to see it. So excited!
by
@arjun
Good points.
I'll head on now and see to implement the native Q2A upload.

The toolbar for Miranda is so easily configurable, you'll laugh out loud.

And yes, I have a custom, handmade powerful plugin that takes care of entitizing source code - ready to be prismed or prettified by library of your choice.
I'll make this a noob's and developer's dream.
by
Added some more images. Will prepare live test/demo site for you to enjoy - and link to download plugin to test on your environment.
by
First idea: You should work on the design of the editor field itself. Currently it looks not that attractive. Remove the black shadow, remove the bold font weight, do not make the info data red but light blue.
by
Good points! I'll tweak the colours... There'll be a field in admin options for user to load own CSS to edit whatever he likes or does not like - all the matters of taste.
by
edited by
the floating toolbar is not responsive on mobile view ..
and I think it would better if position toolbar is fixed on bottom site ..
by
Because of 100% flexibility you can do anything you want with the toolbar. If you want it to float or be fixed or static..anything you want, it's all up to you.
by
not working in mobile view , I mean , I Cant see the toolbar when using mobile browser (sorry bad english)
by
edited by
Ah, The problem of activating floating toolbar with touchscreen! You can use fixed toolbar instead or use two fingers on touchscreen to activate contextmenu
by
I've added another mode (traditional iframe) this will allow static toolbar. The editor will look like CKEditor implementation.

July 4 is coming.... Plugin release!
by
Held back by the very last feature (I hope! enough is enough). I added elFinder - the most fantastic powerful and free (BSD) file/media browser out there. Use elFinder as a Custom Page and/or by inserting links and images via editor. Manage your files like a true owner.
by
Thanks. Waiting curiously
by
Is there an update for the editor release?
by
I kinda forgot. This should be released today :)
by
Hello @donshakespeare it's great that you have released the plugin.. :)
But don't you think that you should release it on Github so that it can reach to more people who search Q2A plugins on Github rather than just here?
by
In time!  :)
by
Thanks :) Just one doubt- how can a user upload an image? Can we stop server side browsing of directories?
Also is there an option to completely disable markdown?- do not want to confuse users as only RTE is used.
by
edited by
Whether using Magic Universal or Individual/Precise you have full control.
It's as easy as copying and pasting the RTE config into whatever box you like
//Rich Text
tinymce.init({...

A user can manage his files when he wants to add/edit a link/image/video
Find the buttons on the toolbar.

ADMIN USERS have full access - just drag your files into elFinder it will upload, or use the UPLOAD BUTTON

BASIC USERS are being blocked by
   "attributes": [
        {
          "pattern": "//",
          "read": true,
          "write": false,
          "locked": true
        }


Or you can create a Media Custom Page in your Q2A admin
<iframe id="media" src="/question2answer/qa-plugin/tinymcewrapper/qa-elfinder.php?rememberLastDir=1&defaultView=list" width="100%" height="500px" frameborder="0" scrolling="0"></iframe>
by
The buttons on your toolbar simply call this direct link:
/question2answer/qa-plugin/tinymcewrapper/qa-elfinder.php?rememberLastDir=1&defaultView=list

You may edit this link to provide more awesome parameters
 elFinderBrowserSettings: {
    url: tinymcewrapperPluginSrc+"qa-elfinder.php?rememberLastDir=1&defaultView=list&unlocked=1"
}

As you have noticed, you can also link directly to elFinder, in your browser. Be awesome, be creative!!!!
by
Thanks :) But users can be real ignorant - dragging is too easy for someone but will never be known to some. As a website (normal Q2A) we should always have users in mind. On my site I get complaint that it is hard to find the register button :).

I'll try to customize the editor and make it user friendly.
by
There is drag n drop functionality; there is also the common upload button when your elFinder is open.  My point is, to access these features you MUST first OPEN elFinder which is your File/Media Browser.

To open elFinder in a modal window, use the IMAGE or LINK buttons on your editor toolbar or contextmenu (right-click).

OR

To open elFinder, give your users the direct url to elFinder somewhere on your template ... use <a href> or <button>, it's really up to you.

Play with it first, thoroughly... and then enjoy!

It is really easy for any kind of user. Maybe you now understand
by
Thanks. Yes, I got it. The upload button was disabled due to no write permission on the directory.
by
Awesome. Glad that got sorted out.
by
But I got another issue :( - the editor loads fine on Q,A,C but not for any admin pages or messages. No JS error also shown. I have enabled to initialize the editor everywhere. Any suggestion how can I check this?
by
I'm not on the PC now, but you have to specify the exact pages you want, in the fields below. For admin pages make sure the jQuery style selectors are not prohibiting you.
Find  :not(....)
And remove what you like. I put that line there to protect your content from being hijacked by rich text.

For messages, please enter the name of the page request, I can't remember it now.
by
Thank you :) It worked.
For messages though it isn't. The page request being added is "message" but the actual page is "message/userhandle". Could this be the issue?
by
It looks like I forgot to add the PHP line to take care of messages. I use SSO and not native users, so that slipped my mind completely. It's a quick fix. Will send you update when I get it done. Cheers.
by
Thanks you  :)
by
@arjunsuresh could you post an ANSWER here on this thread and share with the community how you are using Miranda, your custom configuration and all? thanks. It'll help others a great deal.
by
Sure, but I have not customized it yet. I'm just trying it myself. Probably by next week I shall give all details :)
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 :)
...