Forums

Board index » YUI 2.x: » General

Page 1 of 2   [ 12 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view

Chris Jones

  • Username: cajchris
  • Joined: Thu May 14, 2009 6:41 am
  • Posts: 17
  • IRC: cajchris
  • Offline
  • Profile
Tags:

Issue with spell checker

Post Posted: Wed May 27, 2009 6:50 am
+0-
Hi,

when using the spell checker I noticed that the text in the actual text area never alters in that any incorrect words are not highlighted in yellow as on the example. I have got the CSS entry included for "yui-spellchecker" with background color set to yellow in my editor.css which is referenced in my html. Also, I alerted out the html after the replace is done and it does have the <span class="yui-spellchecker"> wrapped around it.

However the text in the text area never changes. It's as if the method setEditorHTML() does not actually change the contents of my text area which I was led to believe it did. My current code for dealing with this highlighting of incorrect terms is below, Note that I have commented out some logic and am entering the simple text as "this is just a tset", and as you can see my code is just looking for "tset" and wrapping the span around it which as I said it is doing:

myEditor._checkSpelling = function(o)
{
//Change this code to suit your backend checker
//var data = eval('(' + o.responseText + ')');
var html = this._getDoc().body.innerHTML;
//for (var i = 0; i < data.data.length; i++)
//{
html = html.replace("tset", '<span class="yui-spellcheck">tset</span>');
//}
this.setEditorHTML(html);
this.saveHTML();
alert(html);
//this._spellData = data.data;
};
I also have in my "this.toolbar.on" section:

this.toolbar.on('spellcheckClick', function()
{
if (!this.checking)
{
//Note here that I am calling this method and not doing the check.php part as I dont use this
this.checking = true;
this._checkSpelling();
}
else
{
this.checking = false;
var el = Dom.getElementsByClassName('yui-spellcheck', 'span', this._getDoc().body);
//More work needed here for cleanup..
Dom.removeClass(el, 'yui-spellcheck');
Dom.addClass(el, 'yui-none');
this.toolbar.set('disabled', false);
this.nodeChange();
}
return false;
}, myEditor, true);

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 6:54 am
+0-
Post a link to a broken page.

I can't debug what I can't see.

Chris Jones

  • Username: cajchris
  • Joined: Thu May 14, 2009 6:41 am
  • Posts: 17
  • IRC: cajchris
  • Offline
  • Profile

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 6:57 am
+0-
in addition the other javascript I have for this spell checker is as follows:

SNIPPED


Note I have not added in my backend code as yet as I am just simply trying to get any incorrect terms highlighted in yellow. Once I have this, I will move onto clicking on the words and getting the pop up window to appear and also doing the backend code which will be in the form of ajax servlet calls most likely using the JaSpell package from sourceforge.net


Last edited by davglass on Wed May 27, 2009 7:00 am, edited 1 time in total.
Removed unreadable code.

Chris Jones

  • Username: cajchris
  • Joined: Thu May 14, 2009 6:41 am
  • Posts: 17
  • IRC: cajchris
  • Offline
  • Profile

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 7:00 am
+0-
I understand that dav, but I cannot post a link to a broken page as this is in the very early stages of development only on my machine withing my office's network.

As I have said the javascript is as it is on the example apart from the changes I have made which I have posted earlier. I realise this is frustrating, however i am not sure what else I can post.

Cheers
Chris

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 7:04 am
+0-
It's an HTML page, just post a copy of the broken page somewhere. Simply create a stand alone page that shows your issue and post it somewhere. Then I can debug it.

Randomly pasting unformatted and useless chucks of Javascript doesn't help me debug your issue, it just floods the forum.

Chris Jones

  • Username: cajchris
  • Joined: Thu May 14, 2009 6:41 am
  • Posts: 17
  • IRC: cajchris
  • Offline
  • Profile
Tags:

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 7:04 am
+0-
I also noticed that in:


myEditor._checkSpelling = function(o)
{
//Change this code to suit your backend checker
//var data = eval('(' + o.responseText + ')');
var html = this._getDoc().body.innerHTML;
//for (var i = 0; i < data.data.length; i++)
//{
html = html.replace("tset", '<span class="yui-spellcheck">tset</span>');
//}
this.setEditorHTML(html);
this.saveHTML();
alert(html);
//this._spellData = data.data;
};

When the spell check button is repeatedly clicked on and off it results in the term "tset" having the span wrapped around it each time which results in lots and lots of nested spans. This must surely be the case on the example one as all I changed was what we were replacing (a word) with that word within a span.

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 7:06 am
+0-
When the Editors saveHTML routine is run, the extra spans should be cleaned up.

Chris Jones

  • Username: cajchris
  • Joined: Thu May 14, 2009 6:41 am
  • Posts: 17
  • IRC: cajchris
  • Offline
  • Profile
Tags:

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 7:14 am
+0-
It will be very difficult if not impossible for me to post a copy somewhere as I am using the YUI editor as part of a web framework. This means that there are other javascript and css files that are also used. The context in which this editor is used is when a user clicks on an icon (i.e. add a new news article) and a pop up t-pane appears and the editor is rendered within that pop up and is used to enter the body text for the new news article.

So you see, that it is very difficult to get a working copy posted somewhere as it will not look as it does on my machine.

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile

Re: Issue with spell checker

Post Posted: Wed May 27, 2009 7:59 am
+0-
Chris --

I understand that, however, breaking it down to the smallest reproducible test case usually helps you find your error. When you break it down to a simpler version, the errors usually surface easier/faster.

In the case they don't, you have a simple reproducible case that you can post here for us to use to help debug your issue. In the case that it is a bug, the simple reproducible test case is perfect to attach to that bug, giving the developer a clear and accurate test to use when fixing it.

Chris Jones

  • Username: cajchris
  • Joined: Thu May 14, 2009 6:41 am
  • Posts: 17
  • IRC: cajchris
  • Offline
  • Profile
Tags:

Re: Issue with spell checker

Post Posted: Thu May 28, 2009 12:19 am
+0-
Ok Dav,

I spent this morning stripping down the source into a flat HTML file and removed all of the surrounding code that was not required to see if I could get the basic editor to work on its own and it still did not change the text to yellow when it found a mistake. Below is the HTML source I have in my file:

Code:
<html>
<HEAD>
  <TITLE>Relatis_10</TITLE>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/yuiloader-

debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/event-debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/dom-debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/element-debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/container-

debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/menu-debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/button-debug.js"></SCRIPT>
  <SCRIPT language=JavaScript type=text/javascript src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/editor-debug.js"></SCRIPT>
</HEAD>
<BODY>

                        <LINK rel=stylesheet type=text/css href="C://webserver/products/docs/Relatis1/RichTextEditor/css/yui.css">
                      <LINK rel=stylesheet type=text/css href="C://webserver/products/docs/Relatis1/RichTextEditor/css/dpSyntaxHighlighter.css">
                      <LINK rel=stylesheet type=text/css href="C://webserver/products/docs/Relatis1/RichTextEditor/css/menu.css">
                      <LINK rel=stylesheet type=text/css href="C://webserver/products/docs/Relatis1/RichTextEditor/css/button.css">
                      <LINK rel=stylesheet type=text/css href="C://webserver/products/docs/Relatis1/RichTextEditor/css/container.css">
                      <LINK rel=stylesheet type=text/css href="C://webserver/products/docs/Relatis1/RichTextEditor/css/editor.css">
                      <DIV class=yui-skin-sam>
                      <DIV id=bd>
                      <TEXTAREA style="POSITION: absolute; WIDTH: 100%; BORDER-BOTTOM-WIDTH: 2px; HEIGHT: 250px; VISIBILITY: hidden; TOP: -

9999px; LEFT: -9999px" id=news_body class=tfield onmousedown=this.focus(); name=news_body helpid onprop="" editorOn="true"></TEXTAREA></DIV>
                        <SCRIPT language=JavaScript type=text/javascript

src="C://webserver/products/docs/Relatis1/RichTextEditor/scripts/customised-debug.js"></SCRIPT>
                      </DIV>
                      </DIV>
</BODY>
</html>


Obviously replace any links with your own for the javascript and css files. You will notice that below the text area where you place all your javascript for the specific example you are showing, I have another javascript file called customised-debig.js. I have included this below for you to make a file called this:

Code:
(function() {
   
   
   var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;
      Lang = YAHOO.lang,
      isOpen = false;

       var _handleWindowClose = function() {
       };

       var _handleWindow = function()
    {
         this.nodeChange();
           var el = this.currentElement[0],
           win = new YAHOO.widget.EditorWindow('spellcheck', {
            width: '170px'
           });

           var body = document.getElementById('spell_suggest');

           body.innerHTML = '<strong>Suggestions:</strong><br>';
           var ul = document.createElement('ul');
           ul.className = 'yui-spellcheck-list';
           body.appendChild(ul);

           var list = '';
           
      //Change this code to suit your backend checker
           for (var i = 0; i < this._spellData.length; i++)
      {
               if (el.innerHTML == this._spellData[i].word)
         {
                      for (var s = 0; s < this._spellData                  [i].suggestions.length; s++)
            {
                          list = list + '<li title="Replace (' +                this._spellData[i].word + ') with (' +                this._spellData[i].suggestions[s] +                ')">' + this._spellData[i].suggestions               [s] + '</li>';
                     }
               }
           }

           ul.innerHTML = list;
       
           Event.on(ul, 'click', function(ev)
      {
               var tar = Event.getTarget(ev);
               Event.stopEvent(ev);
               if (this._isElement(tar, 'li'))
         {
                      el.innerHTML = tar.innerHTML;
                      Dom.removeClass(el, 'yui-spellcheck');
                      Dom.addClass(el, 'yui-non');

                      var next = Dom.getElementsByClassName('yui-            spellcheck', 'span', this._getDoc().body)[0];
                      if (next)
            {
                          this.STOP_NODE_CHANGE = true;
                          this.currentElement = [next];
                          _handleWindow.call(this);
                      }
            else
            {
                          this.checking = false;
                          this.toolbar.set('disabled', false);
                          this.closeWindow();
                      }

                   this.nodeChange();
               }
           }, this, true);

           this.on('afterOpenWindow', function()
      {           
               this.get('panel').syncIframe();
               var l = parseInt(this.currentWindow.               _knob.style.left, 10);
               if (l === 40)
         {
                     this.currentWindow._knob.style.left = '1px';
               }
           }, this, true);

           win.setHeader('Spelling Suggestions');
           isOpen = true;
           //win.setBody(body);
           this.openWindow(win);       
       };

       var myConfig = {
        height: '150px',
        width: '100%',
        animate: true,
        dompath: false,
        focusAtStart: true
       };

       var myEditor = new YAHOO.widget.Editor('news_body', myConfig);


       myEditor._handleClick = function(ev)
   {
         if (this._isNonEditable(ev))
      {
               return false;
           }
           this._setCurrentEvent(ev);
           var tar =Event.getTarget(ev);
           if (this.currentWindow)
      {
               if (!Dom.hasClass(tar, 'yui-spellcheck'))
         {
                      this.closeWindow();
               }
           }
           if (!Dom.hasClass(tar, 'yui-spellcheck'))
      {
               if (YAHOO.widget.EditorInfo.window.win &&                YAHOO.widget.EditorInfo.window.scope)
         {
            YAHOO.widget.EditorInfo.window.scope.closeWindow.call      (YAHOO.widget.EditorInfo.window.scope);
               }
           }
           if (this.browser.webkit)
      {
               var tar =Event.getTarget(ev);
               if (this._isElement(tar, 'a') || this._isElement            (tar.parentNode, 'a'))
         {
                      Event.stopEvent(ev);
                      this.nodeChange();
               }
           }
      else
      {
               this.nodeChange();
           }
       };

       myEditor._checkSpelling = function(o)
   {           
         //Change this code to suit your backend checker
      //YOU WILL NOTICE I HAVE CHANGED THIS TO SIMPLY WRAP "TSET" WITH THE SPAN
           //var data = eval('(' + o.responseText + ')');
           var html = this._getDoc().body.innerHTML;
           //for (var i = 0; i < data.data.length; i++)
      //{
               html = html.replace("tset", '<span             class="yui-spellcheck">tset</span>');
           //}
          this.setEditorHTML(html);
alert(html);
           //this._spellData = data.data;
       };

       myEditor.on('windowspellcheckClose', function()
   {
         _handleWindowClose.call(this);
           isOpen = false;
       }, myEditor, true);
   
       myEditor.on('editorMouseDown', function(args)
   {
         var el = this._getSelectedElement();
          var el = Event.getTarget(args.ev);
           if (Dom.hasClass(el, 'yui-spellcheck'))
      {
               this.currentElement = [el];
               if (isOpen)
         {
                      myEditor.closeWindow();
                      _handleWindow.call(this);
               }
         else
         {
                      _handleWindow.call(this);
               }
               return false;
           }
       }, myEditor, true);

       myEditor.on('editorKeyDown', function(ev)
   {
         if (this.checking)
      {
               //We are spell checking, stop the event
               Event.stopEvent(ev.ev);
           }
       }, myEditor, true);

       myEditor.on('afterNodeChange', function()
   {
         this.toolbar.enableButton('spellcheck');
           if (this.checking)
      {
               this.toolbar.set('disabled', true);
               this.toolbar.getButtonByValue('spellcheck').set            ('disabled', false);
               this.toolbar.selectButton('spellcheck');
           }
       }, myEditor, true);

       myEditor.on('editorContentLoaded', function()
   {
         this._getDoc().body.spellcheck = false; //Turn off native      spell check
       }, myEditor, true);

      myEditor.on('windowRender', function()
   {
         var body = document.createElement('div');
           body.id = 'spell_suggest';
           myEditor.get('panel').body.getElementsByTagName            ('fieldset')[0].appendChild(body);

           myEditor._windows.spellcheck =
      {
               body: body
           };
       }, myEditor, true);

       myEditor.on('toolbarLoaded', function()
   {

      var spellCheckConfig =
      {
         type: 'push', label: 'Check spelling', value: 'spellcheck'
      };

      this.toolbar.addButtonToGroup(spellCheckConfig, 'insertitem');
      this.toolbar.on('spellcheckClick', function()
      {
            if (!this.checking)
         {
                      this.checking = true;
                      this._checkSpelling();
               }
         else
         {
                      this.checking = false;
                      var el = Dom.getElementsByClassName('yui-               spellcheck', 'span', this._getDoc().body);
                      //More work needed here for cleanup..
                      Dom.removeClass(el, 'yui-spellcheck');
                      Dom.addClass(el, 'yui-none');
                      this.toolbar.set('disabled', false);
                      this.nodeChange();
               }
               return false;
      }, myEditor, true);
       
         this.on('afterRender', function()
      {
              var wrapper = this.get('news_body_wrapper');
              wrapper.appendChild(this.get('element'));
              this.setStyle('width', '100%');
              this.setStyle('height', '100%');
              this.setStyle('visibility', '');
              this.setStyle('top', '');
              this.setStyle('left', '');
              this.setStyle('position', '');
              this.addClass('editor-hidden');
         }, this, true);
       }, myEditor, true);

   myEditor._defaultToolbar.titlebar=false; myEditor.   _defaultToolbar.buttonType = 'advanced';
       myEditor.render();
})();



So when testingt his you should enter some text that includes the mistake "tset" as my sample javascript is only looking for this to highlight as I have not did my backend java code just yet.

Cheers
Chris
Page 1 of 2   [ 12 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group