add npm/npx and strapi commands and convert to tabs elements

Signed-off-by: Kevin Pfeifer <kevin.pfeifer@sunlime.at>

docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md

@@ -1,4 +1,3 @@
-
 # Creating a new Field in the administration panel
 
 In this guide we will see how you can create a new Field for your administration panel.
@@ -11,32 +10,123 @@ For this example, we will see how to change the WYSIWYG with [CKEditor](https://
 
 1. Create a new project:
 
-```bash
+:::: tabs
+
+::: tab yarn
+
+```
 # Create an application using SQLite and prevent the server from starting automatically as we will create a plugin
 # right after the project generation
 yarn create strapi-app my-app --quickstart --no-run
 ```
 
+:::
+
+::: tab npx
+
+```
+# Create an application using SQLite and prevent the server from starting automatically as we will create a plugin
+# right after the project generation
+npx create-strapi-app my-app --quickstart --no-run
+```
+
+:::
+
+::::
+
 2. Generate a plugin:
 
-```bash
-yarn run strapi generate:plugin wysiwyg
+:::: tabs
+
+::: tab yarn
+
 ```
+cd my-app
+yarn strapi generate:plugin wysiwyg
+```
+
+:::
+
+::: tab npm
+
+```
+cd my-app
+npm run strapi generate:plugin wysiwyg
+```
+
+:::
+
+::: tab strapi
+
+```
+cd my-app
+strapi generate:plugin wysiwyg
+```
+
+:::
+
+::::
 
 3. Install the needed dependencies:
 
-```bash
-cd my-app/plugins/wysiwyg
+:::: tabs
+
+::: tab yarn
+
+```
+cd plugins/wysiwyg
 yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
 ```
 
+:::
+
+::: tab npm
+
+```
+cd plugins/wysiwyg
+npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
+```
+
+:::
+
+::::
+
 4. Start your application with the front-end development mode:
 
-```bash
-cd my-app
+:::: tabs
+
+::: tab yarn
+
+```
+# Go back to to strapi root folder
+cd ../..
 yarn develop --watch-admin
 ```
 
+:::
+
+::: tab npm
+
+```
+# Go back to to strapi root folder
+cd ../..
+npm run develop --watch-admin
+```
+
+:::
+
+::: tab strapi
+
+```
+# Go back to to strapi root folder
+cd ../..
+strapi develop --watch-admin
+```
+
+:::
+
+::::
+
 Once this step is over all we need to do is to create our new WYSIWYG which will replace the default one in the **Content Manager** plugin.
 
 ### Creating the WYSIWYG
@@ -296,7 +386,10 @@ At this point we have simply created a new plugin which is mounted in our projec
 
 ### Registering a our new Field
 
-Since the goal of our plugin is to override the current WYSIWYG we don't want it to be displayed in the administration panel but we need it to register our new **Field**. In order to do so, we will simply modify the front-end entry point of our plugin:
+Since the goal of our plugin is to override the current WYSIWYG we don't want it to be displayed in the administration panel but we need it to register our new **Field**. 
+In order to do so, we will simply **modify** the front-end entry point of our plugin.
+
+This file is already present. Please replace the content of this file wit the following:
 
 **Path —** `./plugins/wysiwyg/admin/src/index.js`
 
@@ -335,14 +428,36 @@ export default strapi => {
 
 Finally you will have to rebuild strapi so the new plugin is loaded correctly
 
-```bash
+:::: tabs
+
+::: tab yarn
+
+```
 yarn build
-# or
+```
+
+:::
+
+::: tab npm
+
+```
 npm run build
 ```
 
+:::
+
+::: tab strapi
+
+```
+strapi build
+```
+
+:::
+
+::::
+
 ::: tip
-If the plugin sillt doesn't show up, you should probably empty the `.cache` folder too.
+If the plugin still doesn't show up, you should probably empty the `.cache` folder too.
 :::
 
 And VOILA, if you create a new `collectionType` or a `singleType` with a `richtext` field you will see the implementation of [CKEditor](https://ckeditor.com/ckeditor-5/) instead of the default WYSIWYG.