CODEWITHSUNDEEP
angularjstinymce
N.Kapoor
N.Kapoor

Reputation: 31

Tiny MCE Editor with Angular js not working on IE

I am relatively new to angular js and was trying to integrate angular-ui-tiny mce editor to my site,however the editor is not loading on IE-11,console says the error " Failed to load http://snet-dev.subaru1.com:7777/homenew//themes/modern/theme.js" (not sure why we have 2 forward slashes after homenew)". I have tried to create grunt tasks to copy the theme.js inside _bower_Components into dist folder,this makes the editor to load on local IE-11. Now when I promote my code to dev server,the editor does not load on the page saying "Failed to load http://snet-dev.subaru1.com:7777/homenew//themes/modern/theme.js".

Below is my code for using Tiny -MCE.

App.js

I have successfully installed the tiny-mce bower component and injected into the main module

 angular.module('dashboardSubaruNetApp', [
   'ui.tinymce',

])

Admin.html

 <textarea ui-tinymce="tinymceOptions" ng-model="data.content" ng-required="!data.url"></textarea>

GruntFile.js

// Generated on 2014-12-29 using generator-angular 0.9.8
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function(grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Configurable paths for the application
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist'
  };

  // Define the configuration for all the tasks
  grunt.initConfig({

    // Project settings
    yeoman: appConfig,

    // Watches files for changes and runs tasks based on the changed files
    watch: {
      bower: {
        files: ['bower.json'],
        tasks: ['wiredep']
      },
      js: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
        tasks: ['newer:jshint:all'],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      },
      jsTest: {
        files: ['test/spec/{,*/}*.js'],
        tasks: ['newer:jshint:test', 'karma']
      },
      styles: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
        tasks: ['newer:copy:styles', 'autoprefixer']
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    },

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      test: {
        options: {
          port: 9001,
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect.static('test'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      dist: {
        options: {
          open: true,
          base: '<%= yeoman.dist %>'
        }
      }
    },

    // Make sure code styles are up to par and there are no obvious mistakes
    jshint: {
      options: {
        jshintrc: '.jshintrc',
        reporter: require('jshint-stylish')
      },
      all: {
        src: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/{,*/}*.js'
        ]
      },
      test: {
        options: {
          jshintrc: 'test/.jshintrc'
        },
        src: ['test/spec/{,*/}*.js']
      }
    },

    // Empties folders to start fresh
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/{,*/}*',
            '!<%= yeoman.dist %>/.git*'
          ]
        }]
      },
      server: '.tmp'
    },

    // Add vendor prefixed styles
    autoprefixer: {
      options: {
        browsers: ['last 1 version']
      },
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      }
    },

    // Automatically inject Bower components into the app
    wiredep: {
      app: {
        src: ['<%= yeoman.app %>/home.html'],
        ignorePath: /\.\.\//
      }
    },

    // Renames files for browser caching purposes
    filerev: {
      dist: {
        src: [
          '<%= yeoman.dist %>/scripts/{,*/}*.js',
          '<%= yeoman.dist %>/styles/{,*/}*.css',
          '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
          '<%= yeoman.dist %>/styles/fonts/*'
        ]
      }
    },

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
      html: '<%= yeoman.app %>/home.html',
      options: {
        dest: '<%= yeoman.dist %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {}
          }
        }
      }
    },

    // Performs rewrites based on filerev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images']
      }
    },

    // The following *-min tasks will produce minified files in the dist folder
    // By default, your `index.html`'s <!-- Usemin block --> will take care of
    // minification. These next options are pre-configured if you do not wish
    // to use the Usemin blocks.
    // cssmin: {
    //   dist: {
    //     files: {
    //       '<%= yeoman.dist %>/styles/main.css': [
    //         '.tmp/styles/{,*/}*.css'
    //       ]
    //     }
    //   }
    // },
    // uglify: {
    //   dist: {
    //     files: {
    //       '<%= yeoman.dist %>/scripts/scripts.js': [
    //         '<%= yeoman.dist %>/scripts/scripts.js'
    //       ]
    //     }
    //   }
    // },
    // concat: {
    //   dist: {}
    // },

    imagemin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: '{,*/}*.{png,jpg,jpeg,gif}',
          dest: '<%= yeoman.dist %>/images'
        }]
      }
    },

    svgmin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: '{,*/}*.svg',
          dest: '<%= yeoman.dist %>/images'
        }]
      }
    },

    htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },

    // ng-annotate tries to make the code safe for minification automatically
    // by using the Angular long form for dependency injection.
    ngAnnotate: {
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/concat/scripts',
          src: ['*.js', '!oldieshim.js'],
          dest: '.tmp/concat/scripts'
        }]
      }
    },

    // Replace Google CDN references
    cdnify: {
      dist: {
        html: ['<%= yeoman.dist %>/*.html']
      }
    },

    // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'views/{,*/}*.html',
            'images/{,*/}*.*',
            'fonts/*'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: 'bower_components/bootstrap/dist',
          src: 'fonts/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome',
          src: 'fonts/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/tinymce-dist/themes/modern/',
          src: ['**'],
          dest: '<%= yeoman.dist %>/scripts/themes/modern/'
        }, {
          expand: true,
          cwd: 'bower_components/tinymce-dist/skins/',
          src: ['**'],
          dest: '<%= yeoman.dist %>/scripts/skins/'
        }, {
          expand: true,
          cwd: 'bower_components/tinymce-dist/plugins/link/',
          src: ['**'],
          dest: '<%= yeoman.dist %>/scripts/plugins/link/'
        }]
      },
      styles: {
        expand: true,
        cwd: '<%= yeoman.app %>/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
      }
    },

    // Run some tasks in parallel to speed up the build process
    concurrent: {
      server: [
        'copy:styles'
      ],
      test: [
        'copy:styles'
      ],
      dist: [
        'copy:styles'
        //'imagemin',
        //'svgmin'
      ]
    },

    // Test settings
    karma: {
      unit: {
        configFile: 'test/karma.conf.js',
        singleRun: true
      }
    }
  });


  grunt.registerTask('serve', 'Compile then start a connect web server', function(target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);
  });

  grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function(target) {
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
    grunt.task.run(['serve:' + target]);
  });

  grunt.registerTask('test', [
    'clean:server',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'karma'
  ]);

  grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    //'filerev',
    'usemin',
    'htmlmin'
  ]);

  grunt.registerTask('default', [
    //'newer:jshint',
    //'test',
    'build'
  ]);
};

