CKEditor5 failing to build with additional plug ins - ckeditor

I'm struggling with CKEditor and perhaps some of you may be able to help me, please...
Summary
I'm attempting a custom build of CKEditor5 by following this guide - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html - The idea is to include plugins which aren't in the standard builds.
When I build the CKEditor build, push back to Github and then try and install the editor into my nodejs app (npm install from Github), the editor works, but without the plugins I've added.
Environment
Windows 10 Pro (20H2)
NVM installed to manage node versions
Node 14.6.0 used for CKEditor54 build
Node 10.22.0 used for NodeJS Project (latest supported version in the paltform I am developing for)
Steps Taken
Fork the CKEditor5 repo.
Clone the repo to my desktop using git clone -b stable https://github.com/<MyGithubUsername>/ckeditor5.git.
Navigate to the build directory cd D:\_source\ckeditor5\packages\ckeditor5-build-classic.
Run npm install.
I install the Font plug in to use it in this build: npm install --save-dev #ckeditor5/ckeditor5-font.
I then update the build configuration by adding to src/ckeditor.js:
import Font from '#ckeditor/ckeditor5-font/src/font';
ClassicEditor.builtinPlugins = [ ..., Font]
ClassicEditor.defaultConfig = { toolbar: { items: [' ..., fontColor, fontBackgroundColor'] } }
At this point, the guide says you should run yarn run build, but i can't get Yarn to work in this dev environment for love nor money, so instead I use npm run build.
I test the build by opening sample/index.html in the browser and it looks fine; the Font plugin is loaded and the toolbar items appear.
I then use Git to stage the changes, then I Commit and Push to my cloned repository.
In the Nodejs project where I want to use ckeditor, I install the custom build using npm install <MyGithubUsername>/ckeditor5#stable
To the project I add import ClassicEditor from '#ckeditor/ckeditor5-build-classic/build/ckeditor';
The editor appears as you would expect it to, but without the Font plug in.
Back over in the CKEditor local repo, when I take a look at the ckeditor5\packages\ckeditor5-build-classic\build\ckeditor.js.mapand search for ckeditor5-font I find many instances of it, indicating that it has indeed included it into the build. When I look at the same file in my Nodejs project D:\_source\NodeJsProject\node_modules\#ckeditor\ckeditor5-build-classic\build\ckeditor.js.map there's no sign of ckeditor5-font; the sample.html in the NodeJS project works, but does not show the Font additions, nor do they show in the implementation in my project.
I find my waround pretty well, but I am far from being a pro front-end developer and this has me stumped.
Any help or guidance is greatly appreciated.

Hello i have created demo video of ckeditor5 in angular that cover custom build from github and online builder
https://youtu.be/HsjCkvEvQhA
Tip. try to remove some plugin then it will work . remove one plugin at time and build and check it, this way you will find out which plugin creating issue
some plugin create conflict so you have to remove it .

Related

How do I install vuetify directly from github?

When I try with
npm install vuetifyjs/vuetify#v1.5.2
I get "Cannot find package".
UPDATE:
There is a packages folder under which there is a vuetify directory.
I tried npm installing that folder. Everything appeared to go well until I started the dev server.
Now in the console log I see:
[Vuetify] Multiple instances of Vue detected
Seems to be related to https://github.com/vuetifyjs/vuetify/issues/4068 but I cannot tell what the solution is at this point.
I had the same issue to use my own version of Vuetify, waiting for my pull request being accepted.
Here what I did:
I build the vuetify project with my fix.
yarn
yarn build
Then I took the content of 'packages/vuetify' and put it in a new git repository. I remove the .gitignore to be able to commit built files (/es5, /lib, /lib-temp, /dist)
Finally I add this git repository to my project to replace my vuetify version:
npm install git+https://gitlab.com/GITLABUSERNAME/REPOSITORYNAME.git
Looking at the package.json file, the package doesn't have a name property, which it would need to have for you to be able to install it from GitHub.
So the short answer is that you can't install vuetify directly from GitHub via npm.
However, you can install it directly from npm:
npm install vuetify#1.5.2
You can't install vuetify directly from GitHub but you can edit code in 1 component node_modules/vuetify/lib/components/VSlider/VSlider.js Then, you install patch-package and execute path package vuetify Delete node modules and execute yarn to create new node modules Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package

nativescript 5.1 and tns_modules folder in IOS build

I had this issue before with some app (N 4.1).
Now i'm doing another app, and i have the same issue :
First, im preparing build:
tns build ios --for-device --release --provision MY_Provision
Nativescript is doing build, so next i'm opening it in XCode, and doing some twaks like version number etc...
Lastly i'm doing "Archieve" and trying to Validate this archieve.
The result is error, in the previous app written in N 4.1 i had the same but with another plugin, and now validation throws: Invalid build structure - binary app/rns_modules.fstevents.lib/binding/Release/FILE NAME.
many errors regarding this folder.
So i've just removed this directory and done another archieve and validation - app passed the validation.
So, my question is - do i need such number of plugins in tns_modules ?
Or better question - is there any way to determine what is not needed ?
Or, am i doing something wrong when building an app ? As seems massive number of directories here and i'm wondering if maybe there is some kind of cleanup or something ?
For now, the only way to store an app is to validate first, check what is blocking validation, delete this, check if app works (:() and try again.
Thank you.
Below, attached, folder that is blocking validation and amount of dirs inside of tns_modules.
pacakge.json:
NativeScript CLI will prepare (i.e. copy) all packages declared in the dependencies section of your package.json (and their dependencies) in tns_modules. All devDependencies and their dependencies will not be copied to the native Xcode/Android Studio project.
So, all packages that are required only for building the application, should be installed as devDependencies. For example, such packages are nativescript-dev-webpack, nativescript-dev-typescript, etc.
Also, it looks like you have installed NativeScript CLI as a dependency of your project. By default, it should be installed globally, i.e. npm i -g nativescript. In case you omit the -g flag, npm will install it as dependency of your project.
You can try:
rm -rf platforms
npm un --save nativescript
Check package.json for other packages with -dev in their names and ensure they are in the devDependencies section.
After that run tns build ios --forDevice.

See the difference between a clean laravel install and my code

I have a laravel app in which I want to see the added/changed files
How can I compare my Laravel project to a clean Laravel installation? Is there some software that can achieve this or should I write a script?
I doubt theres something like that specifically for Laravel. However, what you can do is to use Version Control (git) to help if your plan is to compare these 2 projects (Fresh install vs Project)
https://git-scm.com/
I'd do the following steps:
Create a git repo
Place a fresh laravel install on the repo
git add . and create a commit
Replace the whole directory with the new project
View with git diff (SourceTree would help you)
Git diff would give you what files are changed (in regards to the fresh install) and what differs in code. Beware that since we're talking about a Laravel project with a lot of content and a fresh install, it will give a lot of files changed.

Swagger Editor offline installation

Our company is using swagger to document their API's, currently a couple of developers are using the online swagger editor on their PC's.
I want to move this piece of the design process into our standard development environment, which is in a walled garden without internet access.
How do I go about installing npm and the swagger editor in an offline environment?
There are options to use either RHEL or Windows machines, although Windows is preferable as developers have local admin rights
In short answer is https://swagger.io/docs/swagger-tools/#swagger-editor
git clone https://github.com/swagger-api/swagger-editor.git
cd swagger-editor
npm install
npm run build
npm start
And it will works in your Intranet OK.
npm is not required, you can download the compiled files from the Swagger Editor repository:
index.html
dist\*
and open index.html locally (from the file system) or put the files onto a web server in your network.
With one command with npm/npx:
npx swagger-editor-binary
Download the one of the source releases from swagger-editor's github page (click releases link on the page)
unzip the downloaded source release zip/tar file.
cd into the extracted source dir, type 'npm install' (or if you have some npm mirror module installed, such as cnpm, use 'cnpm install' instead)
Use a browser to open index.html file in the source dir. Or, follow official guide the 'Setup with http-server module from GitHub' section to serve from a local static web server.
PS. You don't need to build the source code unless you want to contribute as written in the 'Contribute' section of the official document.

Build React Native project after pulling from GitHub

My friend initialized a GitHub repo after initializing React Native in a certain directory. After I pull his files into a directory and initialize a local repository on my computer and run the XCode project, there seem to be a lot of missing files and the build fails. There's probably something I need to do which is taken care of when setting up react native in the "react-native init AwesomeProject" step, but I'm not trying to set up a new project. Instead, I want to keep the files he's already developed, but set up the React Native "environment"..how would I go about doing this?
You need to install the dependencies through npm. Just enter the following command in the root directory of your project:
npm i

Resources