TinyMCE plugin - insert snippet from the tinyMCE toolbar

Another goodie for the TinyMCE editor But first a warning. This is very much an alpha version and definitively should not be used in any production environment! I’m posting it here for some feedback and to see if someone want’s to help me push it in the right direction. My javascript is a little stale...

See the readme.txt file in the attached zip. file and the example screenshot.

Installation:
1. unzip "modx.tiny.snippets.zip" into the assets/plugins/timymce/ folder.

2. Add "modxsnippet" to the plugins in the TinyMCE configuration. In MODx this
needs to be done in the TinyMCE plugin in 2 places. Look for the $fullScript
variable and add ’modxsnippet’ to this the plugins setting (around line 227)
and add a button to a toolbar (around line 234)

It should look like this (without the newlines - I broke up the lines for clarity):

EDIT: For the 0.9.5 version things have changed quite a bit so you may have to look around in the TinyMce plugin configuration a bit. You can probably set this on the configuration tab now, although I haven’t checked that out myself yet.



3. Set the TinyMCE theme to full featured in System Configuration.

Go and edit a page and you should see an extra button on the toolbar. Click and enjoy!

Updated!

version 0.3:

• Will now recognize when you have selected a snippet call in the content editor ( but only if you select the whole snippet call ie from [[ to and including ]] )
• Shows a list of parameters if you expose them in each snippet configuration (see readme file for instructions)
• Supports languages. Currently Dutch and Englisg included (as those are the only ones I’ve mastered enough)
• Updated paths in the zip file

Nice plugin! Thanks

Very nice indeed Toby.

Keep ’em coming! (speaking of... have you ever used Subversion before? I’d like to get you a branch to work on and access to the Tiny MCE plugins dev branch...)

Quote from: rthrash at Aug 19, 2006, 03:34 PM

(speaking of... have you ever used Subversion before? I’d like to get you a branch to work on and access to the Tiny MCE plugins dev branch...)

Yep, I’d be in for that. Although I’ve been a CVS person until recently, I installed tortoiseSVN just the other week. Makes using svn a breeze I find.

Now however, I’m jumping into a good night sleep.

cool addon indeed...

perhaps there could be a text input area below the cache/nocache buttton to add parameters, since there is really no way at the moment to list the configurations which are available per snippet. Then just add the input to the insertSomething() function in the snippets.php file.

Wow! thats really nice work man!

Looking forward to see this goes final

good luck.

zi

@breezer: I’m currently considering doing it via the snippet configuration parameters (on the properties tab). This would leave it up to the admin manager which variables (s)he finds important. Adding something like this (could include default values):

&tinyVars=Default variables in TinyMce Editor;string;phMode:0:,menuName:sideNav,siteMapRoot:1,removeNewLines:1,maxLevels:3

The form will be updated depending on which snippet you select in teh dropdown. A plain text field as you suggested can be added to any snippet that doesn’t have the tinyVars set.

What do you think?

Very nice Toby... keep it coming!

TobyL, I tried for a bit to get it to recognize the params for the selected snippet with no luck, so I just added the params to the option value ( if the snippet has any default settings present).

I also trimmed down the snippets.php file down a bit, and after I test it for a while I’ll post it and you can have a look and see what you think.

I really like this addon, thanks a heap for gettng it up and running

Great, looking forward to see what you’ve done! I’m making good progress myself. For now using a simpler notation then I proposed, without any default values I have it to recognize and print out the properties declared in the snippet config params. I’ve also got it to recognize the snippet params declared in the editor if you select a whole snippet. Mind you there’s plenty to do still. It’s displaying the params but I can’t save (read insert into editor) them yet.

Talk about learning curve.... I’m getting to old for this I don’t fully understand the TinyMCE api yet and as I said my Javascript knowledge is pretty stale. Took me ages just to work out how to get the current selected text from the editor.

Never mind, let me struggle a while longer. I’ll post a new version to scrutinize as soon as I finish the code for updating the editor.

One thing that I couldn’t get to work in javascript (or should I say ecma?) is how to escape the [ and ] characters. I would have thought that something like this /^\[\[(.*)\]\]$/ should return whatever (.*) is. Instead it sees (.*) as literal characters in a character class. If I use it on [[ContactForm email=`[(emailsender)]`]] for instance it returns ’ ) ’; Care to enlighten me?


Update: Got it working more or less... Replace 2 files with the ones in the zip and you should be able to see the parameters, that is if you have set the tinymce variable in the snippet config. Select a snippet call in the editor window before you click the button and you’ll get the parameter values as well.

Try it with this line in the DropMenu snippet configuration (Default parameters);
&tinyvars=Variables visible in TinyMce;string;phMode,phName,menuName,siteMapRoot,removeNewLines,maxLevels,hereClass


Reminder! NOT for production environments!
Update - 23 Aug
Removed the attachment as I’ve updtaed the original post. Go and download it there.