WYSIWYG HTML editors, characters left and MySQL storage Optimization - javascript

I want to use a WYSIWYG editor on my <textarea>. In my MySQL I limit the varchar field to 500 characters. I also put a limit of maxlength in the textarea tag.
The problem is that the editor generated HTML tags on user input (e.g. <p>, ) and those take up space as well. I prefer not using a very large comment field (prefer around 1000 chars).
I also show the user the amount of characters left.
The problem is that with the tags the 500 limit take up the space really fast.I prefer not to use like 5000 chars if the user just write a short 10 character comment. Is there a better way to implement this to save up space in the database, report the correct chars left and have a well marked text?
I'm currently using Trumbowyg editor. I thought about just ditching the editors and using plain textarea, but do want to be able to allow bold text and maintain line breaks.I am searching for an optimal solution.
My project is built in ASP.NET/C# + jQuery.

I would not worry about setting a 500 or 5000 VARCHAR, as the space is variable anyhow.
Premature optimization is the root of all evil and all that :)
Do a basic count of the raw text in the textarea, and maybe later see if there are comments that generate unusual amounts of HTML tags.

Related

Get the substring From the Html file without considering the tags only text

I am new to WebDevelopment. I have a html document consider it as a resume,and that is in the html format. e.g -
html
<p>Mobile: 12345678891
E-mail: abc#gmail.com</p>
<p><b>Career Objective</b></p>
<p>Employment that fully utilizes my experience in Web Site Design & Development and offers the opportunity for career advancement along with the further expansion of IT skills.
</p><p><b>Career Summary
</b></p><p><b>2.1 years</b> of experience in analysis, design and development of client/server, web based application.
Now, In this Now I want to have a substring from this html string. I want to have
my experience in Web Site this string. Now, I tried to take this string from subString method, I get the start and end offsetso, Here, What happens when I took innerText,it does not matches. So How to get the substring which I am displaying in that way only? And If I want to give the the id to the each and every word which is present in html including special char and space as well then How can do this ?
First, you can't assign an ID to anything that is not a HTML tag. So individual words or characters cannot have an ID.
Second, try with innerHTML property, that contains exact content. innerText contains only text, so indices can change.

how to prevent scripts from being run

SO kept preventing me from posting the title I wanted so finally got a title that let me post though it kind of sucks so feel free to edit/change it.
I have fields a user can fill in and in the javascript we have
'${chart.title}'
and stuff like that. Is it sufficient to just strip out the single quote character such that they cannot escape it back to javascript? or are there other ways to close out the string that started with the single quote character.
${chart.title} inserts the title a user typed in on a previous page so naturally they could type something like "Title'+callMethod()+'RestOfTitle" injecting a callMethod into my javascript.
thanks,
Dean
The best way would be to restrict the input to alphanumerical and space characters.
If you want to allow anything inside the title, you can use a escaping function.
http://xkr.us/articles/javascript/encode-compare/
Just stripping the string of single quote characters is definitely not enough. Think of new lines for one reason.
There are couple of options.
First go very restrictive way and do both so called white-list validation for input field for you title and always encode the text that you output to the page. That will filtered out all unwanted (and potentially dangerous) characters and make sure that if some of them pass filter (or somebody update the text to contains some js code after the filters were applied) the encoding procedure make all malicious js scripts not runable (it turns it into plain text).
Second you do let your users input what ever they want (which is highly unrecommended way but sometime developers asked to do it) but always encode the text that you output to the page.
You can implement white-list validation by yourself using regular expression or you can use one of the libraries.

How to paste Text from Word to plain text by preserve defined styles?

I want to let the user paste text to an editor (currently CKEditor). By pasting the text all styles and elements which are not white-listed must be removed, including images, tables etc. So 90% should be converted to plain text or be removed while some simple styles like bold, italic or underlined should be preserved.
Didn't thought that's so complicated. But all I can find within the documentation and the samples of CKEditor is about pasting complete plain text or pasting cleaned up content from Word without the ability to configure a white-list (and even if I remove all table-related plugins it is still possible to paste a table from MS WorD).
I really, really appreciate any hint.
Thanks.
You can't without writing your own parser. Another issue is MS word uses Windows-1252 character encoding and most of the web uses UTF-8 encoding, so if you paste from WORD and transmit this data via AJAX, it will be garbled.
While Dreamweaver has a pretty good "paste from word" feature, it's unlikely you'll find an online equivalent. This is a huge and complex problem that would be an application in itself. Even WORD's "save as HTML" can't even do a decent job of it.
Sadly, what most have to do, is strip it all down to ASCII (paste into Notepad), put it in the editor and mark it back up.
You can add a listener for the 'paste' event in the editor instance: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#event:paste
That way you get the HTML that it's gonna get pasted and you can perform whatever clean up you need (for example based on inserting that html into a div and then work with the DOM, or using regexps on the string).
Found a solution:
Listening to the paste event as AlfonsoML wrote.
Sending the pasted content of Word to the server.
Parsing it with the HTML Agility Pack.
Sending it back to the client.
Inserting it within the editor.

clickable symbols to insert

I have a site where users can type posts. I want to add an some simple buttons on the side of the site that insert different symbols. The symbols dont need to be crazy like the windings font but just some basic math symbols. Also, how could I add the ability to highlight and make a selection a subscript (like Microsoft word)? Thanks.
You should consider using TinyMCE or CKEditor for your textarea. They both allow users to input custom characters (Look for the Ω - Omega symbol on the toolbar).
Those options #Thomas Li suggested are pretty neat. If they are more advanced than you want, here's a post with a similar question.
If you're asking for suggestions... I like the way TinyMCE launched that little window to let you select a symbol, but if you want just a small amount of characters, you could probably just list those as a toolbutton bar above the text, like stack overflow's formatting bar above "Your Answer".

How can i limit the number of characters the user can enter into ckeditor?

I'm using the CKeditor and I need to be able to impose a maxLength restriction on it.
For instance, prevent user from entering more than 100 characters, excluding the html characters
applied by the user.
Has anyone been able to do this?
Thanks, I'd appreciate if you point me towards a resource. I found similar questions here but they were not of much help.
I doubt this is going to end up being reliable even if someone posts an approach. Consider the following:
var tags = /<[^>]*?\/?>/;
That should match most tags, but what if you get someone who does something screwy like this:
<img alt=">My Title<" />
Now your regular expression that should be ignoring tags is improperly recognizing the contents of this image's alt tag as counting towards their character limit. If some back end system requires that the text content be only 100 characters what I'd suggest doing is giving the user a single text input with a maxlength of 100, and then look for another control or library that will let them change it's look and feel via CSS.
Attempting to strip out the HTML Tags and then count the remaining characters is unlikely to do anything but give you a headache, will be error prone in the best of cases, and will malfunction entirely in the worst of cases.

Categories