I am trying to use CKEditor for strapi project, but failing to integrate.
What I did so far:
strapi new cms --quickstart It is starting me new cms application.
npm install ckeditor
Edit the code located at ./plugins/content-manager/admin/src/component/Edit/index.js to CKEditor implementation
npm run build to see my changes, tried npm run setup too
But here I'm getting error webpackJsonp is not defined
I'm not providing the code how I modified, because, build command is not reaching till there.
I appreciate any help you can provide
In order to change the default WYSIWYG in Strapi you will need to
Fork the repository check out the CONTRIBUTING GUIDE
Once you have the development setup you can directly modify the code in packages/strapi-plugin-content-manager/admin/src/components/WYSIWYGWithErrors and its related children. Install the dependency in strapi-admin
Uninstall the content manager plugin (again make sure you are running the latest version of Strapi
Copy the strapi-plugin-content-manager package inside your app's plugin folder (rename it content-manager)
Copy the following file in my-app/admin/src/plugins.js and change the paths of the plugins so it matches your new one
run yarn develop
Related
It may be a dumb question but I feel that I'm floundering around attempting to edit the wordpress plugin that I downloaded from github repo: https://github.com/WordPress/gutenberg-examples.
Right now, I'm following the block tutorial from https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/.
So what I did:
download the pre-built plugin in zip folder
upload it to wordpress site that I created in docker (https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/)
open the zip folder and move it to my plugins directory
open, for example, "01-basic-esnext" folder inside the gutenberg-examples folder and edit in block.build.js. The changes I made would be shown in the block editor in the wordpress post that I created.
However, what I'm confused about is the npm stuff that's mentioned in "Development" section.
For each of the examples that include an esnext example the following
commands are required to build the plugins:
To install the node packages
npm install
To build the production version of the plugin
npm run build
To build a development version, change to the local
directory of the block you are working on, and run npm start to watch
for changes and automatically rebuild as you develop.
cd 01-basic-esnext/
npm start
Before that, the "Development" section already mentioned building a docker/wordpress environment for the plugin right inside the gutenberg-examples folder.
However, the way I set up my stuff is different. I already have a docker running in my wordpress folder like what I followed in https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/ and this plugin is already in my plugins directory. I can easily edit the files in visual studio code and see the changes in my local wordpress site.
So should I be doing something to install the npm stuff or leave it alone?
npm is used for these WordPress plugins because the -esnext versions of the examples get built from Javascript modules. The build process runs on npm and nodejs. That means, if you work on that -esnext code, that you're living in a hybrid world -- you have php and apache running your development web server, and you have nodejs and npm handling your builds.
The WordPress team carefully rigged a docker setup to support the process of edit / run for you. So if you use your own docker setup, you won't get the benefit of theirs.
When you have finished your development effort, you can use npm run build to build a .zip file which you can then install in your own WordPress instances using the Upload Plugin button at the top of the Add Plugins page.
Code is poetry, for sure. But development environments are not.
i use strapi and i want to change the default text editor with the ckeditor5 classic.
On the strapi website is a guide how to configure the default ckeditor5 classic for strapi.
Strapi Guide
But there are some important tools missing so I want to build my custom fork of the ckeditor5 classic package.
I started with the ckeditor5 online builder. Downloaded the build package and want to import it in the strapi project.
Online Builder
My problems starting here.
First of all, how I can use a downloaded package in a project instead of download it over npm/yarn?
Package Structure:
build
sample
src
Licsence
package.json
webpack.config
I saw that package has no main command in the package.json. So an import in a node.js file to this package doesn't work. Here is my question, is this package i build with the online generator intended for usage in a node project?
Look at the truth, I don't know very well, I'm not an expert on the subject yet ... I'm really new and I'm working with strapi, but as I see these plugins have an install command with NPM. Example:
enter image description here
Try to download the plugins by NPM or Yarn and then import them as they say in this post: Customizing CKEditor for Strapi gives "ckeditor-duplicated-modules" error
I would like to have repository with default NPM modules and its configs for all future NPM projects.
For now the configs consists of tsconfig.json, tslint.json, .prettierrc.
The goal is to have a simple way for creating new project with custom defaults and also have possibility of changing configs for all of these projects from one place.
I tried to create my own NPM module with package.json containing dependencies I want to have in all my new projects and its configs in root. The problem is obvious - if I install this package into new project, modules (and configs) are scoped to my custom module and not to my newly created project.
Does anyone has any idea how to deal with this?
You are basically making a boilerplate. Do develop it, I see two possible approcches:
Publish the boilerplate as NPM module.
Build and publish the boilerplate on your repository provider (Github, Bitbucket etc) and use it as starting project to be forked for every new project you build.
I will suggest you to follow the second approach, that's easier to achieve.
You are instead tryng to follow the first approch that's more tricky. To generate a starting project you should build a CLI (Command line interface). So you will build an NPM module that should be globally installed and that you will use with a set of commands like:
myawesomecli generate my-new-starting-project
And the myawesomecli module will generate a my-new-starting-project folder containing your boilerplate. You could optionally ask to the user for settings to be selected in an interactive session. That's what famous framework like React, Vue.js, Angular etc. are doing.
You can follow this tutorial to build a CLI that generates boilerplates. Keep in mind that the inquier module is the key module for such scopes.
I find various different approaches to updating packages using node. I am trying to update using the package.json packages in Visual Studio 2017 Community, when using their SPA Angular site.
Can anyone confirm the 'correct way' of doing this.
For example, I am trying to update to bootstrap v4 on this project. So i have changed the entry in the `package.json' to be;
"bootstrap": "4.0.0",
I have then tried the following;
Right-clicking package.json -> restore packages (this then runs a background task I can see this from the icon in the bottom left hand corner of the screen) and get 'Installing Packages Complete' once the task has run.
(Does this invoke npm update?)
I have also tried running the cmd `npm update --save/--save-dev1 in the package command console (I get the same response as above regarding a background task being run and then completed).
I assume the packages will be downloaded and stored in the node_modules folder in the project directory? In which case it appears the packages are not updating? As I have navigated to the node_module/bootstrap and when I look at the .js in the dist folder of the package it is still referencing 3.3.7?
I have tried deleting the entire contents of the node_modules folder and then the 2 above commands (which does repopulate, but with the same modules??).
Also to add if I navigate (in the solution explorer) to depedencies -> npm 3.3.7 of bootstrap is referenced here also.
I am also attempting to update angular to v6 as well, again unsuccessfully and v4 is still referenced everywhere (even though the package.json is updated.)
I am running the standard template for core 2 with angular 4 spa with Visusal Studio 2017 community edition.
Can someone explain the process and what I am doing wrong here please?
Edit - Update
I have managed to get singular packages to update, by right clicking the package in the solution explorer under dependencies -> npm -> .
this then runs another background task, but it then updates the package to match that what is in the package.json file?
It works at least, but surely there must be an easier way??
I'm trying to figure out how to reconcile some Cordova + git "best practices" with what I think is reality, and I'm hoping someone can shed some light on this for me.
If I understand correctly, the current "best practice" is to add these directories to my .gitignore (from the book "Developing with Cordova CLI", the current version):
platforms/
plugins/
node_modules/
This removes the easily downloadable plugins and mostly boilerplate platform code from version control because it can be easily generated with a simple Cordova CLI command.
But, this seems counter-intuitive because - and I'm thinking like NPM or Bower - with the Cordova CLI I can't save which platforms and plugins I'm using in a config file. With NPM, I can add a --save switch to save the package in the package.json file. This allows me to not version control my node_modules folder and instead use 'npm install'. With the Cordova CLI I can't seem to use the --save switch (is there an equivalent) to 'remember' the plugins or platforms I intend to use.
It seems that the config.xml file in the www/ directory doesn't save which platforms or plugins have been added.
Is there some other file in the project that keeps a memory of which platforms and plugins I want to use? How does it work?
Cordova 4.3.0 + allows you to save and restore platforms and plugins. Saved information is stored in config.xml file. See v5.0.0 release notes and the official Cordova docs.
You can save platforms and plugins using the --save option when you add them:
cordova platforms add PLATFORM --save
cordova plugins add PLUGIN --save
Or you can save platforms and plugins that are currently added:
cordova platforms save
cordova plugins save
By doing this there is no need to check in platforms or plugins into your code repository. They will be automatically restored based on your config.xml file when cordova prepare command is run.
I typically write a hook to capture the plugins I want to use in my project. You can see this in an article I wrote here: http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
With the new modular architecture of Cordova 3.x, every app needs plugins, even to use basic functionality such as logging or geolocation. Rather than document which plugins/features your project needs and ask each new developer to install them, download and install them automatically with a hook in the after_platform_add step. Using this plugin, every time a developer checks out the project and adds a platform, they automatically have the required plugins.
You also may be interested in following along with this bug, which suggests npm style --save functionality: https://issues.apache.org/jira/browse/CB-5775
Platforms are a little more difficult because they don't fit into the hook architecture, but you could write a shell script which you could execute to add your platforms.
#!/bin/sh
for plat in ios android; do
cordova platform add $plat
done
You could do something similar with the version of cordova you have installed in node_modules (at least that is what I think you are installing in node_modules)--have shell script to get the correct version of cordova:
#!/bin/sh
VERSION=3.3.1-0.4.2
npm install cordova#$VERSION
PS Glad you liked the book!