TinyMCE plugin tutorial for dummies - documentation?

TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -
Number of replies: 15

Hi,

I'm a student and I needed to create a plugin for TinyMCE editor in Moodle for my Open Source Projects class. I'm a newbie Moodle developer, and it's my first touch with php and js.

I tried to create my own plugin and spent a lot of time working on it and did not obtained any result.

I finally find out looking from the source code of the already implemented plugins how to create an empty plugin that doesn't do anything.

The only documentation I found about this was: http://docs.moodle.org/dev/TinyMCE_plugins and it wasn't enough for a beginner like me. Is there any existing tutorial or documentation about how to create a plugin for TinyMCE in Moodle?

I know that probably the next year other dummies like me will take this course and will have the same problem at start, I was thinking about making my own small tutorial for dummies about the first steps to follow while creating a new plugin for TinyMCE in Moodle. Is there any Moodle resource where I can use for that? I mean... can I create a page like http://docs.moodle.org/dev/TinyMCE_plugins about that (and how can I do it) or I sould just post it on the forum?

Thank you!

Josep

Average of ratings: -
In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Sam Mudle -

Yeah, the information on http://docs.moodle.org/dev/TinyMCE_plugins is sparse.  Even worse, the example is how to convert a non-moodle tinymce plugin by HACKING the core lib.php.angry  (FYI, that hack works fine for my plugin, but i'd rather not do that.)

My geshi plugin works fine by hacking moodle 2.51's core file, but I want to avoid this.

I can't find documentation anywhere. You can try looking at the three tinymce plugins on the site, but it's so confusing as to the directory structure. 

https://moodle.org/plugins/browse.php?list=category&id=45

 

In reply to Sam Mudle

Re: TinyMCE plugin tutorial for dummies - documentation?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Also, when you feel confident enough to add documentation to help others, please feel free to create an account on the developer docs wiki and then when you have edited a few pages  you can make a new page by typing the page name and it will create it for you once you have added some text. http://docs.moodle.org/dev/Main_Page

In reply to Mary Cooch

Re: TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -

Hi Mary,

I want to create a page about creating a new Moodle specific TinyMCE plugin for beginners but i can't create a new page. I'm logged in with my account, and I tried to type in my browser address bar "http://docs.moodle.org/en/Creating_a_TinyMCE_Plugin" but i can't edit anything, then i tryed to access with "http://docs.moodle.org/en/index.php?title=Creating_a_TinyMCE_Plugin&action=edit" and i received this following message.

How can I get the permissions to create new pages???

Thank You!

Attachment edit.png
In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

The docs tell you where to put the files, but not very much about the content of the files you need to put there.

Note, wherever I write 'nameofplugin', please replace it with the actual name of your plugin.

The '/tinymce' subfolder for within your Moodle TinyMCE plugin contains a standard TinyMCE plugin - you can find lots of details about how to make these at http://www.tinymce.com/wiki.php 

Another important file is '/lang/nameofplugin/en/tinymce_nameofplugin.php' which needs the line:

$string['pluginname'] = 'The name of my plugin';

(Where 'pluginname' is literally that text, but 'The name of my plugin' should be replaced with the human-readable name of your plugin).

It should also contain any other translatable text from your plugin.

The final file you need is /lib.php, which should contain:

class tinymce_nameofplugin extends editor_tinymce_plugin {

protected function update_init_params(array &$params, context $context, array $options = null) {

$rowtoappearon = 3;

$this->add_button_after($params, $rowtoappearon, 'nameofplugin', 'name_of_button_to_appear_after');

}

Look at the included examples in lib/editor/tinymce/plugins to see how this works.

I have to add, that I find writing a TinyMCE plugin to be one of the hardest places to start in Moodle (because you have to understand a bit about how Moodle works and a lot about how TinyMCE works), but if that's what you've been asked to do ...

In reply to Davo Smith

Re: TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -

Hi Davo,

Thanks for the info! I'm trying to create a new page about creating a new Moodle specific TinyMCE plugin for beginners, i'll include ur info.

I cannot edit and create new pages for now, I do not have permissions for that and dont know how to get them, do you know what i should do?

Thank you

In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Have you created an account on Moodle docs? You need a separate account there from the one you use on the main Moodle.org site (check for a 'login' link at the top-right).

If that doesn't help, you'll have to wait for someone from HQ to look into it.

In reply to Davo Smith

Re: TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -

Hi Davo,

I just have created an account on Moodle.org from where i'm posting here etc...

I'm looking for how i can create a Moodle Docs account but i can't find it anywhere!! Can you tell me how or where can i create it?

Thank you!

In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Hi again.Sorry for the confusion - because we had a lot of spammers in the docs you now have to edit a page first before you can create a page - just to prove you are there for good reasons and not simply to post links to pharmaceutical productssmile I suggest you use the developer docs here http://docs.moodle.org/dev/Main_Page rather than the user documentation as your contribution will be a more technical one. Log in here http://docs.moodle.org/dev/index.php?title=Special:UserLogin&returnto=Main+Page

In reply to Mary Cooch

Re: TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -

Hi Mary,

I am sorry but i still can't edit and i don't know what I'm doing wrong :S

I attach a sreenshot of how it looks like when I'm logged in there. Do you have any idea of what am I missing?

What do you mean i have to edit a page first before i can create one? Shall i edit something 'randomly' first? If that's the problem, can you create a page "Creating_a_Moodle_specific_TinyMCE_module" for me that i can edit?

Thank you

Attachment screenshot.png
In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

HI there. Yes - go to another page and try to edit something there first. How about this page http://docs.moodle.org/dev/Editors

In reply to Mary Cooch

Re: TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -

Hi,

I'm now following the guidelines to edit pages ( http://docs.moodle.org/23/en/Help:Editing ) but i cannot find out how to upload images. I have a set of small screenshots in my pc that i wanted to include in the page, does somebody know how can I do that?

Thanks

In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Helen Foster -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Josep,

Apologies for the hurdles you've encountered whilst attempting to contribute to the documentation and thanks for your persistence. I notice you've now managed to create a page http://docs.moodle.org/dev/Creating_a_Moodle_specific_TinyMCE_plugin smile and you should now be able to upload images using the upload file link in the toolbox.

For anyone else reading this thread, please note that a separate Moodle Docs account is not necessary - you can log in to all Moodle Docs wikis using your moodle.org username and password.

In reply to Helen Foster

Re: TinyMCE plugin tutorial for dummies - documentation?

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Ooops, sorry Helen for spreading misinformation - I'd got it wrong somewhere along the line ...

In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I have written a few plugins for TinyMCE on Moodle now, and the best thing by far to check out the existing plugins to see how they achieve things. I would look at this one, because it is quite simple:
https://moodle.org/plugins/view.php?plugin=tinymce_skim

I wrote a template, more for myself than anything. If you would like to use it as part of your tutorial, or as an add on thats fine.  It certainly isn't perfect but it will get you up and running.

To use it,  do a search and replace on the following upper case strings in each file to turn the template into your plugin. (You should do TEMPLATE_READABLE_NAME before TEMPLATE obviously. Sorry it really was just for me.) And make sure the folder is named correctly also.

AUTHOR => Your name
TEMPLATE_READABLE_NAME => The human readable name of the plugin
TEMPLATE => the plugin component name after tinymce_ eg set to slinky for tinymce_slinky
 
 
 
Good luck
In reply to Josep Riera Vuibert (Pepe)

Re: TinyMCE plugin tutorial for dummies - documentation?

by Josep Riera Vuibert (Pepe) -

Hi everyone,

I finally managed to create a documentation page about Moodle specific TinyMCE plugins. ( http://docs.moodle.org/dev/Creating_a_Moodle_specific_TinyMCE_plugin )

I'm a noob developper so if you want to edit, remove, modify or add content in this page about this subject it would be helpful!

Thanks

Josep

Average of ratings: Useful (1)