Retain format jquery paste - javascript

I am having trouble retain the format of the text when pasting into a text area housed by TinyMCE. I have seen that a similar question has been asked, but has not been answered so thought I'd try my luck.
I have tried various variations of the TMCE configuration, but no dice and I'm not sure if I've missed something.
TinyMCE is working, all but when I use my drop downs to paste content into the text area. The paste into the text area is done through code behind VB.NET and the files being accessed are txt files which have spaces and line breaks; this format is kept correct without TinyMCE's presence, so I am not sure what to do regarding TMCE, and whether anyone has any solutions for this.
If any more code is required please say and I'll amend but this issue appears to be with TMCE only.
Thank you.
<script src="../Scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
tinymce.init({
menubar: false,
paste_retain_style_properties: true,
paste_merge_formats: true,
selector: "textarea"
Update
I am getting a .txt file via a drop down box that pastes into a text file using code behind, see below example, ideally I want to achieve this programmatically without having to edit the source files as that'll be a real pain.
VB.NET
Dim ddl2 As DropDownList = CType(sender, DropDownList)
Dim ctl2 As TextBox = DirectCast(ddl2.NamingContainer.FindControl("TextBox2"), TextBox)
If ddl2.SelectedValue = 1 Then
ctl2.Text = My.Computer.FileSystem.ReadAllText("C:\Users\Dave\Documents\Templates\message.txt")

I am not sure exactly what you are doing but if you take txt files and want to keep their formatting in an HTML editor, you will, most likely, need to replace the new lines (\n and/or \r) with the HTML <br /> tag.

Related

Removing automatically generated links from SharePoint 2010

I am trying to prevent a page in SharePoint (specifically a list view page) from automatically generating links from UNC file paths that are entered in a field.
This is entered into the field...
\\server\share\folder name\sub-folder name
This is the automatically generated resultant value of the field on the display page...
(the actual value on the list item is still correct)
\\server\share\folder name\sub-folder name
I have found some similar questions regarding removing mailto links that suggest using jQuery to accomplish this. This is what I came up with thus far...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("a[href^=file:]").each(function(){
var sFileShare = $(this).text();
$(this).replaceWith(sFileShare);
});
});
</script>
I inserted this into the target page by adding a (hidden) CEWP and then putting the above code in as embedded code. Thus far I see no result.
Is this a code issue? Am I implementing it wrong? Should I have stayed asleep this morning? Taking all bets.
My bet is that I need to format the $("a[href^=file:]") bit more correctly but I'm not sure.

Ace Editor with TinyMCE textarea

I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.
I created this fiddle to show what problem I am having.
In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.
I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.
I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:
Fiddle forked
Code:
var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
// copy ace to tinyMCE
tinymce.get('test').setContent(editor.getSession().getValue());
});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");
tinymce.init({
selector: ".test",
relative_urls: false,
apply_source_formatting : true,
setup : function(ed) {
ed.on('change', function(e) {
// copy tinyMCE to textarea
textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));
// copy tinyMCE to ace
editor.getSession().setValue(
tinymce.activeEditor.getContent({format : 'raw'})
);
});
}
});
You should be setting ACE theme and mode this way:
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");

check with javascript if textbox is empty while using ajaxcontroltoolkit TextBoxWatermark

I have an asp.net TextBox and I'm using the TextBoxWatermark of AjaxControlToolkit to have it display some hing text while the box is empty.
Problem is, onclient click of a certain button, I want to determine if the textbox is empty. The javascript code of
document.getElementById(fieldName).value == ""
Is not working, since the WaterMark extender with it's hint text making the code to think the field is not empty.
Any solution to this?
You can use the wrapper to access whether the watermark is being displayed or not with get_IsWaterMarked.
Sys.Extended.UI.TextBoxWrapper.get_Wrapper(document.getElementById(fieldName)).get_IsWatermarked()
I tried this with version 4.1.7.1213 of AjaxControlToolKit.
Got the code from looking at the source code of the TextBoxWatermark control.
Refer to this: http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Client/MicrosoftAjax.Extended/TextboxWatermark/TextboxWatermark.pre.js

