I'm trying to enable a button when the text in the jWYSIWYG textarea is changed. As far as i know, the jWYSIWYG when invoked, removes the textarea and places an iframe in its place, so $("#my-textarea-id") selector wont return any object. These are the attempts i made, all of them failed:
ATTEMPT 1:
as shown here this code should work, but it does not :(
$("#my-textarea-id").wysiwyg({
event:{
keyup: function(e){
$("#my-button").attr("disabled",false);
}
}
});
ATTEMPT 2:
in following attempts i'm initalizating the jWYSIWYG textareas from a diferent script that applies the .wysiwyg(...) function to all .RTF elements in the page (my textarea has this class).
The new frame that jWYSIWYG places has [old_textarea_id]-wysiwyg-iframe as ID, so i tried this:
$("#my-textarea-id-wysiwyg-iframe").keyup(function(){
$("#my-button").attr('disabled',false);
});
but failed again.
ATTEMPT 3:
The iframe part containing the text of the textarea has the .wysiwyg class. My last attempt was this:
$(".wysiwyg").keyup(function(){
$("#my-button").attr('disabled',false);
});
I have no idea how to handle the events over the jWYSIWYG elements so i ask for your help. Thank you!
this solved my problem
Adding event handler to an iframe using JQuery
jWYSIWYG replaces the textarea for an iframe. The below question's answer tells the appropiate way to bind events to the iframes and this way one can handle events of the RTF online editor.
i think the question can be useful for people so i'll not delete it for now.
Related
I have a page with a text and some words in the text can change dynamically. These words have an element and should have a tooltip. When the user hovers the word (or I guess on a touch device clicks it), a tooltip should be generated using generateSpecialMarkupElement($(element).text()). Once the HTML has been rendered to the DOM another JavaScript function has to be called replaceMarkupHTML().
I don't have control over these functions unfortunately.
Now I'm wondering if there is a simple way in bootstrap get this done. For instance a before event to run the first function and an after event to call the second one.
Here is a simple example text and simplified versions of the functions:
http://jsfiddle.net/8aqz5auk/1/
So is there a bootstrap-way of hooking/intercepting this kind of thing? Or is there maybe another simple way it could be done?
Edit: I just had an idea. When bootstrap shows a tooltip, it seems to inject an element into the DOM. The interesting part is the container with the class 'tooltip-inner'. So I tried to listen on the body for new elements matching '.tooltip-inner' to be injected and whenever that happens I try to manipulate it:
$('body').on('DOMNodeInserted', '.tooltip-inner', function () {
var el = $(this)
el.html("") // empty the tooltip element
el.append(generateSpecialMarkupElement(el.text())) // insert the generated markup element
replaceMarkupHTML() // replace the markup element with normal html
});
Unfortunately it doesn't work. It just throws a a million errors and the site freezes when I try it.
Edit 2:
Thanks to Chris Barr, I got a little bit closer: http://jsfiddle.net/8aqz5auk/2/
But the tooltip doesn't always show up and the position of the tooltip seems to be kind of wrong (shows up on top of the word, rather then next to/above/below/...).
You might want to look into the tooltip events listed in the docs: https://getbootstrap.com/docs/3.3/javascript/#tooltips-events
$('.elements-with-tooltips').on('show.bs.tooltip', function () {
// do something…
})
You can run a function: before being shown, after being shown, before hiding, after hiding, and when the element is inserted into the DOM.
I have my own custom non-jQuery ajax which I use for programming web applications. I recently ran into problems with IE9 using TinyMCE, so am trying to switch to CKeditor
The editable text is being wrapped in a div, like so:
<div id='content'>
<div id='editable' contenteditable='true'>
page of inline text filled with ajax when links throughout the site are clicked
</div>
</div>
When I try to getData on the editable content using the examples in the documentation, I get an error.
I do this:
CKEDITOR.instances.editable.getData();
And get this:
Uncaught TypeError: Cannot call method 'getData' of undefined
So I figure that it doesn't know where the editor is in the dom... I've tried working through all editors to get the editor name, but that doesn't work-- no name appears to be found.
I've tried this:
for(var i in CKEDITOR.instances) {
alert(CKEDITOR.instances[i].name);
}
The alert is just blank-- so there's no name associated with it apparently.
I should also mention, that despite my best efforts, I cannot seem to get the editable text to have a menu appear above it like it does in the Massive Inline Editing Example
Thanks for any assistance you can bring.
Jason Silver
UPDATE:
I'm showing off my lack of knowledge here, but I had never come across "contenteditable='true'" before, so thought that because I was able to type inline, therefore the editor was instantiated somehow... but now I'm wondering if the editor is even being applied to my div.
UPDATE 2:
When the page is loaded and the script is initially called, the div does not exist. The editable div is sent into the DOM using AJAX. #Zee left a comment below that made me wonder if there is some other command that should be called in order to apply the editor to that div, so I created a button in the page with the following onclick as a way to test this approach: (adapted from the ajax example)
var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );
That gives the following error in Chrome:
> Uncaught TypeError: Cannot call method 'equals' of undefined
> + CKEDITOR.tools.extend.getEditor ckeditor.js:101
> b ckeditor.js:252
> CKEDITOR.appendTo ckeditor.js:257
> onclick www.pediatricjunction.com:410
Am I headed in the right direction? Is there another way to programmatically tell CKEditor to apply the editor to a div?
UPDATE 3:
Thanks to #Reinmar I had something new to try. The most obvious way for me to test to see if this was the solution was to put a button above the content editable div that called CKEDITOR.inlineAll() and inline('editable') respectively:
<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>
This returned the same type of error in Chrome for all three buttons, namely:
Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
CKEDITOR.inline ckeditor.js:249
CKEDITOR.inlineAll ckeditor.js:250
onclick
UPDATE 4:
Upon further fiddling, I've tracked down the problem being related to json2007.js, which is a script I use which works with Real Simple History (RSH.js). These scripts have the purpose of tracking ajax history, so as I move forward and back through the browser, the AJAX page views is not lost.
Here's the fiddle page: http://jsfiddle.net/jasonsilver/3CqPv/2/
When you want to initialize inline editor there are two ways:
If element which is editable (has contenteditable attribute) exists when page is loaded CKEditor will automatically initialize an instance for it. Its name will be taken from that element's id or it will be editor<number>. You can find editors initialized automatically on this sample.
If this element is created dynamically, then you need to initialize editor on your own.
E.g. after appending <div id="editor" contenteditable="true">X</div> to the document you should call:
CKEDITOR.inline( 'editor' )
or
CKEDITOR.inlineAll()
See docs and docs.
You can find editor initialized this way on this sample.
The appendTo method has different use. You can initialize themed (not inline) editor inside specified element. This method also accepts data of editor (as 3rd arg), when all other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) take data from the element they are replacing/using.
Update
I checked that libraries you use together with CKEditor are poorly written and cause errors you mentioned. Remove json2007.js and rsh.js and CKEditor works fine.
OK, so I have tracked down the problem.
The library I was using for tracking Ajax history and remembering commands for the back button, called Real Simple History, was using a script called json2007 which was intrusive and extended native prototypes to the point where things broke.
RSH.js is kind of old, and I wasn't using it to it's full potential anyway, so my final solution was to rewrite the essential code I needed for that, namely, a listener that watched for anchor (hash) changes in the URL, then parsed those changes and resubmitted the ajax command.
var current_hash = window.location.hash;
function check_hash() {
if ( window.location.hash != current_hash ) {
current_hash = window.location.hash;
refreshAjax();
}
}
hashCheck = setInterval( "check_hash()", 50 );
'refreshAjax()' was an existing function anyway, so this is actually a more elegant solution than I was using with Real Simple History.
After stripping out the json2007.js script, everything else just worked, and CKEditor is beautiful.
Thanks so much for your help, #Reinmar... I appreciate your patience and effort.
I am trying to script a textarea preview (like stackoverflow) that shows in a div automatically. I have created a script, but it does not seem to be working. If anybody could help me out with the script in HTML and JavaScript I'll be greatfull.
Like this in the picture:
http://i49.tinypic.com/282qpft.jpg
Script that does not seem to be working:
http://jsbin.com/ufeqoj
Your question is vague, but maybe a few pointers will help.
You'll want to update your target div every time the user types a character. This is the onkeyup handler (or onkeydown, depending on your intended UX - probably the former).
Do you want to retain any HTML your user enters in the text area? If so, you'll want to update the innerHTML property of your target div. If you want to update just the text, change the innerText property.
A quick and dirty example using jQuery:
$("textarea#my_input").bind('keyup', function() {
$("div#target").text($(this).val());
}
As requested, in vanilla JavaScript:
document.getElementById("my_input").onkeyup = function() {
document.getElementById("target").innerText = this.value;
}
If you want to show whatever is typed in the textarea in the div below it.
You can work with Jquery .keypress() function.
Sample Fiddle.
This is just a starting point.You can alter it to suit your requirements.
For further reference Jquery .keypress()
I am new to watir and ruby. I have two questions for which I am unable to get the solution. I have googled and have still not got working solution. Any assistance will be of great help.
Question 1 : How to fire Javascript event.
The html is as mentioned below.
img onclick="javascript:previousScreen(1);" alt="Back" src="/WSWeb/images/someimage.gif"/
I have tried most of the solutions likes, fireevent etc. which was on Google. Please write me a piece of code which will work for the mentioned scenario.
Question 2 : How to click or validate if the element exists for html mentioned below.
Scenario 1 : This is the html text
input onclick="history.go(-1)" type="button" value="Back"/
Scenario 2 : <center> under this-> Text - Login Id. This is all what is present. This is a cell in a table which is in a frame. Please write me a code for both the scenarios.
Well, if you have two questions, post two questions. :)
If the page is public, post a link to it, that is the best way for us to help.
Regarding javascript events, see How to find out which JavaScript events fired?
You can click the button like this:
browser.button(:value => "Back").click
For the center element, you will have to provide more HTML. I am not sure what you need to do with it.
First of all, as to selecting elements that do not have an attribute, see the answers (all three) to this SO question asked a little while back: Accessing an element with no attributes in Watir
With regard to your specific examples/question here: If you refer to the watir wiki's listing of methods supported for selecting elements you will see that an image element (img tag) can be selected by the src. So for your first thing, just do this
browser.image(:src => '/WSWeb/images/someimage.gif').click
if for some reason the click method does not work, then you could try firing the onclick event directly
browser.image(:src => "/WSWeb/images/someimage.gif").fire_event('onclick')
For the second part, you will also notice that value can be used to select 'button' elements which includes input tags of type=button. thus to see if the button is there
browser.button(:value => 'Back').exists? #(will return true or false)
For the second scenario there, Watir does not currently support selecting by most formatting tags like center, so you would need to look at what element contained that text. You say it is a table cell (td) inside a frame (which I don't know how to identify since you provide no html) and if that is the case and I am understanding it right then
browser.frame(:how => 'what').cell(:text => 'Login Id').exists?
should work (presuming the text is actually 'Login Id' and not 'Login ID')
I need to write a javascript function that can look at the WYSIWYG on the page (CKEditor) that is rendered after the page loads with the Drupal WYSIWYG module. I am having difficulty using jQuery even finding the editor.
$(textarea#textarea-id).change or .keyup do nothing.
I can do this:
console.log(CKEDITOR.instances);
That at least shows me the instance where CKEditor is attaching itself to. I can't seem to reference anything after that:
CKEDITOR.instances.myinstance-name or CKEDITOR.instances[0] both return undefined.
I've gone in circles for 2 hours now and not sure what else to try.
All I want to do is when the user is typing (keyup), count the characters input. If the input is greater than a certain length, I want to force a line break right in the text.
How can I go about implementing this? I thought it would be fairly straightforward.
Using other examples I have seen:
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
}
Resulted in no alert.
The editor is being loaded/displayed in an iframe (via CKEditor/WYSIWYG in Drupal).
There's a plugin available that provides an onChange event for CKEditor, you can find it (along with instructions) here.
It suggests using code like this:
editor.on( 'saveSnapshot', function(e) { somethingChanged(); });