I tried to integrate CK Editor 5 in my sapper project as below :
<script>
import { onMount } from 'svelte';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
onMount( () => {
ClassicEditor.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
});
</script>
<textarea id='editor'></textarea>
And I got the following error :
ReferenceError: window is not defined
at Object. (F:\project\node_modules#ckeditor\ckeditor5-build-classic\build\ckeditor.js:5:3314)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module.load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1036:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (F:\project_sapper\dev\server\server.js:8:1)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
Server crashed
How to properly integrate CK Editor 5 in sapper/svelte3 project?
You need to use a dynamic import since there is no window on the server.
<script>
import { onMount } from 'svelte'
let ClassicEditor
onMount(async ()=> {
const module = await import('#ckeditor/ckeditor5-build-classic')
ClassicEditor = module.default
ClassicEditor.create( document.querySelector('#editor') )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
})
</script>
<textarea id='editor'></textarea>
Related
Hello i need help to add VueGoogleMaps from #fawmi/vue-google-maps
i got confused on how to add that to may laravel inertia vue project.
this is my app.js configuration and still not working.
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "#inertiajs/inertia-vue3";
import { InertiaProgress } from "#inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { createPinia } from "pinia";
import { VueGoogleMaps } from "#fawmi/vue-google-maps";
const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
const pinia = createPinia();
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(pinia)
.use(ZiggyVue, Ziggy)
.use(VueGoogleMaps, {
load: {
key: "", // i have my API key on .env GOOGLE_MAPS_API_KEY
},
})
.mount(el);
},
});
InertiaProgress.init({ color: "#4B5563", showSpinner: true });
Code on how to fix my problem.
after login success i need to show a message that the operation was successful on the nextpage
thanks for help
import {showMessage} from "react-native-flash-message";
import { NavigationContainer ,useFocusEffect} from '#react-navigation/native';
const MainScreen = ({ route, navigation }) => {
const { userId, email } = route.params;
useFocusEffect(
React.useCallback(() => {
showMessage({
message: "Welcome mr "+email,
type: "success",
});
}, [])
);
return(
<View>
<Text>aaaa</Text>
</View>
)
}
export default MainScreen;
You can use useEffect for this :-
import React, {useEffect} from 'react';
useEffect(() => {
showMessage({
message: "Welcome mr "+email,
type: "success",
});
}, []);
I'm learning how to use Vuex, and I'm trying to use it on a Laravel 8 with Inertia Stack, i'm using vue 3.
Store/index.js
import { Store } from 'vuex'
export const store = new Store({
state () {
return {
count:0
}
},
mutations:{
INCREMENT(state){
state.count++
},
DECREMENT(state){
state.count--
}
}
})
And here's my app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import Vuex from 'vuex';
import { store } from './Store'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props),store })
.use(plugin)
.use(Vuex)
.mixin({ methods: {
route,
}
})
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
But I always end up with a console error:
app.js:106250 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
I've also tried:
.use(store)
But it doesn't seem to work. I'll appreciate if someone can point me what i'm missing or what I'm doing wrong
I had this problem too with vuex 3.x.x
I did this and it worked:
npm uninstall --save vuex
Then i reinstalled it :
npm install --save vuex#next (vuex 4.x.x)
In app.js I used .use(store).
And I don't know if it change anything but in store/index.js I exported as export default new Store({...})
Store/index.js
import { createApp } from 'vue';
import { createStore } from 'vuex';
const store = createStore({
state: {
count:0
},
mutations:{
INCREMENT(state){
state.count++
},
DECREMENT(state){
state.count--
}
}
})
export default store
And here's my app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import store from '#/store/index';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props),store })
.use(plugin)
.use(store)
.mixin({ methods: {
route,
}
})
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
I tried importing vue-moment and initializing it by using .use(VueMoment) as shown below. But after i do that the whole app shows error. Anyone facing the same problem?
require('./bootstrap');
// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import VueMoment from 'vue-moment' ////////imported vue-moment
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({
methods: {
route,
validationError(field){
if(this.$page.props.errors && this.$page.props.errors[field]){
return this.$page.props.errors[field];
}
else{
return null;
}
}
} })
.use(InertiaPlugin)
.use(VueMoment) /////use vue-moment
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
This is the error i am getting
first install moment by
npm install moment
<template>
{{today}}
</template>
<script>
import moment from 'moment'
export default {
name:'Home',
data(){
return{
today:moment().startOf('day').toDate(), moment().endOf('day').toDate()
}
}
</script>
there is a working example of how to import 'vue-moment' from my Laravel + inertia project
const vm = new Vue({
metaInfo: {
titleTemplate: title => (title ? `${title} - Ping CRM` : 'Ping CRM'),
},
store,
render: h =>
h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => import(`#/Pages/${name}`).then(module => module.default),
},
}),
}).$mount(el)
Vue.use(require('vue-moment'))
Might help someone who is using InertiaJs with Vue and want to declare globally.
In app.js
createInertiaApp({
id: 'app',
setup({ el, App, props}) {
let app = createApp({
render: () => {
return h(App, props);
},
});
//you can declare any other variable you want like this
app.config.globalProperties.$moment = moment;
app.use(
store,
.....
).mount(el);
},
});
Now in the vue file you can call moment by
this.$moment(this.time,'H:m').format('hh:mm a');
I have installed npm i ckeditor4 to my stencil project and I have used it like this. But Im not getting the ckeditor, tell me where to add the script tag I am completely new to stencil
ui-editor.tsx
import { Component, h } from '#stencil/core';
#Component({
tag: 'ui-editor',
styleUrl: 'style.scss',
shadow: true
})
export class UiEditor {
render() {
return (
<div id="editor">
<p>This is the editor content.</p>
</div>
)
}
}
As said in the documentation https://www.npmjs.com/package/ckeditor4 where should I add the scripts
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>
Try removing the script tag from your index.html file. The following component will automatically add the script tag from unpkg.
Example on webcomponents.dev
import { h, Component, State, Host } from "#stencil/core";
#Component({
tag: "ck-editor"
})
export class CkEditor {
_textarea: HTMLTextAreaElement;
componentWillLoad() {
return this.appendScript();
}
componentDidLoad() {
//#ts-ignore
let editor = CKEDITOR.replace(this._textarea, {
width: "99%",
height: "300px",
});
}
private async submit() {
// #ts-ignore
console.log(
CKEDITOR.instances[
this._textarea.nextSibling.id.replace("cke_", "")
].getData()
);
}
appendScript() {
return new Promise((resolve) => {
if (document.getElementById("ckeditor-script")) {
resolve();
return;
}
const ckeditorScript = document.createElement("script");
ckeditorScript.id = "ckeditor-script";
ckeditorScript.src = "https://unpkg.com/ckeditor4#4.14.1/ckeditor.js";
ckeditorScript.onload = () => resolve();
document.body.appendChild(ckeditorScript);
});
}
render() {
return (
<Host>
<textarea ref={(el) => (this._textarea = el)}></textarea>
<button onClick={() => this.submit()}>Submit</button>
</Host>
);
}
}
You should be able to import ckeditor but I haven't tested to see how that handles in rollup. The project I was recently working on was already loading ckeditor from unpkg so we went that direction instead.