Re: [xwiki-users] WYSIWYG on demand

On Tue, Feb 14, 2012 at 7:42 PM, Marius Dumitru Florea &lt;mariusdumitru.florea(a)xwiki.com&gt; wrote: Also, this should be closed before #end, because it is opened inside #foreach . >>> >>> >>> >>> {{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', > > convertInput: true, > >>>      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); > You call this in loadOnDemand. > >>>  Wysiwyg.onModuleLoad(function() { > You use Wysiwyg.onModuleLoad in loadOnDemand so simply calling > loadOnDemand(fieldId) here will work. > > Hope this helps, > Marius > >>>    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> >>> >>> >>> {{/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 >> _______________________________________________ >> 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