RapidSpell Web .NET Documentation: 3rd Party Textboxes

As you type is not enabled for 3rd party or HTML editors. Generally, to use the static inline spell check, setup spell checking as usual but launch the spell check with rapidSpell.ayt_spellCheck('text box id'), where the text box id is the ID of the editable element - if this is not found the spell checker will look for an editable element.

Dialog spell checking

Generally, to use the dialog spell check, setup spell checking as usual but launch the spell check with rapidSpell.dialog_spellCheck('text box id'), where the text box id is the ID of the editable element - if this is not found the spell checker will look for an editable element.

Examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/ckeditor_files/ckeditor.js" type="text/javascript"></script>
    <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js" type="text/javascript"></script>
    <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js" type="text/javascript"></script>
    
<script type="text/javascript">

    rapidSpell.ayt_staticMode = true;
    rapidSpell.ayt_aytEnabled = false;


    function spell(id, mode) {
        rapidSpell.setParameterValue('default', 'IgnoreXML', true);
        var ifr = document.getElementsByClassName('cke_wysiwyg_frame cke_reset')[0];
        ifr.setAttribute('id', id+'_ifr');
        ifr.id = id+'_ifr';

        if (mode == 'inline')
            rapidSpell.ayt_spellCheck(id + '_ifr')
        else {
            
            rapidSpell.dialog_spellCheck(true, id + '_ifr')
        }
    }


    window.onload = function () {

        var editor = CKEDITOR.replace('editor1');

        editor.addCommand("inlineSpellCommand", { // create named command
            exec: function (edt) {
                spell('editor1', 'inline');
            }
        });

        editor.addCommand("dialogSpellCommand", { // create named command
            exec: function (edt) {
                spell('editor1', 'dialog');
            }
        });

        editor.ui.addButton('SpellInlineButton', { // add new button and bind our command
            label: "Click me",
            command: 'inlineSpellCommand',
            toolbar: 'insert',
            icon: '/AYT/abc.png'
        });
        editor.ui.addButton('SpellDialogButton', { // add new button and bind our command
            label: "Click me",
            command: 'dialogSpellCommand',
            toolbar: 'insert',
            icon: '/AYT/abc.png'
        });

        /*If you are going to do this and you want to use a custom toolbar out of your config it's not going to work unless you add 'SpellInlineButton' and 'SpellDialogButton' to your custom toolbar.*/
    }


</script>
</head>
<body>
<form>
<textarea name="editor1"><p>Initial value.</p></textarea>
<input type="button" onclick="spell('editor1', 'inline')" value = 'Inline spell check' />
<input type=button onclick="spell('editor1', 'dialog')" value='Dialog spell check' />
</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
   
    <!-- CDN hosted by Cachefly -->
    <script type="text/javascript" src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript" src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js"></script>
    <script type="text/javascript" src="/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js"></script>
    
    <script type="text/javascript">
        tinymce.init({
            height: 160,
            selector: 'textarea',
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | mybutton1 mybutton2",
            setup: function (ed) {
                // Add a custom button for inline check
                ed.ui.registry.addButton('mybutton1', {
                    text: 'Inline spell check',
                    context: "tools",
                    image: '../images/abc.png',
                    onclick: function () {
                        rapidSpell.ayt_spellCheck('mytextbox_ifr');
                    }
                });
                // Add a custom button for dialog check
                ed.ui.registry.addButton('mybutton2', {
                    text: 'Dialog spell check',
                    context: "tools",
                    image: '../images/abc.png',
                    onclick: function () {
                        rapidSpell.setParameterValue(document.getElementById('mytextbox_ifr'), 'IgnoreXML', true);
                        rapidSpell.dialog_spellCheck(true, 'mytextbox_ifr');
                    }
                });
            }
        });
        rapidSpell.ayt_staticMode = true;
        rsw_absolutePositionStaticOverlay = true;
       
    </script>
    <title></title>
    <style type="text/css">
       .oldBrowserBox, .oldBrowserBox *
        {
           font-size: 11px !important;
           font-family:Verdana,Arial,Helvetica,sans-serif !important; 
        }  
</style>
</head>
<body>   
        <textarea id='mytextbox' name="S1" ></textarea>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/ckeditor_files/ckeditor.js" type="text/javascript"></script>
    <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js" type="text/javascript"></script>
    <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js" type="text/javascript"></script>
    
