Using information on the internet, I got this far:
http://codepen.io/anon/pen/EeoFw
$('textarea').bind('paste', function () {
var element = this;
setTimeout(function () {
var text = $(element).val();
console.log("Paste")
}, 100);
});
It seems to work just fine, but I was wondering what event I can trigger to basically put a "clean" version of the pasted text into the text area instead of the copied contents. This includes if text was pasted from HTML, Word or other sources. Is there a way to strip out tags and such without too much hassle? I'm guessing I'm looking for some kind of regex solution but I haven't been able to find one.
Put the styled content into a hidden div, and retrieve its innerText. If your styled content is in text:
a=document.createElement('div');
a.innerHTML=text;
b=a.innerText;
Related
I am using summernote for wysiwyg editor. I am trying to append text to the selected element.
I have tried to append the text to the .note-editable that is created by the summernote script with no luck
<script>
$('#selector').on('change', function () {
let currentTemplate = 'This will come from db';
$('.note-editable').html(currentTemplate);
$('#email_body').summernote();
});
</script>
On change, the wysiwyg editor should be filled with the text from db. This will update every time a different selection is made.
Switch your code like this:
$('#selector').on('change', function () { let currentTemplate =
'This will come from db';
$('#email_body').summernote();
$('.note- editable').html(currentTemplate);});
what you are trying is wrong. you need to get the content using the following code.
change this
$('#email_body').summernote();
to
$('#email_body').summernote('code');
You need to get the html code for summernote
code - get the HTML source code underlying the text in the editor:
$('#email_body').summernote('code');
Hi All,
I'm trying put some features to textarea like copy, cut and paste buttons but even I tried many times I couldn't get only part of text inside of textarea. it comes all content.
My Code below:
function copy() {
var VAL = $("#selection").select();
var DTA = $(this).text();
document.execCommand("copy");
document.execCommand("delete");
}
My Work below:
https://jsfiddle.net/dcn7pgkn/
How it would be possible that one user may copy, paste and cut operations inside of textarea?
Thanks
First You have to add brackets to your function in HTML code
<button onclick="copy()">Copy selected text</button>
Second You have to configure your jsfiddle right, you have to specify that you are using JQuery and Load Type should be No wrap - in <head>
Your code is currently copying textarea text and clearing the textarea, for copying I don't see that this line is needed:
var DTA = $(this).text();
copying shouldn't clear textarea, this line appropriate for cut action.
I have text in contenteditable div and user can copy some its parts and paste inside this div. But there are styles coping with text, so i need to take copied part and take just text from it, so i'm making
<div id="text-container" contenteditable ng-paste="textPaste($event)"></div>
and js:
$scope.textPaste= function (e) {
var pasted_text = e.originalEvent.clipboardData.getData('text/plain');
e.originalEvent.clipboardData.setData('text/plain', pasted_text);
};
So I really get the text I need to the variable pasted_text , but it's not pasted instead of origin text. Can anybody help me?
Possible solution: create detached DOM element, paste formatted text into it and then return its textContent property:
var phantomEl = document.createElement('div');
phantomEl.innerHTML = pasted_text;
var cleanText = phantomEl.textContent;
After this, you will have plain text in the cleanText variable.
My first SO question! Here's what I am trying to do:
I'm rewriting a tool that generates some code a user can paste directly into Craigslist and other classified ad posting websites. I have created a list of websites (they populate from a database with PHP) the user can choose from with a radio button, and I want their choice to populate as bare text (not a link) between some <p></p> elements in a textarea. I'm using jQuery for this.
Textarea before the user chooses:
<p id="thing"></p>
Textarea after the user chooses:
<p id="thing">www.somewebsite.com</p>
HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<textarea>
Some stuff already in here
Here is the website you chose:
<p id="thing"></p>
More stuff already here.
</textarea>
JS
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val();
alert(website);
$("#thing2").html(website);
});
});
JS Fiddle (With comments)
If you see the JS Fiddle, you can see that I put another p element on the page outside the textarea, and it updates just fine, but the one inside the textarea does not. I have read many other like questions on SO and I'm starting to think that I can't change an element that's between textarea tags, I can only change the entire textarea itself. Please, lead me to enlightenment!
You actually can fairly easily manipulate the text contents of the textarea like it is part of the DOM, by transforming its contents into a jQuery object.
Here is a jsFiddle demonstrating this solution: http://jsfiddle.net/YxtH4/2/
The relevant code, inside the input change event:
// Your normal code
var website = $(this).val();
$("#thing2").html(website);
// This turns the textarea's val into a jQuery object ...
// And inserts it into an empty div that is created
var textareaHtml = $('<div>' + $("#textarea").val() + '</div>');
// Here you can do your normal selectors
textareaHtml.find("#thing").html(website);
// And this sets the textarea's content to the empty div's content
$("#textarea").val(textareaHtml.html());
The empty div wrapping your HTML is so that you can easily retrieve it as a string later using jQuery's .html() method, and so the parse does not fail if additional text is entered around the p element inside the textarea.
The real magic is $($("#textarea").val()), which takes your textarea's text and parses it into an HTML node contained in a jQuery object.
It can't do it the way that you are thinking (i.e., manipulate it as if it were a DOM element), but it is still accessible as the value of the textarea, so you can retrieve it like that, use basic string manipulation to alter it, and then set the updated string as the new value of the textarea again.
Something like this . . . first give the <textarea> an id value:
<textarea id="taTarget">
Some stuff already in here
Here is the website you chose:
<p id="thing"></p>
More stuff already here.
</textarea>
Then alter your script like this:
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val();
var currentTAVal = $("#taTarget").val();
$("#taTarget").val(currentTAVal.replace(/(<p id="thing">)([^<]*)(<\/p>)/, "$1" + website + "$3"));
});
});
Unless you need the <p> element in there, you might consider using a more simple placeholder, since it won't actually act as an HTML element within the textarea. :)
EDIT : Fixed a typo in the .replace() regex.
I know that this answer is a little bit late, but here it goes =)
You can do exactly the way you want to do. But for that, you need to implement a small trick.
by having this HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com
<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<p id="thing2"></p>
<textarea id="textarea">
<p id="thing"></p>
</textarea>
you can edit textarea content, as a DOM by implementing something like the function changeInnerText
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val(); // Gets value of input
changeInnerText(website);
//$("#thing").html(website); // Changes
//$("#thing2").html(website); // Does not change
});
var changeInnerText = function(text) {
var v = $("#textarea").val();
var span = $("<span>");
span.html(v);
var obj = span.find("#thing")[0];
$(obj).html(text);
console.log(obj);
console.log(span.html());
$("#textarea").val(span.html());
}
});
As you can see, I just get the information from the textarea, I create a temporary variable span to place textarea's content. and then manipulate it as DOM.
Instead of attempting to insert the text into the <p> element, insert the text into <textarea> element and include the <p> tag. Something like this should do the trick:
Change:
$("#thing").html(website);
to:
$("textarea").html('<p id="thing">'+website+'</p>');
And here is a fiddle: http://jsfiddle.net/nR94s/
I'm copying some text to the clipboard using JS: ZeroClipboard. This text which I'm copying is inside a <div> tag, and contains HTML formatting. It's working, but when I'm copying the text, the HTML tags get copied as they are! What I want is something on the client side that gives me formatted text, and I'm currently getting unformatted text. Please help!
Code:
var clip = new ZeroClipboard.Client();
clip.addEventListener('mousedown', function () {
clip.setText(document.getElementById('oSource').innerText);
});
clip.addEventListener('complete', function (client, text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('Button1');
clip.glue('Button2');
I know it's similar to this question, but here he's used createTextRange,not ZeroClipBoard
I had to use the flash file Zeroclipboard10.swf for it to copy rich text. It worked when I added this line.
ZeroClipboard.setMoviePath("ZeroClipboard10.swf");