#TinyMCE: IE11 Insert Content

In one of our main projects we are using a custom TinyMCE plugin to allow the users to attach files to an email that is sent from our system.   The plugin pops up a modal and asks the user for information then inserts the entered data into the editor at the cursor.   This works perfectly well in most cases, except for IE11 where it inserts the text at the beginning of the editor.

We found a Stack Overflow post (TinyMCE – Inserting content at cursor position in IE doesn’t work) that gave the basics on how to fix it.   Here is what I ended up doing.

Create the plugin with the bookmark code:

tinymce.PluginManager.add('customattachment', function (editor, url) {
  var self = this;

  // ie11 does not retain the current cursor position when the attachment popup loads.  We need to retain the current position
  // and then restore it in the "InlineAttachment" function using the self.restoreBookmark() defined in this file.
  var bookmark;

  editor.addButton('insertcustomattachment', {
    title: "Insert Attachment",
    type: 'button',
    icon: 'attachment-ico',
    onclick: function (e) {
      //save bookmark
      bookmark = tinyMCE.activeEditor.selection.getBookmark();

        content: "<iframe class=\"naked customattachment\" src=\"/attachment/upload/InlineAttachment/\" scrolling=\"no\" style=\"border:none; width:500px; min-height:250px; margin:15px;\"></iframe>",
        scrolling: 'no',
        padding: 0,
        margin: 0,
        onClosed: function () {

      // prevent bootstrap from hijacking the click (on Website | Home full-width pages)
      $('.fancybox-inner').find('iframe').on('focusin', function (evt) {
        var $ipt = $($(evt.target)[0].contentWindow.document).find('.custom-attachment-title').closest('form');
        if ($ipt.length) {

  self.restoreBookmark = function () {
    //restore bookmark
    return tinyMCE.activeEditor.selection.moveToBookmark(bookmark);

Call the code to insert the attachment after the modal is closed:

  // Used in _komodal_tinymce for customattachment
  function InsertInlineAttachment(item) {
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, item.replace(/"/g, "'"));
#TinyMCE: IE11 Insert Content

MVC Json DateTime handling

When working on a page where we are displaying dates in grids I ran into a properly displaying dates in the right format.  This is a problem with how MVC JSONResults handles dates.   We had solved this problem in the past and I wanted to write it up for future reference.   Instead of using JsonResult we need to use the Newtonsoft.Json JsonNetResult type to pass the data to the Clientside.

using Newtonsoft.Json;
public JsonNetResult GetDFLessonsCompletedData(string programId, string periodValue)
var parameters = SetProgramParameters(programId, String.Format("Problem downloading Lesson Completed for ProgramID:{0} and Period:{1}", programId, periodValue));
var period = (TimePeriod)Enum.Parse(typeof(TimePeriod), periodValue);
parameters = SetTimePeriod(period, parameters);
var data = DFLessonCompletedResource.GetDetails(parameters);
// use ISO 8601 date formats
var jsonNetResult = new JsonNetResult {Formatting = Formatting.Indented, Data = new AjaxDataResult(data)};
return jsonNetResult;
MVC Json DateTime handling


So a while back I wrote this post: #TinyMCE: Fixing Pageload Flickering

Well now I have found a problem with it.  When you load the page with the textarea hidden the plugins don’t seem to bind properly.  I had to come up with a new way to do the same thing.  Here is my solution.  Not ideal but seems to work fine so far.

Notice that the ‘display:none’ is now gone and the size is now set to a size so that the textarea is not visible on the page. Although, there is a small remnant left there. Not sure I like it but I’m not sure how to hide it.

@Html.TextAreaFor(m => m.ContentHtml, 
                       new { @class = "tinymce", maxlength = 5000, 
                       @style = "height:1px; width:1px; " })

Now once TinyMCE is properly initialized I manually set the iframe size to be the height and width I want.

  script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
  theme: "modern",
  toolbar: "bold italic ",
  paste_auto_cleanup_on_paste: true,
  init_instance_callback: function (editor) {
     $(editor.getContainer()).find("iframe").css("height", "300px");
     $(editor.getContainer()).find("iframe").css("width", "100%");

#VisualStudio Extension: Custom Title Bar

Sometimes there is a need to work in two different versions of the same project, it can get complicated to keep track of which window you are in.

I just found a new extension to add my Visual Studio that changes the title bar to show the root path of the solution you are working in.

Once installed it looks like this

The key settings to set it up for our SVN file structure is this

#VisualStudio Extension: Custom Title Bar

#TinyMCE: Style and Script Elements

We have begun using TinyMCE as the primary editor in our CMS system.  Some of the functionality is to store pages that are later rendered as html on websites.  This means that often our designers are adding custom javascript and css styles to pages.  In our most recent release we found that when we switched to TinyMCE we lost the functionality to add custom scripts and styles to the pages.  After a mad dash we found that adding the following code to the TinyMCE editor allows the user to enter <style> and <script> elements via the Source Code window.   TinyMCE does add comments around the code that is added but they do not affect the functionality.

TinyMCE Initalization Settings

//Allow html script, style, etc tags to work in the editors
extended_valid_elements: 'pre[*],script[*],style[*]', 
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : '*[*]', 

TinyMCE Example Input

<script type="text/javascript">
$(function () {

h2 {
        color: #FF0000;

TinyMCE Example Output

<script type="text/javascript">// <![CDATA[ $(function () { Console.log('test'); }); // ]]></script>

<style><!-- h2 { color: #FF0000; } --></style>

#TinyMCE: Style and Script Elements

OSS University

Open Source SocietyMy day job is as a software engineer building websites.  I’ve been building software for 15+ years and am always looking at ways to upgrade my skills.  Yesterday I came across this great site that has gathered together free resources that people can use to get themselves a Computer Science education without enrolling in college.  It’s a great resource for people who want to dip their toes in, or to refresh their skills without going back to school.  It would be a wonderful path for a teenager who wants to get started on a solid path for a CS degree.

This is a solid path for those of you who want to complete a Computer Science course on your own time, for free, with courses from the best universities in the World.

In the future, more categories and/or courses will be added to this list or a more advanced/specialized list.

Initially, we will also give preference to MOOC (Massive Open Online Course) type of courses because those courses were created with our style of learning in mind.

~ OSS University

OSS University

Embedding a Google Font

When working on websites there are occasions when the designers give you a design with some crazy fonts.  These look awesome but designers usually just reference the Google Font api website.  This is great for them but can degrade the performance of your website.  We prefer to download the fonts and run them locally.  Because I don’t do this very often I actually had to try to figure it out again.  It took a half hour to figure out so I need to write it down for next time!

When you download a webfont from Google Fonts it only gives you the .tff file.  This is useful when running on my machine but not so useful when trying to embed it into a website.

To embed it first download the .tff file from Google.

Then go to fontsquirrel and generate all the files you need.  It will create all the different types as well as an awesome page that shows examples of the font in use.  It created: .eot, .svg, .ttf, .woff, .woff2 files.

Done.  Now you have all the files you need to properly embed a Google Font in your website.

Embedding a Google Font