[xwiki-users] WYSIWYG on demand
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. Thanks, aaron
Hi Aaron, On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help. Marius
Thanks,
aaron _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
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#H... I get an error on the line: #wysiwyg_inputProperty($editedDocument $editedProperty $parameters) The "show source text" example also doesn't work for me: http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H... when I click the "Load Editor" button it just gets stuck displaying the loading animation, but the editor never finishes loading. The "edit in place" example works for me for a single object: http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H... 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)); }); }); 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 <[email protected]> wrote:
Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help.
Marius
Thanks,
aaron _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications <[email protected]> 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#H...
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#H...
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#H...
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 <[email protected]> wrote:
Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help.
Marius
Thanks,
aaron _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
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 <[email protected]> wrote:
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications <[email protected]> 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#H...
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#H...
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#H...
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 <[email protected]> wrote:
Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help.
Marius
Thanks,
aaron _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
Hi, Can anyone else successfully reproduce this bug? Want to create a bug report if it's not user error. Sorry for the bump, just curious if it's just me... aaron On Mon, Feb 6, 2012 at 3:35 PM, Ashtar Communications <[email protected]> wrote:
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 <[email protected]> wrote:
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications <[email protected]> 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#H...
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#H...
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#H...
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 <[email protected]> wrote:
Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help.
Marius
Thanks,
aaron _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
On Tue, Feb 14, 2012 at 7:31 PM, Ashtar Communications <[email protected]> wrote:
Hi,
Can anyone else successfully reproduce this bug? Want to create a bug report if it's not user error.
Sorry for the bump, just curious if it's just me...
See below. It works fine for me with the suggested changes.
aaron
On Mon, Feb 6, 2012 at 3:35 PM, Ashtar Communications <[email protected]> wrote:
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',
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>
{{/html}}
{{/velocity}} **************END********************
Thank you for any help you can provide,
aaron
On Mon, Feb 6, 2012 at 6:55 AM, Marius Dumitru Florea <[email protected]> wrote:
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications <[email protected]> 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#H...
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#H...
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#H...
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 <[email protected]> wrote:
Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help.
Marius
Thanks,
aaron _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
On Tue, Feb 14, 2012 at 7:42 PM, Marius Dumitru Florea <[email protected]> wrote:
On Tue, Feb 14, 2012 at 7:31 PM, Ashtar Communications <[email protected]> wrote:
Hi,
Can anyone else successfully reproduce this bug? Want to create a bug report if it's not user error.
Sorry for the bump, just curious if it's just me...
See below. It works fine for me with the suggested changes.
aaron
On Mon, Feb 6, 2012 at 3:35 PM, Ashtar Communications <[email protected]> wrote:
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}}
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>
{{/html}}
{{/velocity}} **************END********************
Thank you for any help you can provide,
aaron
On Mon, Feb 6, 2012 at 6:55 AM, Marius Dumitru Florea <[email protected]> wrote:
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications <[email protected]> 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#H...
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#H...
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#H...
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 <[email protected]> wrote:
Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications <[email protected]> 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#H... doesn't work? Maybe I can help.
Marius
> > Thanks, > > aaron > _______________________________________________ > users mailing list > [email protected] > http://lists.xwiki.org/mailman/listinfo/users _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
Marius, You're magic - that appears to have fixed it. Figured it was something simple I overlooked... Once I get the interface cleaned up and add a few more features, I'll post a code snippet to the extensions repository for easily displaying a large number of objects on a page and editing them on demand. Hopefully someone else will find it useful to have all in one place... Thanks much, Aaron On Tue, Feb 14, 2012 at 9:43 AM, Marius Dumitru Florea <[email protected]> wrote:
On Tue, Feb 14, 2012 at 7:42 PM, Marius Dumitru Florea <[email protected]> wrote:
On Tue, Feb 14, 2012 at 7:31 PM, Ashtar Communications <[email protected]> wrote:
Hi,
Can anyone else successfully reproduce this bug? Want to create a bug report if it's not user error.
Sorry for the bump, just curious if it's just me...
See below. It works fine for me with the suggested changes.
aaron
On Mon, Feb 6, 2012 at 3:35 PM, Ashtar Communications <[email protected]> wrote:
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}}
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>
{{/html}}
{{/velocity}} **************END********************
Thank you for any help you can provide,
aaron
On Mon, Feb 6, 2012 at 6:55 AM, Marius Dumitru Florea <[email protected]> wrote:
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications <[email protected]> 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#H...
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#H...
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#H...
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 <[email protected]> wrote: > Hi Aaron, > > On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications > <[email protected]> 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#H... > doesn't work? Maybe I can help. > > Marius > >> >> Thanks, >> >> aaron >> _______________________________________________ >> users mailing list >> [email protected] >> http://lists.xwiki.org/mailman/listinfo/users > _______________________________________________ > users mailing list > [email protected] > http://lists.xwiki.org/mailman/listinfo/users _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
participants (2)
-
Ashtar Communications -
Marius Dumitru Florea