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

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

Related

How do I get tab spaces to work in CKEditor?

Is it possible to get CKEditor to recognize tab as a feature inside the editor, especially when in source code mode? Right now, when I hit the tab key, the cursor goes to the next field on the page.
I'd like to get the tab character working so CKEditor can work more like a code editor in which I can format my markup with tab spaces.
I'd really appreciate any help I can get with this.
I'm using CKEDitor 4.0.1
Or, perhaps this feature is supported in one of the newer versions of CKEditor?
This link might help: http://get-simple.info/forums/showthread.php?tid=1347
Basically, just add
config.tabSpaces = 4; // or some other value
to config.js and every time Tab is hit, you get that number of spaces.
The code is config.tabSpaces = 4; if you are saving to config.js. If you are setting configurations inside the file, the code will be as follows:
var editor = CKEDITOR.replace( 'editor1', {
tabSpaces: 4
});
it should be noticed, as Kamil Sama commented in rvighne answer, that this requires the tab plugin: tab plugin
<textarea name="text_note" id="text_note"> </textarea>
<!-- tabSpaces:4 add this in your script like as bellow code.-->
<script type="text/javascript">
CKEDITOR.replace('text_note',{tabSpaces:4});
</script>
If you using inline element, you can use like this
var editor2 = CKEDITOR.inline( 'your div id', {
tabSpaces : 5,
});

Why is CKEditor adding itself to divs where it is not supposed to?

I've a page where I've initialized Bootstrap-WYSIWYG and CKEditor together.
The problem is CKEditor keeps adding itself to Bootstrap-WYSIWYG div even though I've specifically initialized CKEditor using class="ckeditor"
My code is as follows:
<textarea class="ckeditor" name="editor1"></textarea>
The page can be found at http://cloudadmin-theme.elasticbeanstalk.com/rich_text_editors.html
Try clicking on the tab that says "Bootstrap Editor with Keyboard Shortcuts" where it's written "Go ahead...". This brings up CKEditor onfocus, which is weird!
I'm at my wits end. Can someone kindly guide me. What am I doing wrong?
CKEDITOR by default will auto hook up elements that have the contenteditable="true" attribute. You want to turn off the CKEDITOR's auto inline editing or it can be done in the global config.
CKEDITOR.disableAutoInline = true;
I prefer to do it in code and not in the config so if anyone else uses it, you do not screw them up.
Based on your comment on enabling CKEDITOR This is pulled from the CKEDITOR 4 docs
Enabling Inline Editing
Inline Editing is enabled directly on HTML elements through the HTML5
contenteditable attribute.
Suppose, for example, that you want to make a element editable.
In order to achieve this, it is enough to do so:
<div id="editable" contenteditable="true">
<h1>Inline Editing in Action!</h1>
<p>The div element that contains this text is now editable.
</div>
It is also possible to enable editing with explicit code, by calling
the CKEDITOR.inline method:
<div id="editable" contenteditable="true">
<h1>Inline Editing in Action!</h1>
<p>The div element that contains this text is now editable.
</div>
<script>
// Turn off automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable' );
</script>
What you are experiencing is the ckeditor inline editor mode.
It is automatically instantiated when you have an html element with:
contenteditable="true"
To avoid it you can remove this attribute or you can put in /Ckeditor/config.js file
CKEDITOR.disableAutoInline = true;
To bind ckeditor in standard mode you can use:
CKEDITOR.replace( 'editor1' );
If you want to bind it in inline mode:
CKEDITOR.inline( 'editor1' );

Can I use CKEDITOR toolbar but the content is locked/readonly?

my problem is I need to use the toolbar of ckeditor for text style but I need to restrict the user in changing the content.
Is this possible?
To set as read-only, use the CustomConfig method:
CKEDITOR.replace(id,{customConfig :readOnly:true});
Example:
<textarea id="editor1">Test</textarea>
CKEDITOR.replace('editor1',{width:'700px',readOnly:true});
Js Fiddle Demo

Spell check in Sencha Textarea

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/

TinyMce Allow all Html tag

I'm using TinyMce and even though the danger of a script attack, I need to enable all html tags with the editor.
Currently, I'm use like:
valid_elements: "#[class],p[style],h3,h4,h5,h6,a[href|target],strong/b,"
+ "div[align],br,table,tbody,thead,tr,td,ul,ol,li,img[src]"
But always need to add something, I want to enable ALL HTML tags with all attributes. Is there such switch that Disables the HTML filtering?
You can set
valid_elements : '*[*]',
to allow all html tags.
To keep style tags, use valid_children : "+body[style]"

Categories

Resources