Develop Reference

How can I make URLs clickable within a span? [duplicate]

This question already has answers here:
Using .replace to replace text with HTML?
(3 answers)
Set content of HTML <span> with Javascript
(4 answers)
Angular HTML binding
(24 answers)
Closed 3 months ago.
I have my own, silly Twitter alternative that I use for fun. When a user enters a URL in their comment, I want to make it clickable. I've tried this, and it correctly creates the anchor tag, but the link still isn't clickable.
This finds the URL and creates an anchor tag around it:
makeLinkWithinCommentClickable(comment: any) {
const hyperlink = (textContent) =>
textContent.replace(
/(https?:\/\/[^\s]+)/g,
(href) => `<a ng-href="${href}">${href}</a>`
);
comment.commentText = hyperlink(comment.commentText);
}
However, you can see it's just an anchor tag in plain text. How can I make it clickable?
I also tried wrapping the anchor in [code]...[/code], but that produced the same results.
This is Angular, and the HTML looks like this:
span{{comment.commentText}}/span
(The span has correct tags. Can't get it to display here.)

Copy text with same class to clipboard [duplicate]

This question already has answers here:
How do I copy to the clipboard in JavaScript?
(27 answers)
Closed 8 years ago.
If I have e.g. 20 lines of text, e.g.
<p class="textlist">Cheese</p>
<p class="textlist">Water</p>
<p class="textlist">Earth</p>
<p class="textlist">Helicopter</p>
<p class="textlist">Rabbit</p>
I wondered if anyone might be able to advise please, how I might be able to have a button on the page which a user can click, which copies the text values to the clipboard, so that all the user gets in their clipboard are the p innerHTML values in a list split by line breaks, e.g.
Cheese
Water
Earth
Helicopter
Rabbit
The example above is just a simple example, rather than the finished product I'l be working with, just something to use as an example to demonstrate the point.
I was thinking it might be possible using Javascript / jQuery / accessing the DOM, but I don't know how one would do it.

Use .map in Jquery to collect all P tag data and append the text to some other element
var data = $("p").map(function () {
return "<div>" + $(this).text() + "</div>";
}).get();
$(".getDiv").append(data);
DEMO

Set the caret position always to end in contenteditable div [duplicate]

This question already has answers here:
How to move cursor to end of contenteditable entity
(8 answers)
contenteditable, set caret at the end of the text (cross-browser)
(4 answers)
Closed 9 years ago.
In my project, I am trying to set the caret position always to the end of the text. I know this is default behaviour but when we add some text dynamically, then the caret position changes to starting point in Chrome and firefox (IE is fine, amazing).
Anyway to make it to work properly in chrome and firefox?
Here is the fiddle
<div id="result" contenteditable="true"></div>
<button class="click">click to add text</butto>
var result = $('#result');
$('.click').click(function () {
var preHtml = result.html();
result.html(preHtml + "hello");
result.focus();
});
I tried adding setStart and setEnd as mentioned in this link but no use.

I got the solution here thanks to Tim down :). The problem was that I was calling
placeCaretAtEnd($('#result'));
Instead of
placeCaretAtEnd(($('#result').get(0));
as mentioned by jwarzech in the comments.
Working Fiddle

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