General developer forum

How to clear cache while developing a plugin for Atto

 
Picture of Marian Petrov
How to clear cache while developing a plugin for Atto
 

Hi guys




I'm learning how to write a plugin for Atto editor and TinyMCE but once I install the plugin the icon, js, html, css .. are cached. Even If i uninstall the plugin and installed again nothing change.


I tried with 


1. purge all caches


2.Theme selector -> clear theme caches


3. using chrome console and disable browser caching...


Nothing works and this is a huge pain in the ass

 
Average of ratings: -
Picture of Don Cooke
Re: How to clear cache while developing a plugin for Atto
 

Two things :-

Firstly, try incrementing the version.php file - the upgrade process includes a cache refresh.

Secondly :- look at the site admin->plugins->text editors->Category: Atto HTML editor


Towards the bottom of the scroolable page is a the  Toolbar config settings section - you need to  add any new control to this section for it to appear in the atto menu.


 
Average of ratings: -
Picture of Marian Petrov
Re: How to clear cache while developing a plugin for Atto
 

The button does appear in the menu, but I want to change the button icon. After changing the version nothing changes and when I inspect the button the image points to the old file

 
Average of ratings: -
Picture of Justin Hunt
Re: How to clear cache while developing a plugin for Atto
Particularly helpful MoodlersPlugin developers

Marian,

Did you rebuild your button with...

grunt shifter

(from your plugins dir with build.json ) after you changed the code?

That and a version bump should be all you need.

 If you did not already, you should also turn debugging up to "developer" in site admin -> development -> debugging.

 At least for AMD modules,  that makes Moodle use the code in src, not the code in build.

 
Average of ratings: Useful (1)
Picture of Marian Petrov
Re: How to clear cache while developing a plugin for Atto
 

I look up how to use `grunt shifter` but wasn't able to find tutorials. The problem was I was updating the file inside src, but the plugin was using the file from the build folder. I just manually update the file inside the build folder. Can you point me to a new tutorial or article how to make a plugin from scratch? Inside the plugin I''m learning on currently is using this method insertContentAtFocusPoint(). I wasn't able to find documentation what other method they are. It's using YUI which I hear for the first time.. but inside yuilibrary.com documentation wasn't able to find this method.

 
Average of ratings: -
Picture of Justin Hunt
Re: How to clear cache while developing a plugin for Atto
Particularly helpful MoodlersPlugin developers

Hi Marian

Atto plugin development is not as well documented as other plugins. And because it relies on a lot of javascript, there are extra things to worry about like  grunt and shifter and node.js. 

YUI is a sad story. Moodle decided to use YUI from Yahoo as its javascript framework several years ago. At that time it was an OK choice, and the Atto editor was built with it. But Yahoo stopped developing and supporting YUI. And nobody else much uses YUI. But Moodle's Atto uses YUI still. 

Anyway lets help ....

i) you need to have node.js and grunt javascript frameworks installed on your Moodle development machine. This page explains that:

https://docs.moodle.org/dev/Javascript_Modules#Install_grunt

ii) you need to rebuild your atto plugin each time you change the code in button.js. because it runs from "build" not "src" (why? ... perhaps there is something I don't know)

To do that run

grunt shifter

from your plugin directory which has build.json in it.

iii) The function: insertContentAtFocusPoint() is actually part of your button.js code. Most plugins have copied it from another plugin. So if you need it, and its not there you should add it. My most recent one looks like this:

insertContentAtFocusPoint: function(html) {
var selection = rangy.getSelection(),
range,
node = Y.Node.create(html);
if (selection.rangeCount) {
range = selection.getRangeAt(0);
}
if (range) {
range.deleteContents();
range.insertNode(node.getDOMNode());
}
return node;
}

iv) Other functions like: getSelectedNodes() are actually part of the Atto html editor API.
Most devs are probably like me and do not really understand that API very well.  We just look it up when we need to in the source, or in other plugins that use it.  All the API code is in lib/editor/atto/yui/src/editor/js  


 
Average of ratings: -
Picture of Marian Petrov
Re: How to clear cache while developing a plugin for Atto
 

Thanks for the information Justin, appreciated smile

I can't find a method called host.insertContentAtFocusPoint inside the button.js. The plugins I look up use host.insertContentAtFocusPoint(html); which inserts the HTML where the prev selection was. I wanted to fetch data from wikipedia api, but it didn't allow me to do so.. I read some of the YUI documentation and using Y.use('jsonp', 'jsonp-url', function () { ... when calling the JSONPRequest worked, magic! Do you know by any chance if the html can be inserted at the bottom of the content, not where the selection was?

 
Average of ratings: -
Picture of Justin Hunt
Re: How to clear cache while developing a plugin for Atto
Particularly helpful MoodlersPlugin developers

Well, I looked it up. It turns out insertContentAtFocusPoint is declared in:

lib/editor/atto/yui/src/editor/js/selection.js

Not exactly sure how it gets there but when it built it is in:

lib/editor/atto/yui/build/moodle-editor-atto-editor/moodle-editor_atto-editor.js

I am sure you can add content at the end of the current content. But you will need to play around a bit to make it happen. I do not have an example of how to do that handy.

 
Average of ratings: -
Picture of Andrew Nicols
Re: How to clear cache while developing a plugin for Atto
Core developersMoodle HQParticularly helpful MoodlersPlugin developersTesters

See the build.json for info.

Shifter takes the build.json, and the meta/editor.json and turns that into the built version.

The build.json includes the list of files which make up the built file, also including module name, submodule names, and any CSS dependencies.

The metadata contains the list of dependencies.

 
Average of ratings: Useful (1)