Develop Reference

Textarea Preview Div

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()

CLEditor, pasting content as text functionality in main window

I am using CLEditor, http://premiumsoftware.net/cleditor/, for my text editor. There is a function for 'paste as text' that when the button is clicked a pop up window appears with a textarea to paste your content in and the styles are stripped out.
What I would like to do is take this same functionality, but anytime someone paste into the primary textarea this action is performed automatically. How would I trigger this?
I have created a JS Fiddle, http://jsfiddle.net/helpinspireme/naubS/, but was unable to paste all the JS in there so to link to the main JS file for CLEditor visit their site: http://premiumsoftware.net/cleditor/
Thank you for your help.

I am aware that I am not answering your actual question, but in case your real problem is the garbage generated by a user who tries pasting text from Microsoft Office (Word for example) I would recommend to consider an alternative solution.
The CLEditor itself can switch between an iFrame (rich text mode) and a textarea (source mode). The 'Paste as text' functionality makes use of a textarea which does not support rich text by ifself, so it will not allow garbage html in the first place.
However if the editor is in rich text mode, it is very difficult to prevent a user pasting from Word (he can use the regular paste button, press CTRL-V or even use the right-mouse button context menu, which are all different events and hard to intercept using javascript). So now the damage is already done; you have messy html inside your editor. So instead of trying to sanitize the garbage produced by Word I implemented the following check (javascript) upon saving the captured input:
if(clEditorValue && (clEditorValue.indexOf('<!--') !== -1 || clEditorValue.indexOf('mso-ansi-language') !== -1 ) ) {
alert('Unable to process text pasted from Word, please use "Paste as text" or modify your input');
return;
}
I hope this answer is useful for other people trying to achieve the same.

When pasting into cleditor, the editor picks up all the html from the source. I ended up editing jquery.cleditor.js and added a bind function to the $doc.click(hidePopups) function. I used setTimeouts to allow the text to populate the input and the updateTextArea function to complete.
.bind("paste", function() {
setTimeout(function() {
refreshButtons(editor);
updateTextArea(editor, true);
//remove any and all html from the paste action
setTimeout(function() {
//clean up the html with removeHtml function
$(editor.doc.body).html(removeHtml($(editor.doc.body).html()));
//change the input value with new clean string
$("#" + editor.$area[0].id).val($(editor.doc.body).html());
}, 100);
}, 100);
})
I use the removeHtml function below to remove all the HTML from the pasted content.
//remove html altogether
function removeHtml(str) {
var regex = /(<([^>]+)>)/ig;
var result = str.replace(regex, "");
return result;
}
This solution is now in production.

Stripping styles from TinyMCE copy+paste?

is there a way to strip specific tags from coming into tiny MCE through a copy+paste from an external source (e.g. Word)? I'd like to prevent font-family and image tags from being copy+pasted over, but have no problem with font-size etc.
Thank you!

You can't really stop someone from pasting something, so I believe your best bet would be to filter out the unwanted tags by calling a function on form submit, or onchange of the tiny MCE textarea. Then you could use some regular expression replacement to get rid of the unwanted tags.
EDIT: Actually there is a simple way. check the TinyMCE documentation.

Here is the link to a similar SO question with a detailed description of howto strip out unwanted tags: TinyMCE Paste As Plain Text

I don't know how useful this will be, but you might want to take a look at this jQuery plugin which allows you to filter tags and attributed from the text your are pasting.
FilteredPaste.js - A jQuery Plugin To Filter & Clean Pasted Input

Although "You can't really stop someone from pasting something" indeed, you can transform what your web app inserts into your TinyMCE textbox (or any other input).
Listen to the browser's native paste event.
Parse the clipboard's text/html string with DOMParser.
Make changes in the generated DOM tree.
Set the textbox content to the stripped content.
Prevent the paste default action.
Check this out:
editor.on ('paste', event => {
// Get clipboard's original HTML string
const clipboard = event.clipboardData
const originalHtml = clipboard.getData ('text/html')
// Parse HTML string into a DOMElement
const parser = new DOMParser
const doc = parser.parseFromString (originalHtml, 'text/html')
// Modify DOM tree
const elems = doc.body.querySelectorAll ('*')
elems.forEach (elem => {
elem.style.fontFamily = ''
// Do other modifications here...
})
// Set textbox content to modified HTML
editor.setContent (doc.body.innerHTML)
// Prevent pasting original content
event.preventDefault ()
})

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.

JavaScript: Quickly insert text into long textarea

I am playing around with creating an HTML-textarea based plain text editor to edit my scripts (using e.g. Mozilla Prism + a localhost install/ webserver). It works fine so far, but when I want to insert something at the cursor position, it gets slow in Firefox when there is a lot of text in the textarea (Chrome works fine). E.g. with 133k filled in the textarea it takes around 1 sec to perform inserting 4 spaces.
I already have and use elm.selectionStart and elm.selectionEnd. Based on these I then copy the text, manipulate it, and set the value back into the textarea -- perhaps that is what's causing the bottleneck (I'm using the similar approach as answered on this site before). Ideally, I would probably like to have something like elm.selectedText = 'foobar' but can't find this...
It doesn't necessarily need to be crossbrowser...
Can someone help?

According to this article on codemirror, using designMode is faster than using a textarea, because you can edit parts of the content instead of editing the whole text in one go.

There's an API that replaces the selected text: textarea.setRangeText('text').
Here's a demo:
const textarea = document.querySelector('textarea');
textarea.addEventListener('click', () => {
textarea.setRangeText('WOW');
});
<textarea rows="10" cols="40">Click anywhere or select any text in here. It will be replaced by WOW</textarea>
There's also document.execCommand('insertText') with undo support but it's not cross-browser. Try insert-text-textarea for a cross-browser solution.