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: