I am trying to add the CodeSnippet plugin to CKEditor (installed in my Rails app using ckeditor-rails). To do this, I first added the CodeSnippet plugin folder and all of its dependencies to the directory app > assets > javascripts > ckeditor > plugins (so my plugins folder contains folders for codesnippet, dialog, dialogui, lineutils, and widget).
I then updated my app/assets/javascripts/ckeditor/config.js.coffee to include the following:
CKEDITOR.editorConfig = (config) ->
config.startupShowBorders = true
config.resize_enabled = false
config.scayt_autoStartup = true
config.language = 'en'
config.width = '445px'
config.extraPlugins = 'widget,dialog,dialogui,lineutils,codesnippet'
config.toolbar_Default = [
{ name: 'basicstyles', items: [ 'Bold','Italic','Underline', '-', 'NumberedList','BulletedList', 'Link','Unlink', 'CodeSnippet','RemoveFormat' ] }
]
config.toolbar = 'Default'
true
When I try to load a webpage with the CKEditor, I get the following errors in my javascript console:
Uncaught TypeError: undefined is not a function
referring to this line of widgets/plugin.js:
CKEDITOR.style.addCustomHandler( {
and the same error
Uncaught TypeError: undefined is not a function
referring to this line of codesnippets/plugin.js:
editor.addContentsCss( path + 'lib/highlight/styles/' + editor.config.codeSnippet_theme + '.css' );
Anyone able to configure this CKEditor to use the CodeSnippet plugin in a Rails app?
I wasn't able to get this to work at all using any ckeditor gems. As a result, I completely removed the ck_editor rails gem and downloaded a build directly from the ckeditor website with the plugins I wanted added in.
I then placed the whole ckeditors folder into my app > assets > javascripts folder and added the following to application.js
//= require ckeditor/ckeditor.js
I did end up having to do some customization by editing ckeditor/ckeditor.js directly, but I was finally able to get the CodeSnippet plugin to work this way.
Hope this helps someone!
Related
My goal is to use Bootstrap5 Tooltips with my Tapestry 5.8.1 web application. I try to use requireJS for my JavaScript code as much as possible. So I use the Bootstrap5 JS files in their separated form. That means, I don't use the bundle file but single files like this:
src/main/resources
- META-INF
- modules
- bootstrap5
- alert.js
- alert.js.map
- base-component.js
- base-component.js.map
- ...
- tooltip.js
- tooltip.js.map
In my own JS I activate the tooltips by defining this module:
define(["bootstrap5/tooltip"], function(Tooltip) {
var setuptooltips = function() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl)
})
};
return {
"setuptooltips" : setuptooltips
};
})
and then calling require(...).setuptooltips().
That all works. But.
For each *.js file in my modules/bootstrap5 directory I now get a warning on the JavaScript console about the missing source map files:
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://localhost:8080/webapp/modules.gz/bootstrap5/tooltip.js
Source-Map-Adresse: tooltip.js.map
And I don't know how to resolve this. Tapestry stores all the modules that are actually used in this modules.gz path. I have to knowledge of the inner workings of this. In the debugger I can browser this path and only the files that have been loaded via require() calls are listed their. Obviously, the source map files are missing. Is there a way to either resolve the issue or at least remove the warnings without the need to edit all the Bootstrap5 JS files? Since it is those JS files that refer to the source map files.
Thanks!
Having some issues with CKeditor when i move from localhost to hosted.
Works fine locally, as soon as I move it to the server I am getting these issues in console and the editor doesnt appear. It also breaks the JS.
ckeditor.js:258 Uncaught TypeError: Cannot set property 'dir' of
undefined at Object.d (ckeditor.js:258) at e (ckeditor.js:259) at
Array.y (ckeditor.js:259) at v (ckeditor.js:259) at ckeditor.js:260
There might possibility that ckEditor tried to load lang js
Try to include this : -
<script type="text/javascript" src="assets/ckeditor/lang/en.js"></script>
And also set configuration language
config.language = 'en';
See the workarounds in this github issue. They suggest:
setting a constant in your code to tell CKEditor what its base path is (see also this part of the CKEditor documentation)
loading CKEditor from a CDN instead of locally
Issue
You are getting the error from only including the ckeditor4.js 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 am trying to load a pdf using PDFJS on my rails app.
Only images are loaded, while any text are not rendered.
The console says:
Warning: Error during font loading: Maximum call stack size exceeded
Weirdly, it works perfectly on localhost and on Firefox.
It works on any browser on localhost. The error only arise at production server.
Here is my config.
application.js
//= require compatibility
//= require pdf
//= require pdf_viewer
//= require simpleviewer
simpleviewer.js.erb
$(function(){
'use strict';
if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
alert('Please build the library and components using\n' +
' `node make generic components`');
}
PDFJS.workerSrc = "<%= asset_path('pdf.worker.js') %>";
$('[data-type=pdf]').each(function(){
var pdfUrl =$(this).attr('data-url');
var container = $(this).find('#viewerContainer')[0];
renderPdf(pdfUrl,container)
})
function renderPdf(pdfUrl, container){
var pdfLinkService = new PDFJS.PDFLinkService();
var pdfViewer = new PDFJS.PDFViewer({
container: container,
linkService: pdfLinkService,
});
pdfLinkService.setViewer(pdfViewer);
container.addEventListener('pagesinit', function () {
pdfViewer.currentScaleValue = 'page-width';
});
PDFJS.getDocument(pdfUrl).then(function (pdfDocument) {
pdfViewer.setDocument(pdfDocument);
pdfLinkService.setDocument(pdfDocument, null);
});
}
})
pdf_show.erb
<div class="pdf_show" data-type="pdf" data-url="#{pdf_url}">
<div id="viewerContainer">
<div id="viewer" class="pdfViewer">
</div>
</div>
</div>
Many thanks.
As mentioned at https://github.com/mozilla/pdf.js/issues/7044, it is an issue with Chrome running Uglified code. There is a workaround you can use: apply {compress: {sequences: false}} options (see source) or disable JS compression. (You can also report the issue to Chrome bug tracking system).
Everyone mentioned that the error is due to chrome unable to properly read the minified code. I tried to selectively disable rails asset compressor but failed.
So for workaround,I use this cdn .
I dont know if this is an official CDN though.
https://npmcdn.com/pdfjs-dist#1.4.79/build/pdf.combined.js
Update: The cdn I am using is using fake worker and not minified, and I couldn't find any other cdn for pdfjs. So I hosted the minified pdf.js and pdf.worker.js on AWS S3 and use it as my own cdn.
I would like to split up my libs and my app code in separate bundles so I can insert script tags for each separately since I don't want jQuery, Backbone and Underscore to be added to each of my apps bundles.
However, I've tried several ways of doing this and each time I get an error from Backbone saying:
Uncaught TypeError: Cannot read property 'ajax' of undefined
I'm compiling a libs.js file that looks like this:
global.$ = require('./jquery')
global._ = require('underscore')
global.Backbone = require('backbone')
I had to manually download jQuery and stuff it in my /src/vendor folder because nom install jquery just fails for some reason.
I also have some simple test app code that compiles to app.js:
// User.js
var Backbone = require('backbone')
module.exports = User = Backbone.Model.extend({
url : '/user'
});
// app.js
var User = require('./user');
var u = new User()
u.on('change', function(e){
$('h1').append('Updated!')
});
u.fetch()
In my HTML the script tag for libs.js precedes that of app.js.
Maybe I've just approached this whole thing in a weird way from the start, because there doesn't seem to be much helpful in the way of googling when it comes to using these libs in this way, so any input on this is greatly appreciated!
I read up some more about externalizing, aliasing and shimming in Browserify. I was finally able to put together a Coffeescript gruntfile configuration that works:
browserify:
libs:
src: ['src/vendor/jquery.js', 'underscore', 'backbone'],
dest: 'public/js/libs.min.js'
options:
alias: ['backbone:', 'underscore:']
shim:
jQuery:
path: 'src/vendor/jquery'
exports: '$'
home:
src: ['src/js/main-home.js']
dest: 'public/js/main-home.min.js'
options:
external: ['backbone', 'underscore']
In main-home.js I am now able to do var Backbone = require('backbone') and then Backbone.$ = $ and everything works.
Seem like jQuery is not loaded correctly, that error is probably because you are attempting to call $.ajax but $ is undefined.
Maybe another reason maybe because that you're trying to load jQuery before Backbone. Try to do the opposite way by include your Backbone before jQuery instead.
I'm using requireJS to load scripts. It has this detail in the docs:
The path that is used for a module name should not include the .js
extension, since the path mapping could be for a directory.
In my app, I map all of my script files in a config path, because they're dynamically generated at runtime (my scripts start life as things like order.js but become things like order.min.b25a571965d02d9c54871b7636ca1c5e.js (this is a hash of the file contents, for cachebusting purposes).
In some cases, require will add a second .js extension to the end of these paths. Although I generate the dynamic paths on the server side and then populate the config path, I have to then write some extra javascript code to remove the .js extension from the problematic files.
Reading the requireJS docs, I really don't understand why you'd ever want the path mapping to be used for a directory. Does this mean it's possible to somehow load an entire directory's worth of files in one call? I don't get it.
Does anybody know if it's possible to just force require to stop adding .js to file paths so I don't have to hack around it?
thanks.
UPDATE: added some code samples as requested.
This is inside my HTML file (it's a Scala project so we can't write these variables directly into a .js file):
foo.js.modules = {
order : '#Static("javascripts/order.min.js")',
reqwest : 'http://5.foo.appspot.com/js/libs/reqwest',
bean : 'http://4.foo.appspot.com/js/libs/bean.min',
detect : 'order!http://4.foo.appspot.com/js/detect/detect.js',
images : 'order!http://4.foo.appspot.com/js/detect/images.js',
basicTemplate : '#Static("javascripts/libs/basicTemplate.min.js")',
trailExpander : '#Static("javascripts/libs/trailExpander.min.js")',
fetchDiscussion : '#Static("javascripts/libs/fetchDiscussion.min.js")'
mostPopular : '#Static("javascripts/libs/mostPopular.min.js")'
};
Then inside my main.js:
requirejs.config({
paths: foo.js.modules
});
require([foo.js.modules.detect, foo.js.modules.images, "bean"],
function(detect, images, bean) {
// do stuff
});
In the example above, I have to use the string "bean" (which refers to the require path) rather than my direct object (like the others use foo.js.modules.bar) otherwise I get the extra .js appended.
Hope this makes sense.
If you don't feel like adding a dependency on noext, you can also just append a dummy query string to the path to prevent the .js extension from being appended, as in:
require.config({
paths: {
'signalr-hubs': '/signalr/hubs?noext'
}
});
This is what the noext plugin does.
requirejs' noext plugin:
Load scripts without appending ".js" extension, useful for dynamic scripts...
Documentation
check the examples folder. All the info you probably need will be inside comments or on the example code itself.
Basic usage
Put the plugins inside the baseUrl folder (usually same folder as the main.js file) or create an alias to the plugin location:
require.config({
paths : {
//create alias to plugins (not needed if plugins are on the baseUrl)
async: 'lib/require/async',
font: 'lib/require/font',
goog: 'lib/require/goog',
image: 'lib/require/image',
json: 'lib/require/json',
noext: 'lib/require/noext',
mdown: 'lib/require/mdown',
propertyParser : 'lib/require/propertyParser',
markdownConverter : 'lib/Markdown.Converter'
}
});
//use plugins as if they were at baseUrl
define([
'image!awsum.jpg',
'json!data/foo.json',
'noext!js/bar.php',
'mdown!data/lorem_ipsum.md',
'async!http://maps.google.com/maps/api/js?sensor=false',
'goog!visualization,1,packages:[corechart,geochart]',
'goog!search,1',
'font!google,families:[Tangerine,Cantarell]'
], function(awsum, foo, bar, loremIpsum){
//all dependencies are loaded (including gmaps and other google apis)
}
);
I am using requirejs server side with node.js. The noext plugin does not work for me. I suspect this is because it tries to add ?noext to a url and we have filenames instead of urls serverside.
I need to name my files .njs or .model to separate them from static .js files. Hopefully the author will update requirejs to not force automatic .js file extension conventions on the users.
Meanwhile here is a quick patch to disable this behavior.
To apply this patch (against version 2.1.15 of node_modules/requirejs/bin/r.js) :
Save in a file called disableAutoExt.diff or whatever and open a terminal
cd path/to/node_modules/
patch -p1 < path/to/disableAutoExt.diff
add disableAutoExt: true, to your requirejs.config: requirejs.config({disableAutoExt: true,});
Now we can do require(["test/index.njs", ...] ... and get back to work.
Save this patch in disableAutoExt.diff :
--- mod/node_modules/requirejs/bin/r.js 2014-09-07 20:54:07.000000000 -0400
+++ node_modules/requirejs/bin/r.js 2014-12-11 09:33:21.000000000 -0500
## -1884,6 +1884,10 ##
//Delegates to req.load. Broken out as a separate function to
//allow overriding in the optimizer.
load: function (id, url) {
+ if (config.disableAutoExt && url.match(/\..*\.js$/)) {
+ url = url.replace(/\.js$/, '');
+ }
+
req.load(context, id, url);
},
The patch simply adds the following around line 1887 to node_modules/requirejs/bin/r.js:
if (config.disableAutoExt && url.match(/\..*\.js$/)) {
url = url.replace(/\.js$/, '');
}
UPDATE: Improved patch by moving url change deeper in the code so it no longer causes a hang after calling undef on a module. Needed undef because:
To disable caching of modules when developing with node.js add this to your main app file:
requirejs.onResourceLoad = function(context, map)
{
requirejs.undef(map.name);
};