Hi Matthew, I updated the example on http://code.xwiki.org/xwiki/bin/view/Modules/WysiwygEditorModule#HLoadondema... . Some notes: * the cache input works only if it is present on the page when the page is loaded. It is used to preserve the editor content against browser Back/Forward buttons. I don't think you need it since you load the editor on demand. * The inputURL I suggested is indeed not suited for you use case. If you load the editor on demand only when creating new objects, thus their WYSIWYG properties are empty, you can use an inputURL like this: $xwiki.getURL("FakeSpace.FakePage", "edit", "xpage=wysiwyginput&render=true&key=fake") (of course it needs to be evaluated) If you load the editor on demand also when objects are edited then you'll have to edit wysiwyginput.vm template so that it works with an URL like this: $xwiki.getURL("Blog.BlogIntroduction", "edit", "xpage=wysiwyginput&render=true&field=Blog.BlogPostClass_0_content") That it, read the "field" request parameter and feed the WYSIWYG editor with the corresponding value. I can help you with this if you need it. Hope this helps, Marius On 08/26/2010 06:21 PM, Matthew Hildebrand wrote:
Marius,
Thanks for the info. That got me pointed in the correct direction, and I've got the wysiwyg editor appearing. However there are a few weirdness issues...
1) Some of the CSS stylings are not being attached to the wysiwyg editor (the specific one that I have noticed is that tables no longer have shaded backgrounds on the headers or borders (using Colibri skin).
2) If I switch to source view and add some text, I am then unable to switch back to wysiwyg view. I get a cross-domain error: (NS_ERROR_DOM_BAD_URI): Access to restricted URI denied code: 1012 INDEX_SIZE_ERR: 1 DOMSTRING_SIZE_ERR: 2 HIERARCHY_REQUEST_ERR: 3 WRONG_DOCUMENT_ERR: 4 INVALID_CHARACTER_ERR: 5 NO_DATA_ALLOWED_ERR: 6 NO_MODIFICATION_ALLOWED_ERR: 7 NOT_FOUND_ERR: 8 NOT_SUPPORTED_ERR: 9 INUSE_ATTRIBUTE_ERR: 10 INVALID_STATE_ERR: 11 SYNTAX_ERR: 12 INVALID_MODIFICATION_ERR: 13 NAMESPACE_ERR: 14 INVALID_ACCESS_ERR: 15 VALIDATION_ERR: 16 TYPE_MISMATCH_ERR: 17 result: 2152924148 filename: http://10.10.2.233/xwiki/resources/js/xwiki/wysiwyg/xwe/5CB5F3FEC4B215F8 61E3FFD8E65C48BA.cache.html lineNumber: 4689 columnNumber: 0 inner: null data: null http://10.10.2.233/xwiki/resources/js/xwiki/wysiwyg/xwe/5CB5F3FEC4B215F8 61E3FFD8E65C48BA.cache.html Line 2791
Here is my code: function makeWysiwyg(targetArea, randomKey) { cacheId = 'wysiwygCache' + randomKey; $('cacheArea').insert({ bottom: '<input type="hidden" id="' + cacheId + '">' }); (function() { var field = document.getElementById(targetArea); 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); }); } }).call();
var wysiwygConfigNew = { hookId: targetArea, cacheId: cacheId, syntax: 'xwiki/2.0', displayTabs: true, defaultEditor: "wysiwyg", inputURL: 'javascript:parent.document.getElementById("' + targetArea + '").value', plugins: 'submit line separator embed text valign list indent history format symbol link image table macro import', menu: 'link image table macro import', toolbar: 'bold italic underline strikethrough | subscript superscript | unorderedlist orderedlist | outdent indent | undo redo | format | hr symbol', wiki: 'xwiki', space: 'ProjectManagement', page: 'UseCase-ForgotPassword', openofficeServerConnected:'false', debug: 'false' };
Wysiwyg.onModuleLoad(function() { new WysiwygEditor(wysiwygConfigNew); wysiwygConfigjRSc = undefined; }); }
I am calling the makeWysiwyg function at the end of my Ajax.Request:onSuccess function, and passing a string representing the textarea that was just inserted and a random key generated via $util.generateRandomString(4) by the Ajax requested page (returned as a JSON object).
Thanks!
--Matthew
-----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of Marius Dumitru Florea Sent: Tuesday, August 24, 2010 3:34 AM To: [email protected] Subject: Re: [xwiki-users] Enable wysiwyg editor for dynamically createdobjects
Hi Matthew,
On 08/13/2010 02:24 AM, Matthew Hildebrand wrote:
So I'm dynamically adding objects to the page via an ajax request (get
the document, create a new object of the specified type, return the object in edit mode as a JSON object). What I am not able to figure out, is how to get my textareas to become wysiwyg enabled (when appropriate). I don't quite understand how the javascript that replaces the text areas is being generated, let alone if there is a way to get it generated (and returned as part of my JSON object).
You can load the WYSIWYG editor on demand for a specific property by following http://code.xwiki.org/xwiki/bin/view/Modules/WysiwygEditorModule#HLoadon demandandshowsourcetext . Let me know if you have more questions.
Hope this helps, Marius
Any help would be greatly appreciated!
Thanks,
--Matthew
_______________________________________________ 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