I have a text area and a button. On click of that button I'm converting textarea to ckeditor.
My additional requirement is that , on click of other button the ckeditor must be converted back to textarea.
My code:
<textarea name="editor"></textarea>
<input type="button" value="click" onclick="CreateEditor('editor')" />
<script type="text/javascript">
function CreateEditor(name) {
var editor = CKEDITOR.instances[name];
if (editor) { editor.destroy(true); }
CKEDITOR.replace(name, {
toolbarStartupExpanded: false,
autoGrow_onStartup: true
});
if (CKEDITOR.env.webkit) {
CKEDITOR.on("instanceReady", function (e) {
document.getElementsByClassName("cke_wysiwyg_frame cke_reset")[0].contentDocument.body.parentNode.contentEditable = "true";
if (typeof FocusedElement !== 'undefined') {
FocusedElement = e.editor.name;
}
});
}
}
</script>
How can i achieve this?
In case of a more common use case - the requirement to get the HTML code back from CKEditor (not the text), use editor.getData(). See the documentation for more details.
You have that in your own code:
function DestroyEditor(name) {
var editor = CKEDITOR.instances[name];
if (editor) { editor.destroy(true); }
}
The following line of code should give you the plane text from the CKEditor
var text = CKEDITOR.instances.editor.document.getBody().getText();
Now, you have to remove CKEDitor for that here is the line of code
CKEDITOR.instances.editor.element.remove()
Now, you can add the <textarea name="editor"></textarea> to your dom again assign text to it like
$("textarea[name=editor]").value = text;
Related
I have a form inside a panel. The panel opens and closes when a button is clicked. When the panel is opened [i.e., with the click of the button], I want to focus on the first input text box in the form which is inside the panel. When I close the panel [i.e., again clicking on the same button], I want to loose the focus from that input box.
So, in simple words, I want to toggle the focus on the text input box when the onclick event happens on the button.
I gave the input text box an id and did the following:
<input type="text" id="code" placeholder="enter code">
Inside the script tag:
$('.button-element').click(function(){ $('#code').focus();});
This makes the focus on the input text box but I want to remove the focus when I click the button again.
Please help me with this.
Thank you.
You could use this snippet (tested on chrome):
var $code = $('#code');
$('.button-element').on('mousedown', function () {
$(this).data('inputFocused', $code.is(":focus"));
}).click(function () {
if ($(this).data('inputFocused')) {
$code.blur();
} else {
$code.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="code" placeholder="enter code">
<button class="button-element">btn</button>
I know this is a very late answer, but here is a solution which adds a new jQuery method.
You can add this to top of your $.onready:
jQuery.fn.toggleFocus = function(){
if (this.is(":focus")) {
this.blur();
} else {
this.focus();
}
}
Usage:
$(".button-element").toggleFocus()
Try this:
var code = $('#code');
$('.button-element').click(function() {
if(code.is(":focus")) {
code.blur();
} else {
code.focus();
}
});
You can update your code to following
var focusInput = true;
$('.button-element').click(function(){
if(focusInput) {
$('#code').focus();
} else {
$('#code').blur();
}
focusInput = !focusInput;
});
Since you have not given any HTML,you need to change the code according to your need.
$('.button-element').click(function()
{
if($("#ID-of-panel").is(':visible'))
$('#code').blur();
else
$('#code').focus();
});
I'm trying to trigger a warning when the user leaves the page if he had made changes in the textareas of TinyMCE plugin.
There's my code. It works if i use a normal form textarea, but it doesn't go well when i add the 'onkeydown' event to the tiny's textarea. I've comproved the value of 'cambios' with the browser console and i saw that it never changes its value.
JS:
var cambios = false;
function change_cambios (){ cambios = true;}
window.onbeforeunload = function() {
if(cambios) {
return confirm('Are you sure?');
}
return;
}
HTML:
<form id="formulari" method="post" >
<textarea id="ap0sub2" name="area" onkeydown="change_cambios();"></textarea>
</form>
That works perfectly if i use it within tinyMCE plugin. But when i include the text editor, the value of 'cambios' remains to false.
Any ideas?
Thanks a lot!
tinyMCE hides the textarea and presents its own contenteditable div so there is no keydown happening on your textarea. You'll need to add the event listener using tinyMCE's methods when you initialise it:
tinyMCE.init({
selector:'#ap0sub2',
setup : function(ed) {
ed.on('keydown', function(e) {
cambios = true;
console.log(cambios);
});
}
});
Working demo: http://jsfiddle.net/exmdg7ha/
In tinyMce 4:
tinymce.init({
...
init_instance_callback: function (editor) {
editor.on('keyDown', function (e) {
console.log('Element clicked:', e.target.nodeName);
});
}
});
https://www.tinymce.com/docs/advanced/events/
I need to use two plug-ins in one element on my page. I've never needed to do this and tried as it is in the code below. Most did not work!
<script type="text/javascript">
$(document).ready(function()
{
var wbbOpt = {buttons: "bold,italic,underline,|,img,link,|,code,quote"}
// plugin one wysibb
$("#editor").wysibb(wbbOpt);
// plugin two hashtags
$("#editor").hashtags();
//the two plugin worked in textarea #editor
});
</script>
Can anyone help me? Thank you.
So you can't use them because each of them take control and wrap the textarea. Since the editor is the most complex of the two the best thing to do is to take the code of the hashtag and adapt it at your need.
So here's a working example, but if you want you can trigger the function I use to the change event (adding it) or some way else
<div id="higlighter" style="width;1217px;"></div>
<textarea id="editor"></textarea>
<br />
<input id="btn" type="button" value="HASH">
<br />
$(document).ready(function() {
var wbbOpt = {
buttons: "bold,italic,underline,|,img,link,|,code,quote"
};
$("#editor").wysibb(wbbOpt);
$('#btn').click(function () { report() });
});
function report() {
$("#hashtag").val($("#editor").htmlcode());
var str = $("#editor").htmlcode();
str = str.replace(/\n/g, '<br>');
if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,#?^=%&:\/~+#-]*[\w#?^=%&\/~+#-])?#([a-zA-Z0-9]+)/g)) {
if(!str.match(/#([a-zA-Z0-9]+)#/g)) {
str = str.replace(/#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}else{
str = str.replace(/#([a-zA-Z0-9]+)#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}
}
$("#editor").htmlcode(str);
}
you can check a working code here on jsfiddle.
http://jsfiddle.net/4kj7d6mh/2/
You can type your text and use the editor, and when you want to higlight the hastag you click the button. If you want that to happen automatically you have to change this line:
$('#btn').click(function () { report() });
And attach the function to the keypress for example (experiment a bit)
I am building a feature similar to the page customization feature of pagemodo.com. The user has to click on a label(div) in a HTML page and a CKEDITOR will load in a separate div with the label text.
Now, the ckeditor is loading with the label text but the "KeyUp" event of CKEDITOR is not firing. Only if the "KeyUp" event fires, I would be able to call another function "readAsTyped" to change the text in the label simultaneously.
You can see the working copy here http://graffiti-media.co/testing/rashmi/custom/
$(document).ready(function() {
$('.editable').click(function(){
$(this).children().each(function(index, domEle) {
createEditor($(domEle).text(), domEle);
});
});
});
var editor, html = '';
function createEditor(text1, domEle)
{
// Create a new editor inside the <div id="editor">, setting its value to html
var config = {};
ckeditor_instance = CKEDITOR.appendTo( 'editor', config, text1 );
var abc=ckeditor_instance.name;
ckeditor_instance.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
readAsTyped($('#cke_editor2'),$(domEle));
//on focus
}
);
});
});
}
function readAsTyped(obj, label) {
var typedVal = obj.val();
// set the value of characters into the label
$(label).html(typedVal);
}
Any help would be greatly appreciated.
Do you mean something like this?
http://alfonsoml.blogspot.com.es/2012/05/recipe-live-preview-of-ckeditor.html
I use VS2010,C# to develop an ASP.NET web app, I'm going to implement a search box like the one used in Stackoverflow (or other sites), initially there is a phrase (for instance "search") in the search text box, when user click in text box, its text is emptied and user can type his phrase, but if he leaves the text box (lost focus) empty, again the phrase "search" is displayed, how can I implement this nice effect?
thanks
This is the textbox watermark plugin which I use:
http://code.google.com/p/jquery-watermark/
I then created the following code which uses the title attribute for the watermark text for all elements with the .textbox_watermark class
var Textbox_Watermark =
{
init: function () {
var textboxWatermarks = $(".textbox_watermark");
for (var i = 0, ii = textboxWatermarks.length; i < ii; i++) {
$(textboxWatermarks[i]).watermark(textboxWatermarks[i].title);
}
}
}
Textbox_Watermark.init();
Then when focus is on the textbox, the watermark is removed.
You will need the jQuery framework for this to work
Here is a little script I use for just this purpose. It does required JQuery though, but if that is an option for you then give it a try. (there is probably a javascript alternative for this too, but I dont know it)
function addInputBlur(selector, text) {
var element = $(selector);
element.blur(function () {
if ($(this).val() == "") {
$(this).val(text);
$(this).addClass("InputBlur");
}
else {
$(this).removeClass("InputBlur");
}
});
element.focus(function () {
if ($(this).val() == text) {
$(this).removeClass("InputBlur");
$(this).val("");
}
});
element.blur();
}
Note: the "selector" param should be a JQuery selector value (i.e. "#MyTextbox")
Also, the "InputBlur" CSS class is just the style I use for the grey/italic font
I have seen the view source for stack overflow and what i notice is that they have a attribute named placeholder
<div id="hsearch">
<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input autocomplete="off" name="q" class="textbox" **placeholder="search"** tabindex="1" type="text" maxlength="140" size="28" value="">
</div>
</form>
</div>
try this it works for mozilla ,, check for others
hope it helps
<input type="text"
onblur="javascript:if(this.value=='') this.value= this.defaultValue;"
onfocus="javascript:if(this.value==this.defaultValue) this.value='';"
id="txtSearch"
value="search"
name="txtSearch" />
You can do this in JavaScript using a function similar to this one:
/*
* applyDefaultValue() - Takes a DOM object and it's string value as paramters, when the element
* is focussed, the 'value' is blanked out, ready for user entry. When the item is blurred, if nothing was typed
* then the original value is restored.
*/
function applyDefaultValue(elem, val) {
elem.value = val;
elem.onfocus = function() {
if (this.value === val) {
this.value = ''; //On focus, make blank
}
}
elem.onblur = function() {
if (this.value === '') {
this.value = val; //If it's not in focus, use declared value
}
}
}
You can then apply this to items like this:
/*
* Onload function to set the default 'email address'/'search' value and blank out the password field
*/
window.onload = function() {
applyDefaultValue(document.getElementById('email'), 'Email Address');
}