<script type="text/javascript">
    //if you have jquery you can use $.inArray 
	if (!Array.indexOf)
	{
	  Array.indexOf = [].indexOf ?
		  function (arr, obj, from) { return arr.indexOf(obj, from); }:
		  function (arr, obj, from) { // (for IE6)
			var l = arr.length,
				i = from ? parseInt( (1*from) + (from<0 ? l:0), 10) : 0;
			i = i<0 ? 0 : i;
			for (; i<l; i++) {
			  if (i in arr  &&  arr[i] === obj) { return i; }
			}
			return -1;
		  };
	}
		
		
	var ckControls = ['editor1', 'editor2'];
	rapidSpell.ayt_staticMode = true;
	 rapidSpell.ayt_aytEnabled = false;
	var inlineSpellMode=false;


    function spell(mode) {
        //give un-id'd textboxes an id
        var idsToCheck = [];
        var textareas = document.getElementsByTagName("textarea");
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < textareas.length; i++){            
            if(ckControls.indexOf(textareas[i].name)==-1)//not a CK textbox, so treat like a regular textarea
            {
                if (textareas[i].id == ''){
                          textareas[i].setAttribute('id', textareas[i].name+i);
                          textareas[i].id = textareas[i].name+i;
                }



                idsToCheck[idsToCheck.length] = textareas[i].id;
            }
        }
        for (var i = 0; i < inputs.length; i++){
            if(ckControls.indexOf(inputs[i].name)==-1)//not a CK textbox, so treat like a regular input
            {
                if (inputs[i].type == 'text' && inputs[i].id == ''){
                          inputs[i].setAttribute('id', inputs[i].name+i);
                          inputs[i].id = inputs[i].name+i;                           
                }

                if(inputs[i].type == 'text')
                    idsToCheck[idsToCheck.length] = inputs[i].id;
            }
        }                      

        
        
        var ifrs = document.getElementsByClassName('cke_wysiwyg_frame cke_reset');
        for(var i=0; i<ifrs.length; i++){
            var ifr = ifrs[i];
            ifr.setAttribute('id', i+'_ifr');
            ifr.id = i+'_ifr';
            rapidSpell.setParameterValue(ifr, 'IgnoreXML', true);
            idsToCheck[idsToCheck.length] = ifr.id;
        }

        if (mode == 'inline'){            
            inlineSpellMode = !inlineSpellMode;
            if(inlineSpellMode)
                rapidSpell.ayt_setupTextBoxes(false, idsToCheck);
            rapidSpell.ayt_spellCheck();
        }else {
            
            rapidSpell.dialog_spellCheck(true, idsToCheck);
        }
    }

    window.onload = function () {
        for(var i=0; i<ckControls.length; i++){
            CKEDITOR.replace(ckControls[i]);       
        }
    };
    

		
	</script>
	</head>
	<body>
	<form>
	<textarea name="editor1"><p>Initifal value.</p></textarea>
	<textarea name="editor2"><p>Subseequent value.</p></textarea>
	<textarea name="ta" >helllo worlkd</textarea>
	<input type="button" onclick="spell('inline')" value = 'Inline spell check' />
	<input type=button onclick="spell('dialog')" value='Dialog spell check' />



</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
   
    <!-- CDN hosted by Cachefly -->
    <script type="text/javascript" src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript" src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js"></script>
    <script type="text/javascript" src="/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js"></script>
    
    <script type="text/javascript">
            rapidSpell.ayt_staticMode=true;
            rapidSpell.ayt_aytEnabled = false;
            rapidSpell.setParameterValue('default', 'IgnoreXML', true);
            
            tinymce.init({selector:'textarea'});
            
            function inlineCheck(){
                rapidSpell.ayt_setupTextBoxes(false, ['ta1_ifr', 'ta2_ifr']);    
                rapidSpell.ayt_spellCheck();
            }
    </script>


    <style type="text/css">
           .oldBrowserBox, .oldBrowserBox *
            {
               font-size: 11px !important;
               font-family:Verdana,Arial,Helvetica,sans-serif !important; 
            }  
    </style>

    </head>
    <body>        
    <textarea id="ta1">Helloo worldd...
    </textarea>
    <textarea id="ta2">niice to meet yuo.
    </textarea>    
    <input type="button" onclick="inlineCheck()" value="Inline spell"> 
    <input type='button' onclick="rapidSpell.dialog_spellCheck(true, ['ta1_ifr', 'ta2_ifr'])" value="Dialog spell"/>
