I am making an app using Quill JS and Electron. I want to use Quill's syntax highlighting module and followed the instructions on the API page (https://quilljs.com/docs/modules/syntax/). For some reason, the function does not work (no highlighting is shown in code-block). I switched the <script src=...> tag to require and declared Quill as
quill = new Quill('#editor', {
modules: {
syntax: require('highlight.js'),
toolbar: false
},
theme: 'snow'
});
The result is whenever I type something into the code-block, an error saying " " is not a valid language. I made sure that I included the css file on the main page. What am I doing wrong here?
From the link that you provide. It clearly says
var quill = new Quill('#editor', {
modules: {
syntax: true, // Include syntax module
toolbar: [['code-block']] // Include button in toolbar
},
theme: 'snow'
});
So you only need to set true on that property.
What you have to be careful is to make sure window.hljs is present if you include the script tag before Quill is imported.
Or if you use webpack. You can use ProvidePlugin and set it like this
plugins : [
.
.
new ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js',
"window.hljs": "highlight.js"
})
]
Related
I am trying to create a popover in the Javascript of my Angular 12 project. I am using Boostrap v5.0.1. I can't seem to get rid of a name error when I am trying to create the popover:
var exampleEl = document.getElementById(item.name + index);
var tooltip = new bootstrap.Popover(exampleEl, {
container: 'body',
animation: true
});
Typescript is telling me "Can't find name bootstrap".
I have added bootrap.js to my angular.json file:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
According to the docs, popper.js is included in the bundle file. I am not using jQuery and do not want to include it. I have not seen another post with a similar issue so I must be just overlooking something small. Any ideas?
Posting this declaration at the top of the file worked:
declare var bootstrap: any;
I am updating the CKEditor packages in my Rails/React app from ~12 to the latest version 27. When running the app locally in my webpack-dev-server I see this error message below, and I'm not sure how to determine which option is best/correct?
[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should use one of the following options to specify the strategy:
- use `addMainLanguageTranslationsToAllAssets` to add translations for the main language to all assets,
- use `buildAllTranslationsToSeparateFiles` to add translation files via `<script>` tags in HTML file,
- use `translationsOutputFile` to append translation to the existing file or create a new asset.For more details visit https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin.
The environment.js file currently looks like this:
const { environment } = require("#rails/webpacker")
const typescript = require("./loaders/typescript")
const GitRevisionPlugin = require("git-revision-webpack-plugin")
environment.loaders.append("typescript", typescript)
environment.plugins.prepend(
"Define",
new webpack.DefinePlugin({
// On Heroku git is not available, but SOURCE_VERSION is provided
GIT_VERSION: JSON.stringify(process.env.SOURCE_VERSION || new GitRevisionPlugin().commithash()),
BUILD_TIME: JSON.stringify(new Date().toISOString()),
})
)
environment.plugins.prepend(
"Provide",
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
})
)
environment.config.externals = ["cloudinary"]
// Add support for CKEditor 5.
const CKEditorWebpackPlugin = require("#ckeditor/ckeditor5-dev-webpack-plugin")
environment.plugins.prepend(
"CKEditor",
new CKEditorWebpackPlugin({
language: "en",
})
)
// Define custom loaders for CKEditor's SVG and CSS files.
environment.loaders.append("CKEditorSVGLoader", require("./loaders/ckeditor/svg"))
environment.loaders.append("CKEditorCSSLoader", require("./loaders/ckeditor/css"))
// Tell the standard CSS and file loaders to ignore CKEditor's CSS and SVG files. We have our own loaders for those.
environment.loaders.get("css").exclude = /(\.module\.[a-z]+$)|(ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css)/
environment.loaders.get("file").exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/
module.exports = environment
Project is running:
ruby 2.6.6
Rails 6.0.3.6
webpack-dev-server": 3.11.2
I encountered this issue too while making a custom build in CKEditor. So i assume you followed these instructions ("Webpack Encore" section).
In this solution, i am using the webpack.config.js config file (PHP setup using Encore). The config file name may change from one language to another. If you are not using Encore (i recommand using it), the code may vary a bit, but the logic is the same.
1. If you don't need translations for your build:
Simply remove this part from webpack.config.js:
.addPlugin( new CKEditorWebpackPlugin( {
language: 'pl'
} ) )
2. If your need translations:
Add the addMainLanguageTranslationsToAllAssets option and set it on true, like this:
.addPlugin( new CKEditorWebpackPlugin( {
language: 'pl',
addMainLanguageTranslationsToAllAssets: true
} ) )
I'm new to Monaco and Typescript in general. I'm trying to get JQuery code completion to work on my editor. I've tried just about every example I've been able to find on how to accomplish this. I think I'm pretty close, but probably missing something fundamental.
From the DefinitelyTyped folks, I've gotten their jquery directory and included it in my web project. In the file that is creating my Monaco editor I have the following.
const path = "/jslib/monaco/types/jquery/index.d.ts";
const typings = readTextFile(path);
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);
readTextFile() is just a little function I'm using to get the contents of index.d.ts (which I can confirm is working). Here is the rest of my monaco setup.
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target:
monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true,
module: monaco.languages.typescript.ModuleKind.System,
noEmit: true,
typeRoots: ["/jslib/monaco/types"],
noLib: true
});
window.editor = monaco.editor.create(document.getElementById('monacodiv'), {
value: $("#formula").val(),
language: 'javascript',
theme: "vs-dark",
autoIndent: true,
dragAndDrop: true,
tabCompletion: true,
fontFamily: "monospace",
scrollBeyondLastLine: false
});
If anyone could let me know what I'm doing wrong, that would be awesome!
So I just ran into this problem, after digging into the DefinitelyTyped definitions, I noticed that index.d.ts is just aggregates the content from four different files (JQueryStatic, JQuery, misc, legacy). Adding the content of all of these files by repeatedly using addExtraLib should work! Otherwise, not sure how monaco could find the contents.
I have a Django app, and within the app I'm trying to bundle and minify all Javascript files and CSS files.
To do this, I'm using django-pipeline 1.2.6, and I have configured my settings file such that it uses the default YUICompressor to compress JS and CSS files. My settings file is configured like this:
...
# PIPELINE SETTINGS (for compressing/bundling css and js files)
STATICFILES_STORAGE = "pipeline.storage.PipelineCachedStorage"
PIPELINE_YUI_BINARY = "/usr/bin/yui-compressor"
PIPELINE_JS = {
'min': {
'source_filenames': (
"js/*.js",
),
'output_filename': 'js/min.js'
}
}
PIPELINE_CSS = {
...
}
PIPELINE = True
When I ran the command python src/foo_app/manage.py collectstatic, I got the "broken pipe" exception. I quickly realized that yui-compressor was crashing because of an issue with the JS. So I began the process of isolating the file and line of code that was causing yui-compressor to crash.
I eventually narrowed it down to two lines that define the class attribute for the buttons on a jquery popup:
$('#some-modal').dialog({
...
buttons: [
{
text : 'Print',
click : function() {
...
},
class : 'foo-class bar-class' // <- this line
},
{
text : 'Close',
click : function() {
...
},
class : 'foo-class bar-class' // <- this line
}
],
});
When I remove these class definitions, yui-compressor compresses my JS just fine. However with these lines included, yui-compressor crashes.
Why would these lines cause the compressor to crash? This is valid Javascript, and this does set the class of these buttons correctly.
Maybe this is related with yui-compressor ES6 class keywords processing. Try to wrap class key in quotes:
change this:
class : 'foo-class bar-class' // <- this line
to:
'class' : 'foo-class bar-class' // <- this line
When creating a new project, I have selected to include the dojo toolkit. I can import dojo.js using src="dojo/dojo.js". However when I try importing some other modules such as dijit.js using
require(["dijit/dijit"], function(){})
...I always get an error in the web console (ie the resource is not found). The problem is not applied when I import dojo modules. How can I fix this?
Make sure, you have configured Dojo correctly, kindly find the Dojo configuration which I have been using in my Hybrid App.
<script>
var dojoConfig = {
baseUrl: "js",
packages: [
{ name: "dojo", location: "dojo/dojo"},
{ name: "dijit", location: "dojo/dijit"},
{ name: "dojox", location: "dojo/dojox"}
],
isDebug: false,
async: true,
parseOnLoad: true,
deps:['app/main']
}
</script>
If you still not able to resolve it, try to make a sample use case or jsfiddle, would look into it further.
You made simple mistake of syntax:-
To require js file instead of require[("dojo/parser")]
you have use require(["dojo/parser"],function(parser){})