How does stackoverflow format textarea when click edit button?

This is not a duplicate question, i know how to create a rich editor, but i meet problems
I want to make a rich text box like stackoverflow does.
I import the wmd plugin just like SO.
When i save a topic to mysql, it saves the processed text like this:
< p>hello world< /p>
< pre >< code >class Text {} < /code >< /pre >
This is normal i think because the html page can render this correctly.
But When i try to edit this topic, it directly shows the code in my textarea:
What i need is this(Just like the first time i entered):
My textarea code is very simple like this:
<!-- text area start -->
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="description" onblur="checkForm()">${topic?.description}</textarea>
<div id="wmd-preview"></div>
<!-- text area end -->
Anyone can help ? Thanks.
I find the answer myself.
What i need to do is simply add a new hidden field to store the original text before wmd process it.
And then i save both original and processed text into my database.
When i need to edit it, just use original text.
When i need to render it, use the processed text.

Transfer possibly unsafe user input from hidden input field to DOM

The following is a simplified example of a page a user has created at a site (they created it by filling out a form and then they get a URL for the page; the below is the HTML for the page they created).
In the example, I'm taking the value of a hidden input field and then putting it into the DOM as is. That results in an alert, simulating an XSS attack.
What's the best way to prevent things like this? The value of #sourceinput was previously input by the same or a different user who's viewing the page below, and the user's input wasn't filtered to remove tags. (The actual case involves the jquery.tooltip.js plugin and it's bodyHandler callback; on mouseover a bodyHandler callback would get the hidden input and display it to the user.)
One way to deal with this would be to strip tags on input; I control what goes in the hidden textfield so that would seem to solve it.
Another way would be to strip tags in Javascript, but some of these don't seem to be 100% effective:
Strip HTML from Text JavaScript
Is there some sort of best practice that I'm missing, or are those two the best ways?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
<script>
$(document).ready(function() {
var badHTML = $('#sourceinput').val();
$('#destinationdiv').html( badHTML );
//$('#destinationdiv').text( badHTML );
});
</script>
</head>
<body>
<input type="hidden" id="sourceinput" value="<script>alert('hi');</script>" />
<div id="destinationdiv" style="width:10px;height:10px;background-color:red;"></div>
</body>
</html>
UPDATE: The solution I'm going with for now has three parts:
When the page the user has created is saved, I run PHP's strip_tags() on their input. These are just short text strings like titles and blurbs, so few users will expect they can enter HTML. That might not be appropriate for other situations.
When the page the user created is displayed, instead of putting what the user had entered in an input value attribute, I put their input inside a div.
I take the value out of that div using .text() (not .html() ). I then run that through the underscore function (see below).
Testing this out - including simulating skipping the first step - seems to work. At least I'm hoping there isn't something I missed.
Here's the escape function used by Underscore.js, if you don't want to use the entire Underscore library of functions:
var escape = function(string) {
return (''+string).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g,'/');
};
Used like
var safe_html = escape("<b>Potentially unsafe text</b>"); // "<b>hello</b>"
$("#destination").html(safe_html);
It's written well and is known to work, so I'd advise against rolling your own.
I would say what you commented out (using text() from jquery is the better option). That will make sure the text stays text which is what you want. Filtering or stripping may have unwanted side effects like removing a mathematical expression in the input (" x is < 5").
Do Nothing.
You are trying to protect the user from himself. There is no way the user A can harm user B. And for all you care, user A might as well type javascript:alert('hi') on the address bar and xss himself. And no matter what javascript escape function you create, a savvy user can always bypass it. All in all, its a pointless pursuit.
Now, if you start saving what the user entered on the server side, then you should definitely filter things. Don't build anything on your own. Depending on your server side language, there are several options. OWASP's AntiSammy is one such solution.
If you do choose to save user entered html on the server side, make sure to run it by antisammy or a similar library before saving it to the database. On the way out, you should simply dump the HTML without escaping, because you know whatever is in the database is sanitized.

Categories