</body>
</html>

This example assumes the same folder structure as the examples in the KendoUI download. The spell functions find the editor's IFRAME and assign an ID to it so that the spell checker can reference it.

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js"></script>
    <script src="/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js"></script>
    <style type="text/css">
        .oldBrowserBox, .oldBrowserBox * {
            font-size: 12px !important;
            font-family: Verdana,Geneva,Arial,Helvetica,sans-serif !important;
        }
    </style>
 
</head>
<body>
    
    
    
        <div id="example">
                <textarea id="editor" rows="10" cols="30" style="height:440px">
                    &lt;p&gt;&lt;img src=&quot;../content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
                    &lt;p&gt;
                        Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
                        In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                        and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
                        accessibility standards and provides API for content manipulation.
                    &lt;/p&gt;
                    &lt;p&gt;Features include:&lt;/p&gt;
                    &lt;ul&gt;
                        &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
                        &lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
                        &lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
                        &lt;li&gt;Cross-browser support&lt;/li&gt;
                        &lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
                        &lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;p&gt;
                        Read &lt;a href=&quot;http://docs.telerik.com/kendo-ui&quot;&gt;more details&lt;/a&gt; or send us your
                        &lt;a href=&quot;http://www.telerik.com/forums/&quot;&gt;feedback&lt;/a&gt;!
                    &lt;/p&gt;
                </textarea>
            <script>
                $(document).ready(function () {
                    
                    //rapidSpell.ayt_staticMode = true;
                    // create Editor from textarea HTML element with default set of tools
                    var e = $("#editor").kendoEditor({ resizable: {
                        content: true,
                        toolbar: true
                    }
                    });

                    rapidSpell.setParameterValue('default', 'IgnoreXML', true);
                    rapidSpell.ayt_staticMode = true;
                    rapidSpell.ayt_aytEnabled = false;
                    rapidSpell.dialog_setUseDivDialog(true);
                    rapidSpell.dialog_modal = true;
                });

                function inlineSpell(editorId) {
                    var ed = $("#" + editorId).prev('iframe')[0];
                    ed.setAttribute('id', editorId + "_IFRAME");                    
                    rapidSpell.ayt_spellCheck(editorId+'_IFRAME')
                }

                function dialogSpell(editorId) {
                    var ed = $("#" + editorId).prev('iframe')[0];                    
                    ed.setAttribute('id', editorId + "_IFRAME");
                    rapidSpell.dialog_spellCheck(true, editorId);
                }
            </script>
        </div>

    <input type="button" onclick="inlineSpell('editor')" value="Inline spell check"/>
    <input type="button" onclick="dialogSpell('editor')" value="Dialog spell check" />
    
</body>
</html>

Custom text interface

In cases where the automatic text retrieval interface does not return the correct text to be spell checked, from the textbox, it is possible to define a custom interface. The custom interface is a simple class that gets and sets the text in the textbox.

For example, add the code below to the page - the getText function is called by the spell checker when text is needed to be spell checked, and the setText function is called by the spell checker when spell check has finished and the text needs to be set back in the textbox.

//textBoxId is the textbox to be spell checked
//mode is either 'dialog' or 'ayt', indicating the type of spell check occurring
rapidSpell.textInterfaceNeeded =  function (textBoxId, mode) {return new RSCustomInterface(textBoxId);}
  

function RSCustomInterface(tbElementName){
	this.tbName = tbElementName;
	this.getText = getText;
	this.setText = setText;
	function getText(){
		//return the text from the text component named this.tbName,
		//this may be HTML formatted text
		return document.getElementById(this.tbName).innerHTML;
	}
	function setText(text){
		//set the text in the text component to the text argument
		//this may be HTML formatted text           

		document.getElementById(this.tbName).innerHTML = text;

	}
}

3rd Party Textboxes

Static inline spell checking

Dialog spell checking

Examples

Single CKEditor Example (inline & dialog modes)

Single TinyMCE Example (inline & dialog modes)

Multiple CKEditor Example (inline & dialog modes)

Multiple TinyMCE Example (inline & dialog modes)

KendoUI Editor Example (inline & dialog modes)

Custom text interface