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.
Related
On my Angular 11 app I have a ckEditor component. I want it to allow uploading images from the user's filesystem (and not just through links) which requires an upload adapter. I customized my ckEditor build through https://ckeditor.com/ckeditor-5/online-builder/ and included the Image, ImageInsert, ImageUpload and Base64UploadAdapter (among many others).
I tried including the SimpleUploadAdapter plugin but it doesn't seem to be recognized on my system, giving me a error-filerepository-no-upload-adapter error, just as if I didn't include the plugin.
Therefore I included the 'Base64UploadAdapter, and this does encode images into my ckeditor data to be uploaded to the server (which is fine).
The problem is that the base64 encodings are not valid. ckeditor.js inserts spaces instead of +, for example and then the image becomes distored or doesn't display at all, giving an ERR_INVALID_URL. Which makes me think the data is not URI-encoded.
In the ckeditor.js file I do see references to encodeURIComponent(), such as (piece of code from within large blob):
sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r)
The strange thing is that in CkEditor's demo at https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html#demo , dropping an image into THEIR editor and ispecting it in the developer tools, it is encoded properly. (I copied and pasted the resulting encoding into the browser and the image appeared all right).
I searched Google and StackOverflow, no one seems to have this particular issue.
I cleared the chrome cache and reinstalled the node_modules, didn't help.
I don't see particular configurations for the Base64UploadAdapter plugin, (except limiting the user from uploading certain types of files, and since by default this plugin accepts various file types - limiting the user is not the answer here. )
One thing I want to add: This is probably not related to the encoding issue, but just in case it is. The online builder came with a build folder (which I refer to in my code), but also with additional files that I did not touch or infer. I wonder if there might be code there that I need to build or refer to:
a package.json file, including dependencies. I did not install them because they cause duplicate installations in my node modules. Is there a way to install unique ones, i.e. only dependencies that aren't currently configured?
a webpack.config.js which I did not refer to at all. (maybe it is picked up by the system, I don't know).
This is my my-component.html code:
<div>
<ckeditor [config]="config" [editor]="editor" [(ngModel)]="data"></ckeditor>
</div>
and in my-component.ts:
import * as Editor from 'lib/assets/ckeditor64/build/ckeditor';
export class MyComponent{
editor = Editor;
config = {
toolbar: {
items: ['imageUpload','imageInsert',]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
}
};
data: string = '';
}
In short, I want to know why it might not be encoding my images correctly into Base64 and if there is possibly a workaround within the Angular framework that doesn't involve integrating my own upload adapter (since I am working with CkEditor's plugin itself anyway).
If there is other code I should include, please tell me.
Thank you very much in advance.
According to the documentation here:
https://scn.sap.com/thread/3502503
http://jsbin.com/openui5-notepad-control-with-its-own-library-used-in-xmlview/1/edit?html,output
I build the following folder structure with following files:
/my/themes/sap_bluecrystal/library.css
/my/library.js
/my/Square.js
Now I am asking me how to load the library (inside Component.js) correct.
I tried following in Component.js
jQuery.sap.registerModulePath("my", "./my");
And in some View:
jQuery.sap.require("my.Square");
...
new my.Square({
text : "Test",
size : "200px"
})
All in all the Square control seems to be usable but the library.js and library.css is not loaded at all.
Any idea how to do it right?
Using bootstrap XML code inside index.html would not work if the app is running inside Fiori Launchpad.
Bonus question: Where to deploy a custom library inside SAP to be usable by multiple apps? One idea (but maybe that's wrong) is to create a BSP application just containing the library code?
The right way to load the library would be (instead of jQuery.sap.require):
sap.ui.getCore().loadLibrary("my");
This will load a "library-preload.json" file (if available) and also include the theme resources.
See https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.Core.html#loadLibrary
First question I could solve for my own:
Replace
jQuery.sap.require("my.Square");
with
jQuery.sap.require("my.library");
Second question is still open :)
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.
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.
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!