I've notice when extracting the data from the editor it filters some classes and styles.
I want to use the exact same styling as the editor uses.
So, i have 2 problems i need to solve.
How can i prevent the filtering of classes and styles from happening.
How can i extract the CSS to a separate file?
I know when using previous ckeditor versions you could have used the following to prevent it filtering:
config.allowedContent = true;
You can use the General HTML support plugin in CKEditor 5. More info in the docs
This is what I'm using to enable some features as per my needs. You can customize to your implementation.
ClassicEditor.create(richEditorElem, {
htmlSupport: {
allow: [
{
name: /^(div|ul|li|ol|a|button|p|h[1-6])$/,
classes: true,
styles: true
}
]
}
}).then( editor => {
}).catch( error => {
console.error( error );
});
Related
I'm trying to figure out a solution to wrap text around images within a markdown document using Gatsby. I have tried the wrapperStyle option but not entirely sure how to get it to work. I've seen on Gatsby's website using the following code:
wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
But I am very novice to coding and am unsure how to read this (I'm a technical writer by trade). Also, adding this makes my images disappear when I build the repo.
Here is a condensed snippet from my gatsby-config.js file in case someone is unsure of where I'm talking about in gatsby-config.js.
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
I think you are looking for showCaptions or markdownCaptions option of gatsby-remark-images plugin. Use it like:
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: true
}
}
]
}
}
Or customize the element of the caption like:
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: ['title', 'alt']
}
}
}
Note: with this configuration, if you set the title, it will be used as the caption. Otherwise, if you set the alt attribute, it will be used instead
You can find the result of the configuration in this GitHub thread:
Related articles:
https://medium.com/#sgpropguide/customising-image-display-in-gatsby-3b027d783dce
https://codeconcisely.com/posts/how-to-add-markdown-image-captions-in-gatsby/
Using PurgeCSS along with Laravel Mix on a non Laravel project.
Everything works well but I want to use some special non CSS characters in my responsive utility classes but PurgeCSS is stripping them even if present in the markup.
My example class would be:
<div class="u<sm:hidden"></div>
In the css this is written as:
.u\<sm\:hidden {}
PurgeCSS has no issue with the colon symbol as the following class acts fine:
.u-sm\:hidden {}
Any way I can make this work as expected?
Thanks
So I was facing the same issue and I did some digging and found the solution here
https://lancecore.com/building-our-sites/.
The way I solved it was to use a custom extractor for Purgecss and in that extractor write a regex expression that correctly matches the way responsive classes are designed in tailwindcss.
Now, here is my postcss.config.js file where all this magic happened:
const purgecss = require('#fullhuman/postcss-purgecss')
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
}
module.exports = {
plugins: [
require('tailwindcss')('./tailwind.js'),
require('autoprefixer'),
purgecss({
content: [
'./pages/**/*.vue',
'./layouts/**/*.vue',
'./components/**/*.vue'
],
extractors: [{
extractor: TailwindExtractor,
extensions: ['vue']
}
],
whitelist: ['html', 'body']
})
]
}
I'm trying to create a custom validator for Angular 2 using ES5. I can't find a sample online, and the cheatsheet of the documentation doesn't help and it's not documented for ES5 at all. Also, I can't transpile completely from given examples of TypeScript to ES5. Let's say the validator is a simple code validator that more than a simple Regular Expression match, should check for CRC too. Thus it can't be accomplished with built-in pattern validator of Angular 2.
Here's my code that I've tried:
var securityCode = ng.core.Directive({
selector: '[securityCode][ngModel]',
providers: [
{
provide: ng.forms.NG_VALIDATORS,
useExisting: securityCode,
multi: true
}
]
}).Class({
constructor: function() {
console.log('securityCode');
},
validate: function(value){
console.log('validate...');
},
validator: function(value){
console.log('validator...');
}
});
and here's how I want to use it:
<input mdInput type="text" requried securityCode />
I'm stuck now, I can't go further as this doesn't work because I get Cannot read property 'validate' of undefined exception, and I have no idea what to do next.
Is there a way with the new Sass (3.3+) to disable the source maps by default? Right now I keep getting main.css.map (403 Forbidden) when I view inspector. It looks like it gets generated by default, but I would like to disable it.
Any ideas?
The grunt-contrib-sass module accepts a property in 'options' called 'sourcemap'.
grunt.initConfig({
sass: {
dist: {
files: {
'main.css': 'main.scss'
},
options: {
'sourcemap': 'none'
}
}
}
});
Documentation
Setting the value to "none" should prevent the creation of a sourcemap.
The 'sourcemap': 'none' option will no longer be valid as it was true for Ruby SASS which is no longer supported.
Use one of the following ways instead:
options: {
'no-source-map': ''
}
OR
options: {
sourceMap: false
}
I started using the gmap3 jQuery plugin today and I'm having issues with getting a list of markers.
As long as I add all the markers manually (with addMarker or addMarkers) all works well and the:
.gmap3({action:'get', name:'marker', all:true});
gives proper list of markers.
However, if i use the action:getRoute and the addDirectionsRenderer - the markers are not 'gettable' by code pasted above.
My code for showing the directions is below - it works and shows them properly on the map. Only issue is that I cannot get any markers out of it, so I can process them after creation.
var optionDirections = {
origin: startcoord,
destination: stopcoord,
waypoints: coordsAllGoogleStyle,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
....
.gmap3({
action:'getRoute',
options: optionDirections,
callback: function(results) {
if (!results) { alert('nodata'); return; }
$(this).gmap3(
{
action:'addDirectionsRenderer',
options:{
preserveViewport: false,
draggable: false,
directions:results
}
}
);
var res = $(this).gmap3({action:'get', name:'marker', all:true});
alert('Found: '+res.length+' markers');
}
});
to make things simple, I contacted the author of this api and it kind of not support it anymore because "now people use angular"
nice is'nt it...