I am trying to integrate CKEditor version 5 into Angular 5 application. I created a component and imported required packages. I can compile perfectly fine CKEditor using Webpack using same code, however I fail todo so inside Angular. I get weird parser error for svg paths.
Error Screenshot:
https://www.dropbox.com/s/xwoas03fd4q7gks/Screenshot%202017-12-13%2011.55.45.png?dl=0
My Component looks like:
import { Component, AfterViewInit, ChangeDetectionStrategy, ViewChild, ElementRef, ViewEncapsulation, Input, Output, EventEmitter } from '#angular/core';
// Required Dependencies for library construction
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';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '#ckeditor/ckeditor5-link/src/link';
import List from '#ckeditor/ckeditor5-list/src/list';
import Heading from '#ckeditor/ckeditor5-heading/src/heading';
import GFMDataProcessor from '#ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
#Component({
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.None,
selector: 'ten-ckeditor',
styleUrls: ['./ckeditor.component.scss'],
templateUrl: './ckeditor.component.html',
})
export class CkeditorComponent implements AfterViewInit {
#Input() content: string;
#Output() contentEdited: EventEmitter<string>;
#ViewChild('editor') editor: ElementRef;
constructor() {
}
ngAfterViewInit() {
function Markdown( editor ) {
editor.data.processor = new GFMDataProcessor();
}
console.log(List);
ClassicEditor.create(this.editor.nativeElement, {
plugins: [
Markdown,
Essentials,
Paragraph,
Bold,
Italic,
Heading,
BlockQuote,
Link,
List
],
toolbar: [
'headings',
'bold',
'italic',
'blockquote',
'link',
'numberedList',
'bulletedList'
]
})
.then(editor => {
console.log('Editor was initialized', editor);
editor.setData(this.content);
})
.catch(error => {
console.error(error.stack);
});
}
}
This is what I get when I inspect HTML inside application when I target Icon.
<svg class="ck-icon" viewBox="0 0 20 20"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Document is empty
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></svg>
My icons weren't working either. I had something like this in my webpack config:
{
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
},
],
},
}
So I removed the '|svg' part, and then added:
{
test: /\.svg(\?.*)?$/,
loader: 'raw-loader',
},
And it works for me.
Related
I'm having quite a tussle with my code. I've deployed FullCalendar v5 as a Vue 3 component inside a laravel 9 site using Breeze for authentication and Inertia for speedy rendering. I have the Calendar/Pages/Index.vue displaying the calendar and updating events on the calendar with modals from the example, but I cannot manage to get the modals to create events in the database, nor get the events from the database table to display on the calendar. I'm trying to avoid Ajax and use axios to retrieve a JSON feed.
Here's the part of my controller that creates the JSON feed:
public function showEvents(Request $request) {
$event = Event::get(['title','acronym','city','venue','value','start','end']);
return response()->json(["events" => $event]);
}
Here's what the JSON feed returns:
{"events":[{"title":"Test","acronym":"TST","city":"Denver","venue":"Big Venue","value":"$0","start":"2022-10-25 00:00:00","end":"2022-10-28 00:00:00"}]}
And here's my rather massive Calendar/Index.vue:
<template>
<head title="Dashboard" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Resource Calendar Timeline
</h2>
</template>
<div class="py-12">
<div class="max-w-10xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-12 bg-white border-b border-gray-200">
<!--start calendar-->
<div class='demo-app'>
<div class='demo-app-main'>
<FullCalendar
class='demo-app-calendar'
:events="calendarEvents"
:options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</div>
<!--end calendar-->
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<!--start calendar-->
<script setup lang='ts'>
import BreezeAuthenticatedLayout from '#/Layouts/AuthenticatedLayout.vue';
import { head, Link } from '#inertiajs/inertia-vue3';
import '#fullcalendar/core/vdom'; // solves problem with Vite
import { defineComponent } from 'vue';
import FullCalendar, { CalendarOptions, EventApi, DateSelectArg, EventClickArg } from '#fullcalendar/vue3';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import listPlugin from '#fullcalendar/list';
import interactionPlugin from '#fullcalendar/interaction';
import axios from 'axios';
</script>
<script lang='ts'>
const Demo = defineComponent({
components: {
FullCalendar,
},
data() {
return {
// trying to pull events from DB json -->>
eventSources: [{
url: 'https://l9-v3-breeze-crud.ddev.site/show-events', // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}],
calendarEvents: [{
events(title, start, end, callback) {
axios.get('https://l9-v3-breeze-crud.ddev.site/show-events').then(res => {
callback(res.data.events)
})
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'red',
textColor: 'white',
}],
//end events pull from DB -->
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
listPlugin,
interactionPlugin // needed for dateClick
],
headerToolbar: {
left: 'promptResource prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
},
initialView: 'dayGridMonth',
events: this.getEvents,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect,
eventClick: this.handleEventClick,
eventsSet: this.handleEvents
} as CalendarOptions,
currentEvents: [] as EventApi[],
}
},
methods: {
getEvents(info, successCallback, failureCallback) {
events(start, end, timezone, callback) {
axios.get('http://localhost:8000/show-events').then(res => {
callback(res.data.eventList)
})
})
},
handleWeekendsToggle() {
this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
},
handleDateSelect(selectInfo: DateSelectArg) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay
})
}
},
handleEventClick(clickInfo: EventClickArg) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events: EventApi[]) {
this.currentEvents = events
},
}
})
export default Demo
</script>
<style lang='css'>
h2 {
margin: 0;
font-size: 16px;
}
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
li {
margin: 1.5em 0;
padding: 0;
}
b { /* used for event dates/times */
margin-right: 3px;
}
.demo-app {
display: flex;
min-height: 100%;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
.demo-app-sidebar {
width: 300px;
line-height: 1.5;
background: #eaf9ff;
border-right: 1px solid #d3e2e8;
}
.demo-app-sidebar-section {
padding: 2em;
}
.demo-app-main {
flex-grow: 1;
padding: 3em;
}
.fc { /* the calendar root */
max-width: 1200px;
margin: 0 auto;
}
.fc-day-today
{
background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
}
.fc-day-sat, .fc-day-sun
{
background-color: var(--fc-today-bg-color, rgba(255, 100, 40, 0.15));
}
</style>
I'm stumped! Either I pull an empty array for events with
events[]
or I get a 500 error denoting that "Module source URI is not allowed in this document: “http://[::1]:5173/resources/js/Pages/Calendar/Index.vue" when I try the axios.get URL
and, not matter what I try, I can't seem to get it to pull the 'calendarEvents' options from
calendarEvents: [{
events(title, start, end, callback) {
axios.get('https://l9-v3-breeze-crud.ddev.site/show-events').then(res => {
callback(res.data.events)
})
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'red',
textColor: 'white',
}],
Additional Information:
I've been continuing to look for a solution and found several online demo's that resolve the issue at hand, but none with my particular project dependencies. Being a newbie at this, I'm just not certain on how to merge the code. In particular, the structure of the Calendar/Index.vue file taken from the http://fullcalendar.io Vue3 and TypeScript demo here https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue3-typescript And in the app.js file from this demo https://www.positronx.io/how-to-display-events-in-calendar-with-laravel-vue-js/
My app.js is complicated by the installation of Ziggy and Inertia and I'm not certain how to construct the Vue rather than a blade. Here's my app.js:
import './bootstrap';
import '../css/app.css';
//import { ZiggyVue } from 'ziggy-vue';
//import route from 'ziggy';
import { createApp, h } from 'vue';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
Ok, I figured out how to use axios to retrieve events from the JSON feed. The issue wasn't in the app.js routes, but rather in the actual Vue component itself.
Previously unmentioned, here is the route that constructs the JSON feed of events:
Route::get('show-events', [CalendarController::class, 'showEvents']);
Here's the part of my controller that generates that JSON feed for events from the database:
public function showEvents(Request $request) {
$event = Event::get(['title','acronym','city','venue','value','start','end']);
return response()->json(["events" => $event]);
And here's the method part of the Vue component that retrieves events from the JSON feel and publishes them to the calendar:
methods: {
getEvents() {
axios.get('show-events')
.then(response => {
this.calendarOptions.events = response.data.events;
});
},
I want to use SCSS in my Svelte application. For this purpose I decided to use svelte-preprocess package. So, this is the App.svelte component :
<script>
</script>
<main>
<h1 class="boom">Hello world!</h1>
</main>
<style type="text/scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
.boom {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
}
#media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
This is the list of dependencies inside of package.json file:
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"#rollup/plugin-replace": "^2.3.4",
"node-sass": "^5.0.0",
"rollup": "^2.34.0",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.30.0",
"svelte-preprocess": "^4.6.1"
And this is the rollup.config.js file:
import svelte from 'rollup-plugin-svelte';
import commonjs from '#rollup/plugin-commonjs';
import resolve from '#rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
// import css from 'rollup-plugin-css-only';
import serve from 'rollup-plugin-serve';
import replace from '#rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';
const isDevelopment = process.env.APP_ENV === 'development';
export default {
input: 'src/index.js',
output: {
sourcemap: false,
format: 'iife',
name: 'app',
file: 'public/js/bundle.js'
},
plugins: [
svelte({
compilerOptions: {
dev: isDevelopment,
},
preprocess: sveltePreprocess(),
}),
// css({output: 'bundle.css'}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
replace({
IS_DEVELOPMENT: isDevelopment,
}),
isDevelopment && serve({
contentBase: 'public',
historyApiFallback: true,
host: '0.0.0.0',
port: process.env.PORT || 5000,
headers: {
'Access-Control-Allow-Origin': '*',
},
}),
isDevelopment && livereload('public'),
!isDevelopment && terser(),
],
watch: {
clearScreen: false,
},
};
I followed instructions from that package, but when I try building my application I get this error in the console:
rollup v2.34.0
bundles src/index.js → public/js/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/cmp/App/index.css (1:13)
1: main.svelte-1xjph0n.svelte-1xjph0n{text-align:center;padding:1em;max-width:240px;margin:0 auto}main.svelte-1xjph0n .boom.svelte-1xjph0n{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}#media(min-width: 640px){main.svelte-1xjph0n.svelte-1xjph0n{max-width:none}}
^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
I guess it's a problem with rollup configs or version of some dependency. But how to understand it and how to solve this issue?
The issues lies in you commenting out the line css({output: 'bundle.css'}), in rollup.config.js, with the line present everything works.
I want to change the text color in a kendo-numerictextbox for KendoUI for Angular.
The style attribute has no effect. With Jquery we can change the style but how can we do this in KendoUI for Angular ?
<kendo-numerictextbox class="form-control"
[decimals]="1"
[spinners]="false"
[format]="'n1'"
tabindex="{{i}}"
style="font-size:12px; padding:1px; color:red"
[formControlName]="item.Index" >
</kendo-numerictextbox>
import { Component } from "#angular/core";
#Component({
selector: "my-app",
template: `
<style>
::ng-deep .k-numerictextbox .k-numeric-wrap .k-input {
color: red;
}
</style>
<kendo-numerictextbox
[value]="value"
[min]="0"
[max]="100"
[autoCorrect]="autoCorrect"
style="font-size:12px; padding:1px;"
>
</kendo-numerictextbox>
`
})
export class AppComponent {
public autoCorrect: boolean = false;
public value: number = 5;
}
I am trying to execute kendo ui multiselect some what like code below.But i need to change the background color of selected item from red color to some other color.I tried giving custom css in popupsettings but still it is not working.
Most googled answers are in jquery but i need it in angular 4.Could you please help me out
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<p>Custom values are <strong>enabled</strong>. Type a custom value.</p>
<p>primitive data</p>
<div class="example-wrapper">
<kendo-multiselect
[data]="sizes"
[value]="selectedSizes"
[allowCustom]="true"
(valueChange)="onSizeChange($event)"
>
<ng-template kendoMultiSelectCustomItemTemplate let-customText>
<strong>{{ customText }}</strong>
</ng-template>
</kendo-multiselect>
</div>
`
})
export class AppComponent {
public sizes: Array<string> = [ "Small", "Medium", "Large" ];
public selectedSizes: Array<string> = [];
public onSizeChange(value) {
this.selectedSizes = value;
}
}
Add the following CSS to your component:
::ng-deep .k-item.k-state-selected {
background-color: green !important;
}
This is kendo solution.
:host ::ng-deep .k-state-selected {
background-color: green !important;
}
url: https://www.progress.com/blogs/options-for-styling-components-in-kendo-ui-builder
I am having big problems applying classes to my ul elements in React using SCSS and Webpack 4. I have upgraded my project to Webpack 4 ( #yesiamstupid )
If I taget a type of element (ul) it works.
My own class "navMenu" is never applied, though.
I can see the class in the web developer tools --> styles.scss
I expect the text background to be blue in the navigation.
[ app.js ]
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
const jsx = (
<Provider>
<AppRouter />
</Provider>
);
ReactDOM.render(jsx, document.getElementById('app'));
[ AppRouter.js ]
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={StartPage} exact={true} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
[ StartPage.js ]
import React from 'react';
const StartPage = () => (
<div>
Hello
</div>
);
export default StartPage;
[ Header.js ]
import React from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => (
<header>
<h1>Test WP4</h1>
<ul className="navMenu">
<li><NavLink to="/" activeClassName="is-active" exact={true}>Here we are</NavLink></li>
<li><NavLink to="/undefined" activeClassName="is-active" exact={true}>This route is undefined</NavLink></li>
</ul>
</header>
);
export default Header;
[_base.scss]
html {
font-size: 62.5%;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: $m-size;
}
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
.is-active {
font-weight: bold;
}
[ _settings.scss ]
// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;
[ _header.scss ]
ul {
list-style-type: circle;
}
.navMenu {
text-align:center;
background:blue;
padding-top:400px;
}
[ styles.scss ]
#import './base/settings';
#import './base/base';
#import './components/header';
[ webpack.config.js ]
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = () => {
return {
watch: true,
//mode: 'development',
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'), //absolute path
filename: 'bundle.js' //name is whatever you want
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.svg$/,
loader: 'raw-loader'
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
//chunkFilename: "chunk.css"
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'), //absolute path
historyApiFallback: true, //go to index if path not found
publicPath: '/dist' //specify where bundle files liveY
}
};
}
I recommend you to split your tests for css and scss files.
In your code you are using sass-loader for css. Instead use something like this:
{
test: /\.css$/,
include: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.(sa|sc)ss$/,
exclude: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
},