TinyMCE

In my opinion, this is one of the great WYSIWYG editors out there for your web pages. I say that, not currently using it, but have prior.

http://www.tinymce.com/

Here’s an example of how you could potentially incorporate it into your work. See note at the bottom regarding the encoding.

1. Include this in your code

<script src="../Scripts/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>

2. Include a textarea on your page

<textarea id="textarea_text" rows="20" cols="20" runat="server" class="tinymce" />

3. In your jquery setup area, maybe something like this

    tinyMCE.init({
        mode: "specific_textareas",
        editor_selector: "tinymce",
        encoding: "xml",
        height: "600",
        width: "100%",
        theme: "advanced",
        plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
        theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,forecolor,backcolor",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,|,insertdate,inserttime",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,advhr",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,blockquote,pagebreak,|,print,|,ltr,rtl,|,fullscreen,preview",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        setup: function (ed) {
            ed.onSaveContent.add(function (i, o) {
                o.content = o.content.replace(/&#39/g, "&apos");
            });
        }
    });

4. And finally, notice the

encoding: xml

initialization code in the constructor. Take care of the encoding piece should you wish. I’d recommend this vs. disabling any kind of validation to help protect yourself a little bit more from XSS attacks or things of that nature. If you do, you need to decode it to display it properly.

pseudo code:

textarea_text.Value = HttpUtility.HtmlDecode(theEncodedTextFromDBOrWherever)
Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: