I'm trying to include the entities plugin in my CDN version of CKEditor, but it's not loading. Here's my initialization script:
CKEDITOR.plugins.addExternal('pbckcode',ROOT_URL+'assets/editor_plugins/pbckcode/');
CKEDITOR.plugins.addExternal('entities',ROOT_URL+'assets/editor_plugins/entities/');
CKEDITOR.replace('docs-editor',{
allowedContent: true,
contentsCss:['https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',
ROOT_URL+'assets/editor.css'],
extraPlugins:'pbckcode,entities',
on:{
instanceReady:function(ev){
setFocus();
},
},
pbckcode:{
highlighter: 'PRETTIFY',
modes: [
[
'PHP',
'php'
]
,[
'CSS',
'css'
]
,[
'Javascript',
'javascript'
]
],
theme: 'monokai'
}
});
The pbckcode plugin gets loaded, but entities is not. I believe I've verified the path to entities/plugin.js properly, so I'm not sure why pbckcode is loading, but entities is not.
I'm verifying by entering CKEDITOR.plugins.loaded in the console.
Related
I have here my configuration below. Is there a way to select the directory, instead of specifying each css file? I want to modularize loading of css.
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/css/login.css',
'resources/css/register.css',
'resources/css/about.css',
'resources/css/profile.css',
..
],
refresh: true,
}),
],
...
});
I already tried the following, but none worked for me.
'resources/css'
'resources/css/*.css'
'resources/css/**.css'
I'm trying to customize the 'primary' color in the BootstrapVue scss environment which I use in my Nuxt project.
I've checked several resources (such as https://dev.to/paramo/using-sass-global-variables-in-nuxt-js-j0k and https://bootstrap-vue.org/docs/reference/theming). However, I haven't succeeded.
This is what I've already done up to the moment:
1)created a file #/assets/scss/customTheme.scss:
$primary: #00BFA5;
2)installed sass, sass-loader and #nuxtjs/style-resources
3)set a nuxt configuration:
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/auth-next',
['nuxt-mq'],
'bootstrap-vue/nuxt',
'#nuxtjs/proxy',
'#nuxtjs/style-resources'
],
styleResources: {
scss: ['#/assets/scss/*.scss']
},
css: [
'#/assets/scss/customTheme.scss'
]
I would greatly appreciate if someone could help me with this.
Set bootstrapVue module like below, in your nuxt.config.js
modules: [
['bootstrap-vue/nuxt', { css: false }]
],
and set your custom css like below:
css: [
'~/assets/scss/style.scss'
],
I'm trying to enable vendor prefixes with Next.js, but they're not working. I'm using SCSS modules, and tried also with normal CSS but this is not working.
EDIT: I'm using a custom PostCSS file:
module.exports = {
plugins: [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: true,
grid: "autoplace",
},
stage: 3,
features: {
"custom-properties": true,
},
},
],
],
};
You will just need to adjust the browserslist in your package.json.
{
"browserslist":[
......
]
}
Try Visiting here for more info in browserslist:
https://github.com/browserslist/browserslist
Our app (https://web.hashlearn.com) is built with Vuetify works and looks awesome in all browsers except IE11 (we don't support < IE11). This is essentially a Rails app with Webpacker, VueJS, and Vuetify (0.16.9). Most of the things seem to work except a few issues in IE11, the icons just don't show up in IE. I've tried multiple things including:
Installing and including babel-polyfill via npm and importing it into our application.js
Including babel-polyfill via Webpacker entry config as suggested here: https://github.com/rails/webpacker/issues/523#issuecomment-309871748
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"node": "current",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"transform-object-rest-spread",
"syntax-dynamic-import",
["transform-class-properties", { "spec": true }],
["transform-runtime", { "polyfill": false, "regenerator": true }]
]
}
Has anybody faced this kind of issues? how did you solve the issues? Most of the issues reported in GitHub don't seem to have proper solutions though.
I am using grunt-scss-lint with sucess.
but I wanna exclude a folder or files, but after runt he task still catching the folder, any idea how to exclude the file or directory?
in the docs says:
exclude
Type: String or Array
Default: null
Exclude one or more files from being linted.
grunt task
scsslint: {
allFiles: [
'scss/_main.scss',
],
options: {
config: 'scss/.scss-lint.yml',
reporterOutput: '.tmp/scss-lint-report.xml',
colorizeOutput: true,
compact:false,
},
exclude: [
'scss/vendor/font-awesome/font-awesome.scss'
]
},
any ideas?
Update:
fixed moving exclude to the options.
scsslint: {
allFiles: [
'scss/_main.scss',
],
options: {
config: 'scss/.scss-lint.yml',
reporterOutput: '.tmp/scss-lint-report.xml',
colorizeOutput: true,
compact:false,
exclude: [
'scss/vendor/font-awesome/font-awesome.scss'
]
}
},
The exclude configuration must be moved to within the options object:
options: {
config: 'scss/.scss-lint.yml',
reporterOutput: '.tmp/scss-lint-report.xml',
colorizeOutput: true,
compact:false,
exclude: [
'scss/vendor/font-awesome/font-awesome.scss'
]
},