5 Jun
2011
5 Jun
'11
8:51 p.m.
Hi James,
On 06/03/2011 02:52 PM, 许凌志(Jamesxu) wrote:
OK, Marius, I am working for finnal exam all these
days after I
finishing XWIK-5560, and till now, I have finnished most of exams except
one in 10th June, But it is easy, so I am going on these days.
Good luck with your final exam.
Though I am busy with final exams, I still did some prepares for my
projects, I have done the following things:
1. I read the some of the source codes of wysiwyg client, found that if
I want to listen to the event when user input in wysiwyg editor, I
should extend the onKeyUp function in WysiwygEditor.java
<https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-wysiwyg/xwiki-platform-wysiwyg-client/src/main/java/org/xwiki/gwt/wysiwyg/client/WysiwygEditor.java>which
is inherited from RichTextEditorController.java
<https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-wysiwyg/xwiki-platform-wysiwyg-client/src/main/java/org/xwiki/gwt/wysiwyg/client/RichTextEditorController.java>.
This is not the right way to do it. As I told you on IRC, you should
create a new plugin and register there listeners for the rich text area
events that you are interested in. Check the code of the existing plugins.
2. I am thinking that I can implement the auto-suggestion features
without working on the GWT code because there is some APIs for me to
hook in the wysiwyg editors, I can use getRichTextArea() function to get
the richtextarea object, then add some listeners to it.
You can do this but it's not the best choice. IMO, you should use GWT
for the client code that is specific to the WYSIWYG editor (e.g.
catching rich text area events) and use Prototype.js for the client code
that is shared between the Wiki and the WYSIWYG editor.
Here is the
sample code, in the callback function of the listeners, we can use
getSelectionRange to get the range object of rich text area, it is the
base for add auto-suggestion widget to rich text area, what do you think?
document.observe('xwiki:wysiwyg:loaded', function() {
var editors = Wysiwyg.getAllInstances();
var IsIE=navigator.appName!="Netscape";
This is wrong. You should use cross-browser APIs as much as possible
and, if you really need to write browser specific code then use the
available Prototype.js API for checking the current browser (e.g.
http://api.prototypejs.org/Prototype/Browser/ )
for(var hookId in editors){
var editor = editors[hookId];
var richEditor = editor.getRichTextArea();
var frm = richEditor.contentWindow
if(IsIE){
frm.document.onkeyup = function(){
console.debug(editor.getSelectionRange())
}
frm.document.onmousedown = function(){
console.debug(editor.getSelectionRange())
}
frm.document.onmouseup = function(){
console.debug(editor.getSelectionRange())
}
} else {
frm.document.addEventListener("keyup", function(e) {
console.debug(editor.getSelectionRange())
} ,false);
frm.document.addEventListener("mousedown", function(e) {
console.debug(editor.getSelectionRange())
} ,false);
frm.document.addEventListener("mouseup", function(e) {
console.debug(editor.getSelectionRange())
} ,false);
You should use Prototype's cross-browser Event.observe method obviously.
}
}
})
3. For wiki editor, I think there are two most important things I should
notice:
a. Get the position of the input cursor, and get the context, if the
cursor is in the context of "[[ link or image ]]" or "{{ macros }}",
then initialized the auto-suggestion under this context, and show up
auto-suggestion widget according to user input.
b. Listen to the user input, and trigger the auto-suggestion widget when
"[[" or "{{" are typed.
I am still doing some tests now, so if you have some tips for me, please
tell me.
Ok, let us know how it goes.
Thanks,
Marius
On Fri, Jun 3, 2011 at 1:02 AM, Marius Dumitru Florea
<mariusdumitru.florea(a)xwiki.com <mailto:mariusdumitru.florea@xwiki.com>>
wrote:
Hi James,
How is the GSoC work going on? Hope everything is fine. Ping me if
you need help.
Thanks,
Marius
--
Best wishes,
许凌志(Jame Xu)
MOE KLINNS Lab and SKLMS Lab, Xi'an Jiaotong University
Department of Computer Science and Technology, Xi’an Jiaotong University