CKEditor missing/incorrect basePath in Drupal 7 - javascript

In a custom module, I've included CKEditor
drupal_add_js( 'sites/all/libraries/ckeditor/ckeditor.js',array('weight'=>JS_LIBRARY+1));
drupal_add_js( 'sites/all/libraries/ckeditor/adapters/jquery.js',array('weight'=>JS_LIBRARY+2));
And in my JS I'm now creating an instance on a textarea using
jQuery('#myTextArea').ckeditor();
This was working, but now isn't. Looking in Firebug, I see that ckeditor is trying to access config.js, and that it's looking for this at the URL of the page. It should be looking to http://example.com/sites/all/libraries/ckeditor/.
I can't think what's changed recently that might have broken it!
I've tried passing config { basePath: '/sites/all/libraries/ckeditor/' } into the ckeditor() call but this is ignored, probably can't set this at runtime?
Anyone know what I'm doing wrong, or if this is a bug, is there a work around?

As I commented, this seems to be to do with when the editor is loaded via Drupal's JS aggregation
Here is an ugly hack that it worked for me.
Edit the sites/all/libraries/ckeditor/ckeditor.js file and before the compressed js code add:
window.CKEDITOR_BASEPATH = 'http://example.com/sites/all/libraries/ckeditor/';
Then just remember to do that every time you upgrade.
PS. Credit on basepath hint.

CKEditor (tested 4.4.4) has a problem determining the correct base path, when you change the default ckeditor.js filename. For example, when you add a cachebreaker for live deployment or use an aggregated name.
You can easily reproduce that behavior, with the output of the property: CKEDITOR.basePath
Your are on a website (assume http://example.de) with the path /a/b/c/d, using the original ckeditor filename /ext/ckeditor/ckeditor.js:
Website: http://example.de/a/b/c/d
CKeditor: http://example.de/ext/ckeditor/ckeditor.js
console.log(CKEDITOR.basePath); //output: http://example.de/ext/ckeditor/
You are on the same website, same path and ckeditor.js changed:
Website: http://example.de/a/b/c/d
CKeditor: http://example.de/ext/ckeditor/ckeditor-whatever.js
console.log(CKEDITOR.basePath); //output: http://example.de/a/b/c/
Typically the JavaScript Console shows errors like:
Line 1: Uncaught SyntaxError: Unexpected token <
Uncaught TypeError: Cannot set property 'dir' of undefined
Therefore it is always necessary to set the base path, if you change the default filename ckeditor.js.

Related

TinyMCE MS MVC looking for non-minified file

I have an MS MVC deployment that is looking for a subscript for TinyMCE "theme.js" and not finding it because the file is theme.min.js. How do I get MVC to look for the minified file?
The tinymce file is tinyMCE.min.js, so it is finding that one. Is this a problem with setting TinyMCE or MS MVC?
Long explanation : We are in the process of implementing TinyMCE on a Microsoft MVC page. It was working locally but would not run when deployed to the server. It was failing with a 404, file not found for the file :
PROJECT_ROOT/bundles/themes/modern/theme.js
This was not the location of the theme file it was looking for and after a little research I found out that you needed to set the tinymce.baseURL property. When I did this it helped a little by changing the location in the error to the actual location of the file :
PROJECT_ROOT/Scripts/libs/tinymce/themes/modern/theme.js
The problem is that for some reason it was looking for the un-minified file theme.js and not theme.min.js. If I change the name to theme.js it works.
I thought that MVC and/or TinyMCE would do some magic to get the right name. Is there a setting I need to change?
You need to set tinymce.suffix = '.min'; before you init TinyMCE
tinymce.suffix = '.min';
tinymce.baseURL = '/js/tinymce';
tinymce.init({
selector: '#editor',
menubar: false,
plugins: 'code'
});
TinyMCE should work out to load minified (or non-minified) files based on which TinyMCE file you load (tinymce.js or tinymce.min.js).
Not sure what's happening in your case but that logic appears to be failing.
If you grab the DEV package from https://www.tiny.cloud/get-tiny/self-hosted/ it would come with both the minified and non-minified versions of each file so the editor would find what it needs at runtime.
Note: The code in the minified and non-minified files functions just the same so from a functionality perspective it does not really matter if theme.min.js or theme.js code is loaded. It only add ~200K to the file size so even that is immaterial.
I think I found the solution for this. There is a property you can set in the tinymce object called "suffix" that resolved this for me.
So, for the first part I set a rootURL property in the page calling TinyMCE, and then added the line tinymce.baseURL = rootURL + 'Scripts/libs/tinymce' just before the tinymce.init.
Then, to get it to find the theme.min.js set tinymce.suffix = '.min'
This seems to have resolved the issue. Not sure if this is a hack solution but it is working. If anyone has a better way to do it please let me know.

jQuery blatantly ignoring the path I give to .getScript()

I have a script, TemplateLoader.js which loads 2 Mustache templates, and renders them on the page (or at least that's the goal).
My directory structure:
COMP266
Unit 4
scripts
mustache.min.js
TemplateLoader.js
PageUsingTemplateLoader.html
Inside of TemplateLoader (the object), I have the following chunk to load Mustache, and render the templates:
$.getScript("./scripts/mustache.min.js", function() {
$('head').html( Mustache.render(headTemplate, data) );
$('body').html( Mustache.render(bodyTemplate, data, uniqueBodyTemplate) );
});
This however, yields the following error in the developer console:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR): GET - http://localhost:63342/COMP266/Unit%204/mustache.min.js?_=1450903391318
Oddly, it seems to have dropped the script folder completely from the path.
I decided to play around, so I changed the fetch path to (duplicating the script folder):
./scripts/scripts/mustache.min.js
But this yields:
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR): GET - http://localhost:63342/COMP266/Unit%204/scripts/scripts/mustache.min.js?_=1450903743022
Now it's listening! Unfortunately, this is obviously the wrong path.
I have no idea how to go about debugging this. It seems like jQuery is selectively dropping the scripts folder. That seems ridiculous, but just to make sure, I searched through the jQuery source, and couldn't find anything that would be doing the observed filtering of the path.
It's currently local, not hosted.
Can anyone give me a hint about what's going on here?
It turns out the issue was caused by me forgetting that my template added the mustache script (from a previous test), resulting in it being added twice.
I don't understand how this affected it though. It's not like the jQuery addition was succeeding while the template addition was causing the error, since changing the jQuery fetch path caused a direct change in the error message.
Sure enough though, when I removed the script import from the template, it worked.
I really don't understand how this caused a specific folder to be dropped from the path though.