Guys, can anyone,please provide some insight.

Upvotes: 2

Views: 1287

Answers (1)

phdesign
phdesign

Reputation: 2157

The issue is that TinyMCE uses the following code to work out where the script is hosted from and uses that to load plugin and theme files relative to TinyMCE.

https://github.com/tinymce/tinymce/blob/b2a50bc17ea903a344f29ef664c596aa3c85c610/js/tinymce/classes/EditorManager.js#L184

First it tries to find the script tag for tinymce, but as your bundling it with your code this check fails.

var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
    src = scripts[i].src;

    // Script types supported:
    // tinymce.js tinymce.min.js tinymce.dev.js
    // tinymce.jquery.js tinymce.jquery.min.js tinymce.jquery.dev.js
    // tinymce.full.js tinymce.full.min.js tinymce.full.dev.js
    var srcScript = src.substring(src.lastIndexOf('/'));
    if (/tinymce(\.full|\.jquery|)(\.min|\.dev|)\.js/.test(src)) {
        if (srcScript.indexOf('.min') != -1) {
            suffix = '.min';
        }

        baseURL = src.substring(0, src.lastIndexOf('/'));
        break;
    }
}

Next it tries to use document.currentScript which works on Chrome but is unsupported on IE. 

// We didn't find any baseURL by looking at the script elements
// Try to use the document.currentScript as a fallback
if (!baseURL && document.currentScript) {
    src = document.currentScript.src;

    if (src.indexOf('.min') != -1) {
        suffix = '.min';
    }

    baseURL = src.substring(0, src.lastIndexOf('/'));
}

2 ways to solve this are:

1. Bundle all of TinyMCE with your code

The best approach to solve this issue is to bundle all of TinyMCE's plugins and themes JavaScript with your code, and the skins CSS files with your CSS. Looking at your Grunt setup the best way to do this is to add overrides to your bower.json, e.g.

"overrides": {
  "tinymce-dist": {
    "main": [
      "tinymce.js",
      "plugins/lists/plugin.js",
      "plugins/link/plugin.js",
      /* Add all other plugins used here ... */
      "themes/modern/theme.js",
      "skins/lightgray/skin.min.css",
      "skins/lightgray/content.min.css"
    ]
  }
},

To stop TinyMCE trying to load the skin CSS files remotely you may need to set skin to false, e.g.

$scope.tinymceOptions = {
    menubar: false,
    height: 150,
    skin: false,
    ...
}

2. Set explicit baseUrl

Alternatively you can tell TinyMCE what the base url should be by setting the baseUrl property on TinyMCE's config and re-implement the code to look for your script name, e.g.

.factory('uiTinymceConfig', function() {
    var scripts = document.getElementsByTagName("script")
    var config = {};
    for (var i = 0; i < scripts.length; i++) {
        src = scripts[i].src;

        // Change this test to match the name of your script bundle
        var srcScript = src.substring(src.lastIndexOf('/'));
        if (/learn(\.min|)\.js/.test(src)) {
            if (srcScript.indexOf('.min') != -1) {
                config.suffix = '.min';
            }
            config.baseUrl = src.substring(0, src.lastIndexOf('/'));
            break;
        }
    }
    // Do this to set preInit options for suffix as angular-ui-tinymce doesn't respect suffix config
    angular.extend(tinymce, config);
    return config;
})

Upvotes: 5

Related Questions