I am using CKEditor in my MVC application.
I am using "ckeditor-full" (Version 4.4.2) package.
I have included "ckeditor\adapters\jquery.js", and "ckeditor\ckeditor.js" files in the bundle and referenced those bundles in the _Layout.cshtml file.
#Scripts.Render("~/bundles/Scripts/ckeditor")
#Scripts.Render("~/bundles/Scripts/ckeditor/adapters")
"Scripts/ckeditor" folder contains all 352 files that were downloaded with the package.
Following is config.js file (which is residing in "Scripts/ckeditor" folder.
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.toolbar = 'Custom';
config.disableNativeSpellChecker = false;
config.browserContextMenuOnCtrl = true;
config.forcePasteAsPlainText = true;
config.toolbar_Custom = [
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
{ name: 'paste', items: ['PasteText'] },
{ name: 'links', items: ['Link', 'Unlink'] }
];
};
Following is how I display CKEditor for textarea:
$("#idBodyText").ckeditor();
The issue is that, it works fine locally and if running on local IIS in debug mode. However, it doesn't display CKEditor when deployed on IIS with release config.
Any idea what could be the possible reason, and how to resolve this?
Any help on this much appreciated.
Thanks
As a resolution, it turned out that, I had to include following line in my view before loading the bundles -
<script type="text/javascript">
CKEDITOR_BASEPATH = "#Url.Content("~/Scripts/ckeditor/")";
</script>
Check how your bundles generated stylesheet and scripts links in page source:
#Scripts.Render("~/bundles/Scripts/ckeditor")
#Scripts.Render("~/bundles/Scripts/ckeditor/adapters")
It could be a problem with HTTP Error 404 - File or Directory not found or 403.2 - Read access forbidden. - in that case, you should check if files are properly store on serwer (in correct location) and check permissions for that folder.
Also helpful for debugging will be Firebug.
I strongly recommend it to use.
Related
I'm building a sveltekit project. One thing I've done is created a custom type of file which is converted to a *.svelte file upon building or running the development server. By default, sveltekit includes the rollup extension rollup-plugin-dynamic-import-variables which is trying to parse my custom file (who knows why?) and throwing an "unexpected token" error. I'm trying to configure that extension to ignore my custom files, but so far without success. Here is my attempted svelte.config.js file:
// #type {import('#sveltejs/kit').Config}
var config;
import adapter from '#sveltejs/adapter-static';
import dynamicImportVariables from 'rollup-plugin-dynamic-import-variables';
config = {
kit: {
// --- hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null
}),
vite: {
plugins: [
dynamicImportVariables({
warnOnError: true,
exclude: '**'
})
]
}
}
};
export default config;
To be honest about it, I don't use dynamic imports anywhere and therefore would accept as a solution the complete disabling of the extension. But anything that would get it to ignore my custom files would also work.
UPDATE: SvelteKit 1.0.0-beta now requires pages/endpoints to follow a specific naming pattern, so explicit file exclusion should no longer be needed.
SvelteKit specially handles files in the routes/ directory with the following filenames (note the leading + in each filename):
+page.svelte
+page.js
+page.server.js
+error.js
+layout.svelte
+layout.js
+layout.server.js
+server.js
All other files are ignored and can be colocated in the routes/ directory.
If, for some reason, you need to have a file that has a special name shown above, it's currently not possible to exclude that file from special processing.
Original outdated answer:
The rollup-plugin-dynamic-import-variables is actually included by Vite. To configure Vite's plugin, set the build.dynamicImportVarsOptions property:
// svelte.config.js
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: "#svelte",
vite: {
build: {
dynamicImportVarsOptions: {
exclude: [/node_modules/, /\.starbucks$/],
},
},
},
},
}
export default config
But that's not going to fix the problem...
SvelteKit processes all files under src/routes/ so that they're automatically imported in the output application (in .svelte-kit/build/app.js), which will result in the same error.
Option 1: Private modules
You could exclude a src/routes/*.starbucks file by making it a private module, which has a leading underscore in the filename:
src/routes/_home.starbucks 👈
src/routes/_index.starbucks 👈
src/routes/index.svelte
Option 2: Move files outside src/routes
Alternatively, move those *.starbucks files outside of src/routes/ (e.g., into src/starbucks/ or src/lib/):
src/routes/index.svelte
src/starbucks/home.starbucks 👈
src/starbucks/index.starbucks 👈
src/lib/home.starbucks 👈
src/lib/index.starbucks 👈
I am using the NToastNotify nuget package (v7.0.0) with .NET core 3.1.
services.AddMvc(options =>
{
options.EnableEndpointRouting = false;
options.Conventions.Add(new RouteTokenTransformerConvention(
new SlugifyParameterTransformer()));
})
.AddNToastNotifyToastr(new ToastrOptions
{
NewestOnTop = true,
TimeOut = 10000,
ProgressBar = false,
PositionClass = ToastPositions.BottomRight
}, new NToastNotifyOption()
{
ScriptSrc = "/js/toastr.min.js",
StyleHref = "/css/toastr.min.css"
});
I have added the app.UseNToastNotify(); middleware in the Configure method as well as added the #await Component.InvokeAsync("NToastNotify") bit in the body tag within the layout page.
Everything works perfectly on development, but on production when it tries to download the JS file it return a 404. As you can see I have also tried to override the script source, but still no luck.
The #await Component.InvokeAsync("NToastNotify") part will actually render the following
<script src=/_content/NToastNotify/toastr.js?7.0.0.0 type="text/javascript"></script>
<script>
if (nToastNotify) {
nToastNotify.init({
firstLoadEvent: 'DOMContentLoaded',
messages: [],
responseHeaderKey: 'X-NToastNotify-Messages',
requestHeaderKey: 'X-Requested-With',
libraryDetails:{"varName":"toastr","scriptSrc":"https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js","styleHref":"https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css","options":{"positionClass":"toast-bottom-right","timeOut":10000,"newestOnTop":true,"progressBar":false,"type":"success"}},
disableAjaxToasts:false
});
};
</script>
I will get the following two errors GET https://xy.hu/_content/NToastNotify/toastr.js?7.0.0.0 net::ERR_ABORTED 404 and Uncaught ReferenceError: nToastNotify is not defined
The whole site runs through Cloudflare. I am not sure if that is the reason why it don~t work on production. By the way this _content folder does not exist on any environment and is download somehow by the nuget package.
According to the error message, I guess this issue may be related with the Cloudflare hosted folder path. To avoid this issue, I suggest you could try below workaround.
You could add the reference manually in the view, like below:
<script src=https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js?7.0.0.0 type="text/javascript"></script>
Or directly download the script and add the relative path.
I have an Electron application that needs to load a flash based website, i have included the PepperFlash DLL in windows and it works when I run un-packed, but when I run packed the plugin doesn't work.
I've made sure that the file exists in the path it's looking at when built
let pluginPath = process.env.ELECTRON_START_URL ?
path.join(__dirname, pluginName):
__dirname.replace('app.asar', 'app.asar.unpacked') + pluginName;
and if I console.log plugin path when built it gives me the proper area.
C:\Users\Evan\AppData\Local\Temp\nsl129A.tmp\app\resources\app.asar.unpacked\buildpepflashplayer.dll
which exists when I navigate to that area correctly.
I am also including plugins in WebPreferences and this does work when unpacked.
mainWindow = new BrowserWindow({
title: 'TST Application',
icon: path.join(__dirname, 'assets/logo.png'),
webPreferences: {
plugins: true,
webSecurity: false
},
show: false
});
In my package.json for electron-builder I have the proper asarUnpack}
"asarUnpack": [
"build/pepflashplayer.dll"
],
but when I try and load the url
mainWindow.loadURL('http://get.adobe.com/flashplayer/about/');
I get Couldn't load plugin.
however one thing I noticed was travelling to http://isflashinstalled.com/ indicated that flash was correctly installed. As well, In my renderer process if I console.log
console.log(navigator.plugins);
I see the flash plugin in the list of plugins.
Any suggestions? Thanks!
Turns out the issue was that I was packaging in 32-bit and using the 64-bit PepperFlash DLL, made the switch out and things started working.
I worked with CKEditor on my .Net Mvc4 project. On localhost all works well, but after publishing project to server is not initialising:
"Uncaught TypeError: Cannot set property 'dir' of undefined"
I fixed this by adding code line before editor initialization:
CKEDITOR.basePath = '//some url/ckeditor/'
After that, the ckeditor is working but refusing to open image upload dialog:
error in ckeditor plugins image.js
Uncaught Error: [CKEDITOR.dialog.openDialog] Dialog "image" failed when loading definition.
There is no any changes in my ckeditor folder. The version is: 4.4.5
Any solutions please?
Check the "Network" tab in your browser for HTTP 404 errors. It looks like the file that contains Image Dialog definition is not available. Either it is not present (e.g. has been accidentally removed) or you have some weird url rewrite issues.
Check in your CKEDITOR.basePath plugins folder image plugin is in there, if not then add it and wala working like a charm ! hope it helps !
Issue
You are getting the error from only including the ckeditor.js (or ckeditor4.js since 4.13) file on server, with this error becoming raised when CKE attempts to load other features such as plugins and languages but cannot find these files in the basepath folder. You can confirm this from the network tab in browser devtools, as CKE attempts to load features, then cannot find them.
Option 1: Link to a CDN Bundle
CKE offers 3 primary bundles (basic, standard, full) which offer a choice between features and page load. More info here.
Option 2: Include Necessary Files
Make the extra files available on your server.
Here's a gulp task which bundles everything from the ckeditor node module folder (excluding the sample).
gulp.task("copy-ckeditor", function () {
// Check and copy languages in config.ckEditorLanguages
var isIncluded = function(path) {
var found = false,
lang = path.split('lang')[1];
if (lang) {
for (var i in config.ckEditorLanguages) {
if (lang.indexOf(config.ckEditorLanguages[i]) != -1) {
found = true;
}
}
}
return found;
},
copyFile = function(stream) {
stream.pipe(gulp.dest(config.buildPath.js + "lib/ckeditor"));
};
return gulp.src([
"node_modules/ckeditor/**/*.*",
"!node_modules/ckeditor/samples",
"!node_modules/ckeditor/samples/**/*"
])
.pipe(foreach(function(stream, file){
if (file.path.indexOf("lang") != -1) {
if (isIncluded(file.path)) {
copyFile(stream);
}
} else {
copyFile(stream);
}
return stream;
}));
});
Option 3: Build and Host Your Own Custom Bundle
If you want to use a single file load, you can use the CKE4 Builder allowing you to customise built-in plugins.
I think I am missing something here.
Select2 is working fine in my MVC application, except, it is not showing dropdown image, search image, clear image, or I should say any other image which is a part of this plugin.
Following is how I have used it in my page:
1) Razor view
<div>
<input id="countriesList" type="hidden" class="bigdrop"/>
</div>
2) Script
$('#countriesList').select2(
{
placeholder: 'Select Countries',
minimumInputLength: 0,
maximumSelectionSize: 3,
multiple: true,
allowClear:true,
ajax: {
url: '#Url.Action("GetCountriesList", "Geography")',
dataType: 'json',
data: function (term, page) {
return {
searchTerm: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
Also, I have copied select2 files (i.e. js, css, images, and all) in the same folder structure as they were downloaded from its site, and I can see CSS and JS being loaded as well. It seems I am not using appropriate classes due to which images are not getting loaded.
I worked it out myself.
While bundling used in an MVC application, the style bundles must have names similar to physical folder containing CSS.
i have same problem and i think #Nirman's answer is not good (for) me.
because if the bundle and directory has same name. mvc has been confused and not loads css and other contents that placed in that directory.
look at the 2nd part of second answer of this post.
it shows the conflict between same name of bundles and directories:
Do not use folder paths as bundle names
it says:
"2. Do not use folder paths as bundle names"