Re: [xwiki-users] WYSIWYG on demand

   loadOnDemand(fieldId);  }); } // Hides the WYSIWYG editor and displays the updated content. function onClose(fieldId) {  var editor = Wysiwyg.getInstance(fieldId);  editor.getSourceText(function(sourceText) {    $(fieldId + 'View').update($(fieldId).value);    $(fieldId).value = sourceText;    editor.release();    // Remove the WYSIWYG editor from the document (it was inserted before the plain text area).    $(fieldId).previous().remove();    $(fieldId + 'View').show();    $(fieldId + 'EditIcon').show();    $(fieldId + 'Edit').hide();  }); } // Hides the WYSIWYG editor and displays the updated content after a successful save action. document.observe('xwiki:actions:save', function(event) {  if (event.stopped) {    return;  }  var form = $(event.memo.form);  var fieldId = form.down('textarea').id;  document.observe('xwiki:document:saved', function() {    document.stopObserving('xwiki:document:saved', arguments.callee);    onClose(fieldId);  }); }); // Inserts the edit icon at the end of the heading preceding the editable content. function showEditIcon(fieldId) {  var editIcon = new Element('img', {"src" : "$xwiki.getSkinFile('icons/silk/pencil.gif')", "title" : "Edit", "alt" : "edit", "id" : fieldId + 'EditIcon'});  editIcon.observe('click', onEdit.bind(window, fieldId));  $(fieldId + 'View').previous().appendChild(editIcon); } // Insert the edit icons and set the action for the cancel buttons. document.observe('xwiki:dom:loaded', function() {  $$('textarea').each(function(item) {  var fieldId = item.id;  showEditIcon(fieldId);  });  $$('.cancel').each(function(item) {    var fieldId = item.up('form').down('textarea').id;    item.observe('click', function(event) {      Event.stop(event);      onClose(fieldId);    }.bindAsEventListener(window));  }); }); </script> {{/html}} {{/velocity}} **************END******************** Thank you for any help you can provide, aaron On Mon, Feb 6, 2012 at 6:55 AM, Marius Dumitru Florea &lt;mariusdumitru.florea(a)xwiki.com&gt; wrote: > On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications > &lt;ashtarcommunications(a)gmail.com&gt; wrote: >> Marius, >> >> Thank you for the reply. >> >> The "using velocity macros" example doesn't work for me at all: >> http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#… >> >> I get an error on the line: >> #wysiwyg_inputProperty($editedDocument $editedProperty $parameters) > > I've fixed the example. Should work now. > >> >> The "show source text" example also doesn't work for me: >> http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#… >> >> when I click the "Load Editor" button it just gets stuck displaying >> the loading animation, but the editor never finishes loading. > > I've fixed this example too. > >> >> The "edit in place" example works for me for a single object: >> http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#… >> >> Unfortunately, I can't seem to figure out how to adapt this code for >> multiple objects/editors on a single page. I have pages with a large >> number of objects, and I need to be able to edit any of them >> on-demand. I'm pretty sure that I need to modify the function below to >> loop through all objects on the page to add an "edit" button linked to >> the appropriate <div> ID. >> >> // Insert the edit icons and set the action for the cancel buttons. >> document.observe('xwiki:dom:loaded', function() { >>  showEditIcon('$editedPropertyId'); >> >>  $$('.cancel').each(function(item) { >>    var fieldId = item.up('form').down('textarea').id; >>    item.observe('click', function(event) { >>      Event.stop(event); >>      onClose(fieldId); >>    }.bindAsEventListener(window)); >>  }); >> }); > > You can take the code from the example and write a JavaScript function > that loads the editor for a given property ID. Then you should put the > IDs of the edited properties in a JavaScript array, iterate it and > call the JavaScript function you have just written for each property > ID. > > Note that the example code mixes both JavaScript code and Velocity > code. For instance, $editedPropertyId is a Velocity variable, that is > evaluated on the server, before the JavaScript is send to the client. > In other words, the actual JavaScript code executed by the browser is > something like: > > showEditIcon('Blog.BlogPostClass_0_content'); > > Hope this helps, > Marius > >> >> I've tried adding a class to each div, and wrapping the showEditIcon >> call in various loops through that class (using $$ or for/in), but I >> can't get it to work. I probably just don't know enough javascript to >> get the syntax correct... >> >> Any help would be appreciated, >> >> aaron >> >> >> >> On Fri, Feb 3, 2012 at 1:54 AM, Marius Dumitru Florea >> &lt;mariusdumitru.florea(a)xwiki.com&gt; wrote: >>> Hi Aaron, >>> >>> On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications >>> &lt;ashtarcommunications(a)gmail.com&gt; wrote: >>>> Does anyone have a working example of loading the WYSIWYG editor >>>> on-demand with velocity? Would love to see how you implemented >>>> it...I'm having some trouble with porting the code on the xwiki site. >>> >>> You mean http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#… >>> doesn't work? Maybe I can help. >>> >>> Marius >>> >>>> >>>> Thanks, >>>> >>>> aaron >>>> _______________________________________________ >>>> users mailing list >>>> users(a)xwiki.org >>>> http://lists.xwiki.org/mailman/listinfo/users >>> _______________________________________________ >>> users mailing list >>> users(a)xwiki.org >>> http://lists.xwiki.org/mailman/listinfo/users >> _______________________________________________ >> users mailing list >> users(a)xwiki.org >> http://lists.xwiki.org/mailman/listinfo/users > _______________________________________________ > users mailing list > users(a)xwiki.org > http://lists.xwiki.org/mailman/listinfo/users