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");
Related
I am using Rich Text (Trix editor) with Rails and I want to be able to convert everything that user pastes to sanitized plain text instead of having formatted elements.
Based on Trix documentation I am using this code to convert pasted elements to string.
const element = document.querySelector("trix-editor")
element.addEventListener("trix-paste", function(e) {
element.editor.getDocument().toString()
console.log(element.editor.getDocument().toString())
})
In console, it shows correct plain text, but in the editor, all the elements are still formatted.
How can I replace text in the editor to this sanitized text?
try this: https://github.com/basecamp/trix/issues/148
document.addEventListener('trix-before-paste', function (e) {
if (e.paste.hasOwnProperty('html')){
let div = document.createElement("div");
div.innerHTML = e.paste.html;
e.paste.html = div.textContent;
}
});
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.
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;