Spell check in Sencha Textarea - javascript

I want to have spell check for a textarea field in my sencha app.
The textarea field is as follows :
{
xtype:'textareafield',
id:'txt',
height:220,
autoCorrect:true,
},
I tried using
autoCorrect:true
which did not help. Can
spellcheck="false"
html property be used? Is there any deployed WEBSERVICE available so that I can just connect and get the misspelt words? Any help is appreciated.

Modern browsers support the spellcheck attribute, so for example you can have an editable p tag:
<p contenteditable="true" spellcheck="true">This is a paragraphh. It is editable. Try to change the text.</p>
The misspelled word "paragraphh" will be underlined in red.
You can dynamically add the attribute like this using JavaScript:
myTextArea.setElementAttribute("spellcheck", true);

Client side spell check Javascript :
http://www.chrisfinke.com/2011/03/31/announcing-typo-js-client-side-javascript-spellchecking/

Related

How to set value into textarea attribute using nightwatch.js

I am working on nighwatch.js for web ui testing, I want to set value to a textarea, and textarea has an attribute which has my actual text, I am writing full textarea and how I am setting in following.
<div class="textarea-description">
<textarea cols="50" class="myClass setText" data-def placeholder="text to be replaced using nightwatch"/>
</div>
I am trying to set value in above textarea's attribute data-def placeholder as following ways
browser.setValue('.textarea-description textarea[type=text]','nightwatch'); or
browser.setValue('.textarea-description textarea[data-def placeholder=text]','nightwatch'); or
browser.setValue('.textarea-description textarea[type=data-def placeholder]','nightwatch');
but nothing is working.
This might not be the best solution but it works:
browser
.execute("document.querySelector('.textarea-description .myClass').setAttribute('placeholder', 'nightwatch');")
If you have jQuery you can make it a bit nicer:
browser
.execute("$('.textarea-description .myClass').attr('placeholder', 'nightwatch');")
Thank you for your all valuable suggestions, all suggestions provided by you was able to give good knowledge but unfortunately none of the suggestion worked. I have resolved it by using following.
client.setValue('.textarea-description textarea','new text to be write.');
Actually attribute "data-def placeholder" was using only watermark that was not actual text, so it is working.
You could use xpath to get the attribute.
.useXpath().setValue('//textarea[contains(#placeholder,'text to be replaced using nightwatch')]#placeholder', 'nightwatch')
How to select specified node within Xpath node sets by index with Selenium?
This worked for me.
.assert.visible('div.textarea-description textarea.setText')
.moveToElement('div.textarea-description textarea.setText', null, null)
.mouseButtonClick('left')
.keys([browser.Keys.CONTROL, "a"])
.keys([browser.Keys.CONTROL, "nightwatch"])

How to give default placeholder text to the textarea in ckeditor?

Searhced a lot for this. I have been trying to add placeholder text in ckeditor using one of its plugins "configuration Helper" plugin for CkEditor.
How to give default placeholder text to the textarea in ckeditor?
Follow the below steps to add placeholder.
1) Add confighelper plugin to your plugin folder.
2) Add this piece of code to your config:
config.extraPlugins='onchange,confighelper';
3) In your html page add place holder attribute to your textarea, its mandatory and add
CKEDITOR.replace( '#editor', {
extraPlugins : 'confighelper',
});
4) Now you can enjoy.
In HTML5 ther is a placeholder attribute
<textarea placeholder="Describe yourself here..."></textarea>
Otherwise you need javscript to do it
To check which browsers are compatible have a look at: http://www.w3schools.com/tags/att_textarea_placeholder.asp

displaying html tags as html in input field

Are there any possibility to do something like that?
Or how I can simulate input field with possibility input usual text and display html tags as html?
Thanks.
You can use contenteditable attribute:
http://jsfiddle.net/AnWej/
<div contenteditable></div>​
You can use the HTML5 property contenteditable, if you can use this technology.
Exemple: http://jsfiddle.net/hZWWd/
I'm sure with some javascript you can add some buttons to put in bold or else for exemple (by adding some tags), and you have your own richtextbox.
Hope I didn't misunderstood your question.

can't get textarea field using jquery rte lwrte?( issues of plugin behaviour I think)

I am using this plugin http://code.google.com/p/lwrte/, but I can not select the textarea or the id with jquery, I know it creates an iframe, but I read the docs and It does not mention anything about this issue, I just want to count the characters in the textarea and then that the user can not type, but I dont find a solution for this, has someone has a solution? what can I do?
<textarea id="message" rows="10" cols="120" class="rte1"></textarea>
$('#message').keyup(function(){ //tried with this does not work
});
any more help??
LWRTE takes textAreas and turns them into <iframe>s. So you need to use something like Google Chrome or Firebug to identify the new name of the object, then reference that directly. Something like this:
$('body iframe').contents().find('body').html()
Replace $('message') with $('#message') to get the actual element.

Getting the value from a TinyMCE textarea

I have a news editor for my site with which I am using TinyMCE. What I would like to be able to do is have a button (outside of the TinyMCE editor itself) that I can click to scan the textarea for any images, then list those images as options to use for a thumbnail image for said news article.
For an idea of what I mean, please see this link here: https://docs.google.com/leaf?id=0B05m73kzudwPNzUwZjkyNmItYjZkMy00NTdlLTlkNDctOGRhYThjMzNjNTM5&hl=en_US
My problem is that document.getElementById('NewsArticle').value is not returning anything when there is text in the textarea
The other potential problem is that whats shown in the textarea is not actual code, but images etc too so I wasn't sure it would even work in the first place, but since when the form is submitted the data[News][article] value is back into text, I thought there might be a chance.
If anyone knows how to get either the content or code for the tinyMCE textarea, or has a better solution, I'd be interested to hear
TinyMce has an api for accessing content from the editor.
This code will grab the html from the active editor:
// Get the HTML contents of the currently active editor
tinyMCE.activeEditor.getContent();
// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});
// Get content of a specific editor:
tinyMCE.get('content id').getContent()
Use below syntax, which will remove unwanted character from your input textarea....
(((tinyMCE.get('YourTextAreaId').getContent()).replace(/( )*/g, "")).replace(/(<p>)*/g, "")).replace(/<(\/)?p[^>]*>/g, "");
Try
window.parent.tinymce.get('contentID').getContent();
For some reason, the stock-standard tinymce.get() call didn't work for me, so I tried this and it works. :)
var temp = tinymce.get('textAreaName').save();
console.log(temp);
OR
var temp =tinymce.get('textAreaName').getContent();
console.log(temp);
Probably you have something like
<form>
<textarea id="myArea">Hello, World!</textarea>
</form>
you should simply add as follows
<form method="post">
<textarea id="myArea" name="value">Hello, World!</textarea>
<input type="submit">
</form>
and you can catch the data with PHP under myArea var.

Categories

Resources