I have a CKeditor that loads text which includes html text as well. The html text has a css class assigned to certain span text areas. When the user does a mouse-over or mouse-click on text surrounded by a span with a particular class in the CKEditor textbox, I want to fire the mouse-over event or click event.
Here is the text that I programmatically load into the CKEditor
var editorHtml = '<span class="noedit">no edit text</span> edit this';
and I am trying to catch the events via this code.
$(document).ready(function () {
$('.noedit').mouseover(function () {
alert('hello');
});
});
It doesn't seem to be working. What am I doing wrong? Is this even possible to do?
Try to use event delegation here since your span is probably added dynamically by CKEditor here:
$(document).ready(function () {
$(document).on('mouseover','.noedit', function() {
alert('hello');
});
});
What is the this question really about? Your question reads: "get css class of html text in CKEditor". But I guess you want the class="noedit" element not editable. Maybe block it with a popup saying: "No editing allowed?"
The best way to add non editiable content is with widgets. This post explains what widgets are. If you follow the tutorial, you will be able to create a template for a simple box with two editable fields. You want NOT editable? It's in tutorial part one:
Please note that only elements defined in CKEDITOR.dtd.$editable can
be converted into editable widget elements.
By not specifying editable your widget will not be editable.
I do not know exactly what you try to achieve. But it seems that <span class="noedit">no edit text</span> should be a widget. You can still insert your widget with var editorHtml but you could also use a button.
I hope my answer is useful! Enjoy.
Related
By RTE tags I mean <b>, <i>, <u>, or <s> tags. I've been working on a RTE, and using jquery I can get the entire area to bold, but I want to be able to bold only a specific portion (think google docs, word, or any other text editor).
The mozilla site only had deprecated information, and inspecting elements on other sites (including this one) were no help to me.
I am trying to edit a content-editable <div> currently, although I'm open to switching to a text area if that works better.
//my jquery for bolding the entire thing
var bolded = false;
$("#bold").on('click', function(){
//access css of editor div, change status using a ternary
$("#editor").css("font-weight", bolded ? this.value : 'bold');
bolded = !bolded;
//log for debugging
console.log('clicked bold: ' + bolded);
});
my HTML5 for the editor. Sectioned off for formatting purposes.
<section>
<div id="editor" contenteditable="TRUE"></div>
</section>
My buttons are id'd as "bold", "itallic", "strike", and "underl", but I really just want to get one of them working so I can work from there.
EDIT
I realized that this question isn't as straightforward as I'd hoped. I have a <div>, and I would like to have multiple different formats inside of this <div>. The way I would do it logially is by inserting a <b> tag on the click of a button / keyboard command and then continuing to type from there, but I can't find any resources for it. Hope this clears that up.
EDIT 2
So as far as I can tell, the document.execCommand() still works but is predicted to be replaced by Input Events Level 2. I can't find any readable documentation for implementing this. Does anybody know how to do this?
Answer for current methodology (document.execCommand('command')):
Attaching a simple onclick() to the buttons works, where that onclick is a function that runs the aforementioned command with no particular focus:
function format(command, value){
//In use, "value" is left blank in order to do the current selection / no selection
document.execCommand(command, false, value);
}
<button onclick="format('bold')"><strong>B</strong></button>
<button onclick="format('italic')"><em>I</em></button>
Please note that this functionality WILL be deprecated, but no replacement has come up yet. When I know more, I will come back and edit this answer.
Main Target :
To create a website that will have a live preview of an HTML/CSS code.
More specifically :
The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.
Image of what I am trying to do :
So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.
Now, I have replaced the divs with textarea tags but the EDIT function does not work.
Main Question :
How do I edit parts of a textarea text? Below, I made it work for a div tag but not a textarea. How can I make the following work for a textarea?
$('input#thebox1').keypress(function(e) {
console.log($(this).val());
if(e.which == 13 && $(this).val().length > 0) {
var c = $(this).val();
$('.popup1').removeClass().addClass(c).text(c);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Replace Title Background Color: </div><input type="text" id='thebox1'>
<div id="copyTarget1" class="innerbox css">
<blockquote>
<pre>
<code>
.title
{
background: #<b class="popup1" style="color:#FF0000;">value </b>;
vertical-align: middle;
}
</code>
</pre>
</blockquote>
</div>
<br><br><br><br><br><br>
I thought about taking another approach to make your life easier using Ace (Cloud9 Editor). It is an awesome solution to get code editors for different languages. All built in JavaScript. It is quite easy to integrate. I just downloaded it to create the case you are trying to build.
You can find the example I have just made here: https://dubaloop.io/dev/html_css_js_editor/
Basically, you load the library for ace:
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Then you create a "pre" container for your HTML, CSS, JavaScript editor:
<pre class="editor" id="editor_js">
function foo(items) {
alert('works');
}</pre>
You will be able to convert them into code editor by using the function:
var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");
It will generate a nice code editor that can through error, warnings, etc. You also have different themes. It is very user friendly as you could see. In my example I just get the content of each code container and send it to an blank iframe that. In order to retrieve the content you can use:
editor_js.getValue();
Check the source code for example I sent you above. I also created .zip with the example here: https://dubaloop.io/dev/html_css_js_editor/example.zip
Have a look to see if this would work for you.
GitHub repo for ACE: https://github.com/ajaxorg/ace-builds
I hope it helps.
UPDATE:
I decided to update the response to replay to your last comment. A few things about it:
First, I updated the code in the link I sent you previously: https://dubaloop.io/dev/html_css_js_editor/
The idea was to check the guide to see how you can manipulate the input and adjust it to what you need. They have great manipulation options. This is the guide: https://ace.c9.io/#nav=howto&api=editor
I just made a short version of what you are trying to do: I am replacing the content for the <h1> in HTML editor, by entering it in a textfield input; similar to what you are trying to achieve. I set the html code editor as a readonly so you cant edit on it. Have a look and let me know.
Second, I created another example using your code. You can check it here: https://dubaloop.io/dev/html_css_js_editor/example.html
I noticed that the first problem you were having was related to how you were triggering the preview update ($('.innerbox').on("keyup"...)). There was not keyup event there. For now I set it on any input when you hit enter. The other big problem, and probably the main one you had was how you were accessing the iframes through jQuery. You need to use $('selector').contents().find('selector2'). Finally another problem was the you were retrieving the data getting the attribute value from your code wrapper. What you need to get is the actual content as flat text in order to avoid other html content. In order to do that you need to use .text() (Please check the updated GetHtml() and GetCss() functions).
I hope you can make it work from here. Still, I like option 1 :P
I hope it helps.
I currently working on a feature that is live feature. How it works is that when user types in a wysiwyg editor, all that text will be read as the user is typing and place that text in a div element. The problem is that when I change the styles such make it bold of text then that text is still copied as a normal text i.e. without styles. How can I read the text from that editor including its styles and place it exactly as it is appeared in texteditor?
I am currently using plugin for wysisyg editor.
Below is my code which reads text and place it in div but the text is normal.
$('body').on('keyup', '.jqte_editor', function () {
$('.element').text($(this).html());
});
Update
I already tried .html() but this put html tags around that particular text. I want the text to be literally visible as bold if it is made bold in editor. I don't want to see those tags.
Just as the other answers have posted, you need to use the .html(); method. To show you, I have made a working example: http://jsfiddle.net/mfL5e/
$('.jqte_editor').jqte();
$('body').on('keyup', '.jqte_editor', function () {
$('.element').html($(this).html());
});
I hope this helps!
.text() sets text contents, use .html(), as:
$('body').on('keyup', '.jqte_editor', function () {
$('.element').html($(this).html());
});
I think you need to get the literal html out of it instead of text:
for example if you are using jquery something like this:
$('.example').html();
use .html instead of .text
Below is the code with modification
$('body').on('keyup', '.jqte_editor', function () {
$('.element').html($(this).html());
});
You are reading the text, not the html of the element
$('.element').text($(this).html());
needs to be
$('.element').html($(this).html());
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'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.