7 Feb
2012
7 Feb
'12
12:35 a.m.
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
<mariusdumitru.florea(a)xwiki.com> wrote:
On Fri, Feb 3, 2012 at 9:44 PM, Ashtar Communications
<ashtarcommunications(a)gmail.com> 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
<mariusdumitru.florea(a)xwiki.com> wrote:
_______________________________________________
users mailing list
users(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/users Hi Aaron,
On Wed, Feb 1, 2012 at 10:26 PM, Ashtar Communications
<ashtarcommunications(a)gmail.com> wrote:
_______________________________________________
users mailing list
users(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/users 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