Related
I'd like to know how do I make my <img> which I append using editor.data.set() to be in a specific size and alignment? Can I define a global size for such appended images? I want it also to work with a normal image adding feature.
I cannot set the default style options for images - side / alignRight / alignBlockRight in my case (I don't know what's the difference between them, but nevermind).
Even if a specific alignment option is active / highlighted, the image is not aligned to the right.
image: {
styles: {
options: [
'alignLeft', 'alignRight',
'alignCenter', 'alignBlockLeft', 'alignBlockRight',
'block',
{
name: 'inline',
isDefault: false,
},
{
name: 'side',
isDefault: true,
},
],
},
I tried many ways but nothing works.
My full config:
ClassicEditor
.create(editorElement, {
plugins: [
Autoformat,
Base64UploadAdapter,
BlockQuote,
Bold,
Essentials,
Heading,
Image,
ImageBlockEditing,
ImageCaption,
ImageInlineEditing,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
SourceEditing,
Table,
TableToolbar,
TextTransformation,
Underline,
WordCount,
GeneralHtmlSupport,
],
toolbar: [
'heading',
'|',
'bold',
'italic',
'underline',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'sourceEditing',
],
// #ts-expect-error
htmlSupport: {
allow: [
{
name: 'img',
classes: true,
attributes: true,
}
],
},
language: 'en',
image: {
styles: {
styles: {
options: [
{
name: 'alignRight',
isDefault: true,
},
],
},
toolbar: [
'imageTextAlternative',
'imageStyle:alignRight',
],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
})
.then(ckeditor => {
editor = ckeditor;
// editor.execute('imageStyle', { value: 'alignRight' });
})
.catch(error => {
console.error(error);
});
I am using a admin template on one of my laravel project and here are the files:
tailwind.config.js
const colors = require("tailwindcss/colors");
const {
toRGB,
withOpacityValue,
} = require("#left4code/tw-starter/dist/js/tailwind-config-helper");
module.exports = {
mode: "jit",
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.jsx",
"./resources/**/*.vue",
],
theme: {
extend: {
colors: {
rgb: toRGB(colors),
primary: withOpacityValue("--color-primary"),
secondary: withOpacityValue("--color-secondary"),
success: withOpacityValue("--color-success"),
info: withOpacityValue("--color-info"),
warning: withOpacityValue("--color-warning"),
pending: withOpacityValue("--color-pending"),
danger: withOpacityValue("--color-danger"),
light: withOpacityValue("--color-light"),
dark: withOpacityValue("--color-dark"),
slate: {
50: withOpacityValue("--color-slate-50"),
100: withOpacityValue("--color-slate-100"),
200: withOpacityValue("--color-slate-200"),
300: withOpacityValue("--color-slate-300"),
400: withOpacityValue("--color-slate-400"),
500: withOpacityValue("--color-slate-500"),
600: withOpacityValue("--color-slate-600"),
700: withOpacityValue("--color-slate-700"),
800: withOpacityValue("--color-slate-800"),
900: withOpacityValue("--color-slate-900"),
},
darkmode: {
50: withOpacityValue("--color-darkmode-50"),
100: withOpacityValue("--color-darkmode-100"),
200: withOpacityValue("--color-darkmode-200"),
300: withOpacityValue("--color-darkmode-300"),
400: withOpacityValue("--color-darkmode-400"),
500: withOpacityValue("--color-darkmode-500"),
600: withOpacityValue("--color-darkmode-600"),
700: withOpacityValue("--color-darkmode-700"),
800: withOpacityValue("--color-darkmode-800"),
900: withOpacityValue("--color-darkmode-900"),
},
},
fontFamily: {
roboto: ["Roboto"],
},
container: {
center: true,
},
maxWidth: {
"1/4": "25%",
"1/2": "50%",
"3/4": "75%",
},
strokeWidth: {
0.5: 0.5,
1.5: 1.5,
2.5: 2.5,
},
},
},
plugins: [require("#tailwindcss/forms")],
variants: {
extend: {
boxShadow: ["dark"],
},
},
}
and this, is my current webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/admin-template/js/app.js', 'public/assets/js/admin-template.js')
.js('resources/js/app.js', 'public/assets/js')
.react()
.sass('resources/sass/app.scss', 'public/assets/css')
.postCss("resources/admin-template/css/app.css", "public/assets/css/admin-template.css");
and here is my current postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("postcss-advanced-variables"),
require("tailwindcss/nesting"),
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer"),
],
};
Now, I had separately created frontend design, and it has this tailwind.config.js
module.exports = {
content: ['./*.html'],
theme: {
extend: {
colors: {
'primary': '#1A1C29',
'primary-light': '#2A2D3E',
'theme-blue': '#2563eb',
'theme-green': '#06D594',
'light-gray': '#999ba6',
'yellow': '#FFFF00',
'gold': '#facc15',
'red': '#FF0000'
},
fontFamily:{
'poppins': ['Poppins', 'sans-serif'],
'roboto' : ['Roboto', 'sans-serif']
},
fontSize:{
'xxs': '.63rem',
},
screens:{
'sm': '575px',
},
},
},
}
Now, I have this css on resources/css/front.css, now how could I compile on this laravel project by using this second tailwind config value for front .css only.
I have tried this by adding this line on webpack. But, its not compiling correctly, its using different colors combination.
.postCss("resources/css/front.css", "public/assets/css/front.css");
What would be the best and safest to handle this scenario with single tailwind.config.js
If merging both tailwind.config.js files is not an option, calling mix.postCss twice is one way to do it.
The postCss method accepts an array of PostCSS plugins. This allows you to pass tailwindcss with a different configuration file.
webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')('tailwind.config.js')
]);
mix.postCss('resources/css/front.css', 'public/css', [
require('tailwindcss)('tailwind-front.config.js')
]);
In that case I'd suggest removing the postcss.config.js file from your project and providing the array of plugins manually for each calls to postCss.
webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('resources/css/app.css', 'public/css', [
require("postcss-import"),
require("postcss-advanced-variables"),
require("tailwindcss/nesting"),
require('tailwindcss')('tailwind.config.js'),
require("autoprefixer"),
]);
mix.postCss('resources/css/front.css', 'public/css', [
require("postcss-import"),
require("postcss-advanced-variables"),
require("tailwindcss/nesting"),
require('tailwindcss')('tailwind-front.config.js'),
require("autoprefixer"),
]);
I'm using Laravel Mix and PostCSS to build Tailwind.
Everything works, I can even Purge unused styles.
I have strange outputs when I build (a LOT of these) :
--tw-space-y-reverse [
{
index: 40,
token: '-',
type: 9,
eval: [Function: sub],
precedence: 1,
show: '-'
},
{
index: 40,
token: '-',
type: 9,
eval: [Function: sub],
precedence: 1,
show: '-'
}
]
I'm using the latest TailwindCSS version.
Here is the relevant part of my webpack.mix.js :
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
let tailwindcss = require('tailwindcss');
mix.postCss('resources/css/tailwind.css', 'public/css/soumettre202101.css', [
tailwindcss('./tailwind.config.js'),
]);
I don't even know where to start. I don't know what's causing this.
Any lead will be appreciated!
I can remove the output by disabling this core plugins (in my tailwind.config.js) :
module.exports = {
corePlugins: {
space: false,
ringWidth: false,
ringColor: false,
ringOffsetWidth: false,
ringOffsetColor: false,
ringOpacity: false,
divideOpacity: false,
divideColor: false,
divideWidth: false,
}
}
Even more strange : if I only disable "space", the output changes from the one above to the same thing but with --tw-ring-width-reverse, as if the last plugin used produces the output...
I'm not sure if that helps, but I will show you my config that seems to be working fine (using Sass), I removed some irrelevant parts.
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.sass('resources/sass/tailwind.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./resources/tailwind.config.js') ],
})
.version();
tailwind.scss
#import "~tailwindcss/base";
#import "~tailwindcss/components";
#import "~tailwindcss/utilities";
and finally tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
purge: {
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.js',
],
defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
},
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
colors: {
// some custom colors
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
bluegray: colors.blueGray,
orange: colors.amber,
teal: colors.teal,
pink: colors.pink,
green: colors.green,
},
},
},
variants: {
gridColumn: ['responsive', 'hover'],
gridColumnStart: ['responsive', 'hover'],
gridColumnEnd: ['responsive', 'hover'],
},
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('#tailwindcss/forms'),
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
When I run nom run dev everything seems to be fine, there is no output like you showed but I have things like this:
.space-y-11 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
}
Obviously later only those that are really used in blade/js files are in final file when I run npm run prod
The problem has been solved by ugrapding Laravel Mix to the latest version.
I am trying to integrate CKEditor5 in my Aurelia Application but no sucess.I tried many guides but getting no success.I tried CKEditor official guides too like as
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html
App.ts
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
export class App {
constructor(){
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic ],
toolbar: [ 'bold', 'italic' ]
} )
.then( editor => {
console.log( "Editor Initialized",editor );
} )
.catch( error => {
console.error( error.stack );
} );
}
}
app.html
<template>
<h1>${message}</h1>
<div >
<textarea name="editor" id="editor" cols="39" rows="21"></textarea>
</div>
</template>
WebPack.config
By official guide of CKEditor about webpack i was getting errors of loaders after some search i found a helo on github and did some modification in code like as
rules: [
{
// Or /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/ if you want to limit this loader
// to CKEditor 5 icons only.
test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: [ 'raw-loader' ]
},
{
// Or /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/ if you want to limit this loader
// to CKEditor 5 theme only.
test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '#ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
},
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? [{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
] : ['style-loader', ...cssRules]
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.ts$/, loader: "ts-loader", options: { reportFiles: [ srcDir+'/**/*.ts'] }, include: karma ? [srcDir, testDir] : srcDir },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
...when(coverage, {
test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i],
enforce: 'post', options: { esModules: true },
})
]
},
Now in console getting no error and CKEditor classes are also showing when inspecting DIV editor class but on View HTML showing no editor and seeing blank page.Kindly do help about this.
Your ckeditor create code cannot be in constructor.
The constructor of app runs before the dom was created, so it could not find '#editor'.
Move your editor create code to attached() callback.
attached() {
ClassicEditor.create...
}
I tried to add Quill Emojis to editor but I am getting console error as
Uncaught ReferenceError: Quill is not defined
I am using Laravel 5.6 and vue js and definately new to vue and its components so I may sound silly to you but for the past 3 days I am searching on the google for the solution and even contacted author of vue2editor on github here is the link
This is what I have tried so far:
vue2editor.vue
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor, Quill } from 'vue2-editor';
import Emoji from 'quill-emoji/dist/quill-emoji';
Quill.register('modules/quill-emoji', Emoji);
export default {
name: 'vue2editor',
components: { VueEditor },
data() {
return {
content: "<h1>Some initial content</h1>",
editorSettings: {
modules: {
toolbar: {
container: [
[{'size': ['small', false, 'large']}],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video'],
['emoji'],
],
handlers: {
'emoji': function () {}
},
},
toolbar_emoji: true,
short_name_emoji: true,
textarea_emoji:true,
},
},
text: null,
};
},
};
</script>
I even tried the method mentioned by one of the user on github for Quill-Emoji, here is the link.
I came here with lots of hopes; if anyone here is to help me out, at least tell me what I am missing will be more than a help for me.
Quill.register({
'formats/emoji': Emoji.EmojiBlot,
'modules/short_name_emoji': Emoji.ShortNameEmoji,
'modules/toolbar_emoji': Emoji.ToolbarEmoji,
'modules/textarea_emoji': Emoji.TextAreaEmoji}, true);
you need register the model, add the up code to you code.
Edit:
//1) Add plugin to laravel mix
const mix = require('laravel-mix')
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
"window.Quill": "quill/dist/quill.js",
Quill: "quill/dist/quill.js"
})
]
};
});
//2 example vue file
<template>
<div class="mt-1">
<vue-editor
ref="editor"
v-model="content"
:editor-toolbar="customToolbar"
:editorOptions="editorSettings"
/>
</div>
</template>
<script>
import { VueEditor, Quill } from "vue2-editor";
import Emoji from "quill-emoji/dist/quill-emoji";
Quill.register("modules/emoji", Emoji);
export default {
components: {
VueEditor,
},
props: {
bubble: Object,
contentCol: {
type: String,
},
},
data() {
return {
edit: false,
content: "<b>Content is here</b>",
customToolbar: [["bold", "italic", "underline"], ["link"], ["emoji"]],
editorSettings: {
modules: {
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
},
},
};
},
beforeDestroy() {},
};
</script>
<style src="quill-emoji/dist/quill-emoji.css"/>