requirejs require text! with relative path cause unnormalized error on iphone, bet works on emulator

I am using requirejs with phonegap, and load some text file in module definition like this
define(['text!../configuration/systemcore.cfg', //config files
'text!../language/cn.systemcore.lang', //languagefiles
'Configuration', 'DatabaseHandler', 'Language', //framework js
'FileHandler', 'NotificationHandler',
'BaseModule' //base classes
],
function(cfg, lang,
Configuration, DatabaseHandler, Language, FileHandler, NotificationHandler,
BaseModule) {
Everything works fine in the ios emulator, but once loaded into ios device, it causes
unnormalized error on text file which leads to load module timeout, why...
Ok, I added text : 'path/to/text.js' in the requirejs.config({ patch : {...}}) and it solved the problem. It is still weird how can it work before in the emulator when I dont specifically point to the text.js
Maybe this answer is not a solution for this specific question, but however this topic I've found searching for similar problem: unnormalized error and load timeout in console, so might be useful to post it here.
Text plugin seems to work incorrectly when referenced two times with different paths (from my experience).
E.g. if you reference it with full path first:
define(["js/libs/text!somefile.html"], ...)
and then config requireJS path and use alias to it:
require.config({paths: {
"text": "js/libs/text.js"
}});
define(["text!somefile.html"], ...)
it makes the same module to be loaded twice, and the second define causes an error. Correct me if I am wrong.

RequireJS error on IE : dependency file name is the ID instead of the file name

I'm getting a strange behavior with RequireJS on IE.
Sometimes (this is purely random) the generated js file reference appears with the ID, not the file name.
I explain,
on the paths I have:
jqGridz: "jquery.jqGrid/js/jquery.jqGrid.min"
on the shim I have:
"jqGridz": ["jqueryUi", "jqGrid_i18n_en"]
Sometimes the end result is correctly resolved to:
/public/javascripts/jquery.jqGrid/js/jquery.jqGrid.min.js
But other times (a lot of times) it gets rendered as:
/public/javascripts/jqGridz.js
So instead of the path for jqGrid I'm getting the ID of the path.
This only happens on IE and I don't know why.
I'm using RequireJS v2.0.6
Thanks in advance!
Figured out...
I picked up this project with RequireJS already implemented but it's a mess.
So what's happening is that whenever RequireJS can't load the resource (for me was a 404) it put the key name instead of the file path.
So basically if you have have this problem have a look at the resources loading list in Firebug or Fiddler and search for errors :)
Cheers!

Duplicate Identifier in WinJs.d.ts

I am trying to use TypeScript in a Windows 8 app (html5/JS)
I have looked at the sample app
The app uses a typing definition file for WinJS (WinJS.d.ts).
I need to edit this file as it is not complete. However the file has an interface extension for the Type Element adding a property for winControl(typed to any).
This line gets and error of "Duplicate identifier 'winControl'" I am unable to locate and other place this is.
Also, there are locations in my code that i get errors as there is no property named winControl
To solve this problem you must
remove lib.d.ts from anywhere in your project path (or the path to your winrt.d.ts) folder. It is conflicting with the definitions in your local typescript install folder
make sure that you do not have any of your ts (and JS files) identified as content as they will be copied to your deployment directory and will cause the same duplicate issue (there will be two definitions of everything).
I would suggest opening the output window before you do a build. It will let you see what is causing issues since tcs is being run as a command line behind the scenes for you
Sounds like the same issue that I've experienced when trying to augment the Window interface, a bug that is currently being working on:
http://typescript.codeplex.com/workitem/176
However he only mentions lib.d.ts, you may want to add your problems to the issue to either make sure that it's also being fixed, or to rule out that this is what causes your problem.

Categories

Resources