Re: [xwiki-users] WYSIWYG on demand

Marius, Thank you for the suggestions and the code fixes - I think I successfully got multiple editors per page working. Now that it works, there's one more thing I can't figure out. I don't know if this is a bug or (more likely) my error, but I can't seem to figure it out. It's actually very similar to the "corrupt entries" problem I asked about a few weeks ago, but I can now replicate it with 100% success. When I click the edit button for an object with a WYSIWYG property, it immediately removes all the paragraph breaks from the contents and then displays it as raw wiki syntax. Whether I click "save" or "close" the contents are irreversibly displayed as this long block of syntax and no longer renders as html, even after exiting the editor. Any edits I make in the editor actually appear to be committed in real time, even if I never press save. All it takes for me to replicate is to click the edit button on an object which is displaying correctly, then immediately click cancel, and it will appear as wiki syntax. Here is the code I am using: **************START***************** {{velocity}} {{html}} #wysiwyg_import(true) $xwiki.jsfx.use('js/xwiki/actionbuttons/actionButtons.js', true) $xwiki.ssfx.use('js/xwiki/actionbuttons/actionButtons.css', true) #set($Reference = $services.model.createDocumentReference($doc.wiki, $doc.getSpace(), $doc.getName())) #set($Document = $xwiki.getDocument($Reference)) #set($objs = $doc.getObjects('Sandbox.TestClass')) {{/html}} #foreach($obj in $objs) #set($editedPropertyId = "Sandbox.TestClass_$obj.getNumber()_contents") (% id="${editedPropertyId}Title" class="title" %) ((( == $obj.getProperty('Title').getValue() == (% id="${editedPropertyId}View" class="view" %) ((( $obj.getProperty('contents').getValue() ))) ))) {{html wiki="true"}} <div id="${editedPropertyId}Edit" style="display:none" class="editor">  <form id="${editedPropertyId}EditForm" action="$Document.getURL('save')" method="post" class="xform">    <div class="hidden">      <input type="hidden" name="form_token" value="$services.csrf.getToken()" />    </div>    <div>      $Document.display("contents", 'edit', $obj)    </div>    <div class="buttons">      <span class="buttonwrapper"><input type="submit" value="Save" name="action_saveandcontinue" class="button"></span>      <span class="buttonwrapper"><button class="button secondary cancel">Cancel</button></span>    </div>  </form> </div> #end {{/html}} {{html}} <script type="text/javascript"> function hideAndShowLoadingAnimation(fieldId) {  var field = document.getElementById(fieldId);  if (field) {    // Hide the element that will be wrapped by the WYSIWYG editor.    field.style.visibility = 'hidden';    // Show the loading animation.    var loading = document.createElement('span');    loading.className = 'loading';    loading.style.display = 'block';    loading.style.position = 'absolute';    loading.style.width = field.offsetWidth + 'px';    loading.style.height = field.offsetHeight + 'px';    field.parentNode.insertBefore(loading, field);    // Remove the loading animation after the WYSIWYG module has been loaded.    Wysiwyg.onModuleLoad(function() {      loading.parentNode.removeChild(loading);    });  } } function loadOnDemand(fieldId) {  hideAndShowLoadingAnimation(fieldId);  Wysiwyg.onModuleLoad(function() {    Wysiwyg[fieldId] = new WysiwygEditor({      hookId: fieldId,      syntax: 'xwiki/2.1',      displayTabs: true,      defaultEditor: 'wysiwyg',      inputURL: '$xwiki.getURL('$doc.getFullName()', 'edit', "xpage=wysiwyginput&token=$services.csrf.getToken()")',      plugins: 'submit line separator embed text valign list indent history format symbol link image table macro import',      menu: '[{"feature": "link", "subMenu":["linkEdit", "linkRemove", "linkWikiPage", "linkAttachment", "|", "linkWebPage", "linkEmail"]}, {"feature":"image", "subMenu":["imageInsertAttached", "imageInsertURL", "imageEdit", "imageRemove"]}, {"feature":"table", "subMenu":["inserttable", "insertcolbefore", "insertcolafter", "deletecol", "|", "insertrowbefore", "insertrowafter", "deleterow", "|", "deletetable"]}, {"feature":"macro", "subMenu":["macroInsert", "macroEdit", "|", "macroRefresh", "|", "macroCollapse", "macroExpand"]}, {"feature":"import", "subMenu":["importOffice"]}]',      toolbar: 'bold italic underline strikethrough | subscript superscript | unorderedlist orderedlist | outdent indent | undo redo | format | hr symbol',      wiki: '$doc.getWiki()',      space: '$doc.getSpace()',      page: '$doc.getName()'    });  }); } // Hides the content and displays the WYSIWYG editor. function onEdit(fieldId) {  $(fieldId + 'View').hide();  $(fieldId + 'EditIcon').hide();  $(fieldId + 'Edit').show();  hideAndShowLoadingAnimation(fieldId);  Wysiwyg.onModuleLoad(function() {    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