Hi James,
On 06/08/2011 05:15 AM, 许凌志(Jamesxu) wrote:
> and here are two sample code attached
> one is for textArea and one is for iframe, you can test it using this
> two sample codes
You're not using Prototype.js in these samples as your previous mail
suggests.. and the reason is probably because you're not doing these
experiments inside XWiki, using the {{html}} macro for instance.
Please use Prototype.js or GWT in order to write cross-browser code. And
if you ever need to write browser-specific code then don't check the
browser but check if the function/object you want to use is available.
Marius
>
> On Wed, Jun 8, 2011 at 10:14 AM, 许凌志(Jamesxu) <[email protected]
> <mailto:[email protected]>> wrote:
>
> Hi, This days I am doing some research related to auto-suggestion
> for both wiki editor(based on textarea) and wysiwyg editor(based on
> iframe designMode="on"), and I came across a problem which I think
> it is critical.
>
> When suggestion list are triggered by "[[" or "{{", the "up" and
> "down" keys should be forbidden in editor, instead, it should
> navigate the autosuggestion list to select suggestion item user want.
> The question is why should I do this, because if the insert position
> is changed by "up" and "down" key when using them navigate the
> suggestion list, the insertion will not be executed properly. so
> when the suggestion list is triggered, the cursor should stay where
> it is when navigate the suggestion list so that when user select one
> item, it can be added to the right place.
>
> In wiki editor, because it is based on textarea, so I can listen
> the keydown event, and if up and down keys are typed when suggestion
> list is triggered, return false for keydown callback functions. for
> example:
>
> textAreaObj.observe("keydown", function(e){
> var code = e.keyCode;
> if(code==38 || code ==40){
> return selectItems();
> }
> })
>
> function selectItems(){
> //todo:select items
> return false;
> }
>
> Fortunately, it works very well, but for wysiwyg editors which is
> based on iframe and its designMode="on", the same way is failed, the
> code is below. the cusor will be changed by typing up and down keys
> to navigate the suggestion list.
> var frm=IsIE?frames["frm"]:document.getElementById('frm').contentWindow;
>
> frm.document.observe("keydown", function(e){
> var code = e.keyCode;
> if(code==38 || code ==40){
> return selectItems();
> }
> })
>
> function selectItems(){
> //todo:select items
> return false;
> }
>
> Could anyone to give me some suggestions for this issue.~~~
>
>
> On Mon, Jun 6, 2011 at 2:51 AM, Marius Dumitru Florea
> <[email protected]
> <mailto:[email protected]>> wrote:
>
> 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
> > <[email protected]
> <mailto:[email protected]>
> <mailto:[email protected]
> <mailto:[email protected]>>>
> > 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
> _______________________________________________
> devs mailing list
> [email protected] <mailto:[email protected]>
> http://lists.xwiki.org/mailman/listinfo/devs
>
>
>
>
> --
> Best wishes,
>
> 许凌志(Jame Xu)
>
> MOE KLINNS Lab and SKLMS Lab, Xi'an Jiaotong University
>
> Department of Computer Science and Technology, Xi’an Jiaotong University
>
>
>
>
> --
> Best wishes,
>
> 许凌志(Jame Xu)
>
> MOE KLINNS Lab and SKLMS Lab, Xi'an Jiaotong University
>
> Department of Computer Science and Technology, Xi’an Jiaotong University
_______________________________________________
devs mailing list
[email protected]
http://lists.xwiki.org/mailman/listinfo/devs
