Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

That's it, we are in the middle of winter, it is very cold and the restaurants are unfortunately still closed. But that will not prevent our great [Live demo](https://strapi.io/demo) from receiving updates!
Here is what was added in the last version of [Foodadvisor](https://github.com/strapi/foodadvisor)

![Gif snow](https://media.giphy.com/media/3oriNScTbEzEVoR1Is/giphy.gif)

## Universal pages

[Daniel Madalitso Phiri](https://twitter.com/malgamves) added the implementation of a new very useful collection type to the project: [Universals](https://github.com/strapi/foodadvisor/pull/67) But what is that for?
Well, it simply allows you to create pages on the fly directly in the admin panel. You just need to structure your frontend appropriately so that you just have to create your pages afterwards! Allowing content managers to create pages on the fly is a must have for any [headless cms](https://strapi.io/headless-cms-guide). This is why it is important to show that it is quite feasible and easy!

Indeed we use this collection type internally on our [website](https://strapi.io) and it turns out to be very useful when we want to quickly deploy new pages on it. Pair that with a [Webhook](https://strapi.io/blog/webhooks) building your favorite [Nuxt.js](https://nuxtjs.org/), [Gatsby](https://www.gatsbyjs.com/) or [Next.js](https://nextjs.org/) frontend on [Vercel](https://vercel.com/) and you are good to go!

![Gif rocket](https://media.giphy.com/media/UVH5ew36nACis18ocZ/giphy.gif)

The following pages are **universals** on our website:

  - [https://strapi.io/demo](https://strapi.io/demo)
  - [https://strapi.io/headless-cms-guide](https://strapi.io/headless-cms-guide)
  - [https://strapi.io/faq](https://strapi.io/faq) and 47 more...

## Upgrade Strapi version to 3.4.6

The version of Strapi has been upgraded to the latest to this date.
More information here: [https://github.com/strapi/strapi/releases](https://github.com/strapi/strapi/releases)

## Guided Tour

We wanted to implement a guided tour to take you by the hand at the start of the demo. Relatively simple and fast it will show you the important parts of the admin allowing you to create your content-types and subsequently your content.

We are using [reactour](https://github.com/elrumordelaluz/reactour), and we have made a guided-tour plugin in the app. You can see how it works here: [https://github.com/strapi/foodadvisor/tree/master/api/plugins/guided-tour](https://github.com/strapi/foodadvisor/tree/master/api/plugins/guided-tour)
Feel free to give it a try or event contribute to it ;)

## Front-end on Codesandbox

When you'll ask for a live demo [here](https://strapi.io/demo), you'll receive an email with the link of your Strapi instance. We also included a [codesandbox](https://codesandbox.io/) link that will open a front-end that can be connected to your demo.

Once the front-end is open on codesandbox, you'll need to add an environment variable in the `.env` file to connect it to your Strapi instance.
  - Open the `.env` file.
  - Add the following variable: `REACT_APP_BACKEND_URL=<URL-OF-DEMO-WITHOUT-TRAILING-SLASH>`.
  - Save.

![Capture d’écran 2021-02-11 à 18.50.42.png](/uploads/Capture_d_ecran_2021_02_11_a_18_50_42_4900ed7c63.png)

If you add a new restaurant for example, you'll be able to see it on your sandbox after reloading your app!

## What you would like to see

We definitely take feedback regarding our live demo. You can write down in the comments what you would like to have in the demo, what you liked if you were able to try it or what you did not like.
See you at the next update!


Try Foodadvisor live in just a few clicks: https://strapi.io/demo
Try Foodadvisor locally on your machine: `git clone https://github.com/strapi/foodadvisor.git`

---

Get started with Strapi by creating a project using a [starter](https://strapi.io/starters) or trying our [live demo](https://strapi.io/demo). Also, consult our [forum](https://forum.strapi.io) if you have any questions. We will be there to help you.
<p align="center">
<a href="https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project">
<img src="https://assets.strapi.io/uploads/Get_Started_e4e026ce55.svg#small" />
</a>
</p>
See you soon!

The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

large_Foodadvisor Updates (1).jpg

medium_Foodadvisor Updates (1).jpg

small_Foodadvisor Updates (1).jpg

thumbnail_Foodadvisor Updates (1).jpg

Foodadvisor Updates (1).jpg

The Product section covers our releases, feature reviews and more. 

Product

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Are you a student? Non-profit? OSS project? Upgrade your existing Strapi project to the Bronze Edition for free.

Free_EE_for_Student_Open_source...

 Announcing Free Strapi Enterprise Editions for Students, Open Source and Non-Profits

An npm package let you the possibility to replace the default WYSIWYG editor in Strapi by Toast UI editor. Customize your headless cms with custom WYSIWYG editors.

How to change the default (1)

Change the default WYSIWYG to Toast UI editor

Use Strapi to scrape the web. Learn how you can collect data on websites using your favorite headless CMS, Puppeteer and Cheerio.

Web scraping with Strapi.png

Web scraping with Strapi

If you are a student or working for a non-profit organization or an open-source project, this news will certainly interest you.

With the help of amazing open-source contributors, we’re on a mission to develop the most customizable headless CMS on the market, empowering developers, and content managers to create millions of applications. 


Today, we are very happy to announce that Strapi is committed to supporting students, non-profit organizations as well as open-source projects by offering them [Strapi Enterprise](https://strapi.io/enterprise) Bronze Edition.

![Excited GIF](https://media.giphy.com/media/8rFgzA7aBR0aomiOMj/giphy.gif)

With this free bronze plan, you’ll be able to benefit from advanced features that are available now i.e Role-Based Access Control and coming soon i.e SSO Authorization, and Content Internationalization. 

### Student Qualification Criteria

If you are a student and wish to benefit from our Enterprise Edition Bronze plan, you must: 

  - Provide a copy of your student ID
  - Register with your student email address

After verifications, we will send you the necessary to take advantage of your free offer. 

[Apply Now](https://strapi.io/free-enterprise-edition)


### Non-profit organization Qualification Criteria

As a non-profit organization, you can also benefit from our offer.To qualify from this program, you must: 

  - Be an independent nonprofit 
  - Provide proof of your non-commercial status 
  - Link to your organization’s website or web presence 


[Apply Now](https://strapi.io/free-enterprise-edition)


### OSS Qualification Criteria projects

Finally, if you maintain an open-source project just like [Strapi](https://github.com/strapi/strapi), you can also enjoy a Bronze plan for free. To qualify from this program, you must: 

  - Be public and non-commercial
  - Meet the Open Source Initiative (OSI) definition (shown [here](https://opensource.org/docs/osd)), including definitions for free distribution, source code, derived works, the integrity of source code, licensing, and no tolerance for discrimination 
  - Code of your Strapi project must be publicly available.

All you have to do is to fill out the application form below. After verification, we will send you the necessary to take advantage of your free offer. 

[Apply Now](https://strapi.io/free-enterprise-edition)

An email will be sent to you at the end of your subscription in order to proceed with the renewal.

### Share the Strapi Love 

As a sign of appreciation for this free software, our hope is that the community users agree to become a public reference and display links to Strapi on all the appropriate pages.  

We are once again very happy to be able to provide you with the most customizable solution to carry out your web projects! Besides, don't hesitate to add your creations to our [Showcase](https://strapi.io/showcases)!

See you soon!


- [Get Strapi up and running in 3 minutes](https://strapi.io/documentation/v3.x/getting-started/quick-start.html)
- [Get access to a hosted Strapi with sample data](https://strapi.io/demo)
- [Discover Enterprise Edition](https://strapi.io/enterprise)



> This tutorials is outdated since it is for Strapi v3. We redirect you to the part of our documentation concerning [the creation of a new WYSIWYG field in the admin panel](https://docs.strapi.io/developer-docs/latest/guides/registering-a-field-in-admin.html#setting-up-the-plugin)

Another new WYSIWYG editor that allows you to replace the default one on Strapi! 

Well this time, I would not need to explain in detail how to replace it by yourself because it turns out that [Fagbokforlaget](https://github.com/fagbokforlaget), which is a Norwegian publishing company that publishes nonfiction works and teaching aids for instruction at various levels, already made an [npm package](https://www.npmjs.com/package/@forlagshuset/strapi-plugin-wysiwyg-toastui) you can directly add to your Strapi project in order to have a wonderful Toast UI editor in your admin.

This editor is great as it implements real-time previsualization of what you are writing.
This package is listed on our [awesome Strapi](https://github.com/strapi/awesome-strapi) repository but I find it important to write a blog post because many of you want to replace the default editor but do not know the existence of this Github repository.

However, I will explain the code of this package. This is exactly like we did for manually installing [Quill editor](https://strapi.io/blog/how-to-change-the-default-wysiwy-to-quill-editor).

It's very simple to get started. Head into an existing Strapi project and add the package via npm or yarn:

```bash
npm i --save strapi-plugin-wysiwyg-toastui
# or
yarn add strapi-plugin-wysiwyg-toastui
```

Perfect, all you have to do is build and launch your Strapi application:

```
yarn build
yarn develop
# or
npm run build
npm run develop
```

You can now edit your Rich Text content using the Toast UI editor!

Let's take a closer look at how they made it...

You can observe the package code by looking at the following path:

`. /node_modules/strapi-plugin-wysiwyg-toastui/admin/src/components`

We can see that 3 components have been created:

## MediaLib component

```js
import React, {useEffect, useState} from 'react';
import {useStrapi, prefixFileUrlWithBackendUrl} from 'strapi-helper-plugin';
import PropTypes from 'prop-types';

const MediaLib = ({isOpen, onChange, onToggle}) => {
  const {
    strapi: {
      componentApi: {getComponent},
    },
  } = useStrapi ();
  const [data, setData] = useState (null);
  const [isDisplayed, setIsDisplayed] = useState (false);

  useEffect (() => {
    if (isOpen) {
      setIsDisplayed (true);
    }
  }, [isOpen]);

  const Component = getComponent ('media-library'). Component;

  const handleInputChange = data => {
    if (data) {
      const {url} = data;

      setData ({... data, url: prefixFileUrlWithBackendUrl (url)});
    }
  };

  const handleClosed = () => {
    if (data) {
      onChange (data);
    }

    setData (null);
    setIsDisplayed (false);
  };

  if (Component && isDisplayed) {
    return (
      <Component
        allowedTypes = {['images', 'videos', 'files']}
        isOpen = {isOpen}
        multiple = {false}
        noNavigation
        onClosed = {handleClosed}
        onInputMediaChange = {handleInputChange}
        onToggle = {onToggle}
      />
    );
  }

  return null;
};

MediaLib.defaultProps = {
  isOpen: false,
  onChange: () => {},
  onToggle: () => {},
};

MediaLib.propTypes = {
  isOpen: PropTypes.bool,
  onChange: PropTypes.func,
  onToggle: PropTypes.func,
};

export default MediaLib;
```

This component allows you to use the Media Library and will be called in the editor component in order to directly use images from the Media Library.
Nothing much! Let's see the second component.

## WYSIWYG component

```js
/**
 *
 * Wysiwyg
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { isEmpty, isFunction } from 'lodash';
import cn from 'classnames';

import { Description, ErrorMessage, Label } from '@buffetjs/styles';
import { Error } from '@buffetjs/core';

import Editor from '../TOASTUI';
import Wrapper from './Wrapper';

class Wysiwyg extends React.Component {

  render() {
    const {
      autoFocus,
      className,
      deactivateErrorHighlight,
      disabled,
      error: inputError,
      inputClassName,
      inputDescription,
      inputStyle,
      label,
      name,
      onBlur: handleBlur,
      onChange,
      placeholder,
      resetProps,
      style,
      tabIndex,
      validations,
      value,
      ...rest
    } = this.props;

    return (
      <Error
        inputError={inputError}
        name={name}
        type="text"
        validations={validations}
      >
        {({ canCheck, onBlur, error, dispatch }) => {
          const hasError = error && error !== null;

          return (
            <Wrapper
              className={`${cn(!isEmpty(className) && className)} ${
                hasError ? 'bordered' : ''
              }`}
              style={style}
            >
              <Label htmlFor={name}>{label}</Label>
              <Editor
                {...rest}
                autoFocus={autoFocus}
                className={inputClassName}
                disabled={disabled}
                deactivateErrorHighlight={deactivateErrorHighlight}
                error={hasError}
                name={name}
                onBlur={isFunction(handleBlur) ? handleBlur : onBlur}
                onChange={e => {
                  if (!canCheck) {
                    dispatch({
                      type: 'SET_CHECK',
                    });
                  }

                  dispatch({
                    type: 'SET_ERROR',
                    error: null,
                  });
                  onChange(e);
                }}
                placeholder={placeholder}
                resetProps={resetProps}
                style={inputStyle}
                tabIndex={tabIndex}
                value={value}
              />
              {!hasError && inputDescription && (
                <Description>{inputDescription}</Description>
              )}
              {hasError && <ErrorMessage>{error}</ErrorMessage>}
            </Wrapper>
          );
        }}
      </Error>
    );
  }
}

Wysiwyg.defaultProps = {
  autoFocus: false,
  className: '',
  deactivateErrorHighlight: false,
  didCheckErrors: false,
  disabled: false,
  error: null,
  inputClassName: '',
  inputDescription: '',
  inputStyle: {},
  label: '',
  onBlur: false,
  placeholder: '',
  resetProps: false,
  style: {},
  tabIndex: '0',
  validations: {},
  value: null,
};

Wysiwyg.propTypes = {
  autoFocus: PropTypes.bool,
  className: PropTypes.string,
  deactivateErrorHighlight: PropTypes.bool,
  didCheckErrors: PropTypes.bool,
  disabled: PropTypes.bool,
  error: PropTypes.string,
  inputClassName: PropTypes.string,
  inputDescription: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
    PropTypes.shape({
      id: PropTypes.string,
      params: PropTypes.object,
    }),
  ]),
  inputStyle: PropTypes.object,
  label: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
    PropTypes.shape({
      id: PropTypes.string,
      params: PropTypes.object,
    }),
  ]),
  name: PropTypes.string.isRequired,
  onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  resetProps: PropTypes.bool,
  style: PropTypes.object,
  tabIndex: PropTypes.string,
  validations: PropTypes.object,
  value: PropTypes.string,
};

export default Wysiwyg;
```

This component will wrap the Toast UI editor with a label and the errors.
You can see that the index.js file is not alone. There is also a Wrapper.js file containing some style using styled-components.

```js
import styled from 'styled-components';

const Wrapper = styled.div`
  padding-bottom: 2.8rem;
  font-size: 1.3rem;
  font-family: 'Lato';
  label {
    display: block;
    margin-bottom: 1rem;
  }
  &.bordered {
    .editorWrapper {
      border-color: red;
    }
  }
  > div + p {
    width: 100%;
    padding-top: 12px;
    font-size: 1.2rem;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -9px;
  }
`;

export default Wrapper;
```

Now, the final component which is the one for the Toast UI editor itself!

## ToastUI component

```js
import React from 'react';
import PropTypes from 'prop-types';

import '@toast-ui/editor/dist/toastui-editor.css';
import 'codemirror/lib/codemirror.css';
import { Editor } from '@toast-ui/react-editor';
import { Button } from '@buffetjs/core';

import MediaLib from '../MediaLib';

class TOIEditor extends React.Component {
  editorRef = React.createRef();

  constructor(props) {
    super(props);
    this.height = "400px";
    this.initialEditType = "markdown";
    this.previewStyle = "vertical";
    this.state = { isOpen : false };
    this.handleToggle = this.handleToggle.bind(this);
  }

  componentDidMount() {
    const editor = this.editorRef.current.getInstance();
    const toolbar = editor.getUI().getToolbar();

    editor.eventManager.addEventType('insertMediaButton');
    editor.eventManager.listen('insertMediaButton', () => {
      this.handleToggle();
    } );

    toolbar.insertItem(0, {
      type: 'button',
      options: {
        className: 'first tui-image',
        event: 'insertMediaButton',
        tooltip: 'Insert Media',
        text: '@',
      }
    });
  }

  componentDidUpdate() {
    // Bug fix, where switch button become submit type - editor bug
    const elements = document.getElementsByClassName('te-switch-button');
    if ( elements.length ) {
      elements[0].setAttribute('type','button');
      elements[1].setAttribute('type','button');
    }
  }

  handleChange = data => {
    let value = this.props.value;
    let editor_instance = this.editorRef.current.getInstance();
    if (data.mime.includes('image')) {
      editor_instance.exec('AddImage', { 'altText': data.caption, 'imageUrl': data.url } );
    }
    else {
      editor_instance.exec('AddLink', { 'linkText': data.name, 'url': data.url } );
    }
  };

  handleToggle = () => this.setState({ isOpen : !this.state.isOpen });

  render() {
    return (
      <>
        <Editor
          previewStyle={this.previewStyle}
          height={this.height}
          initialEditType={this.initialEditType}
          initialValue={this.props.value}
          ref={this.editorRef}
          usageStatistics={false}
          onChange={(event) => {
            this.props.onChange({
              target: {
                value: this.editorRef.current.getInstance().getMarkdown(),
                name: this.props.name,
                type: 'textarea',
              },
            });
          }}
          toolbarItems={[
            'heading',
            'bold',
            'italic',
            'strike',
            'divider',
            'hr',
            'quote',
            'divider',
            'ul',
            'ol',
            'task',
            'indent',
            'outdent',
            'divider',
            'table',
            'link',
            'divider',
            'code',
            'codeblock',
            'divider',
          ]}
        />

        <MediaLib onToggle={this.handleToggle} isOpen={this.state.isOpen} onChange={this.handleChange}/>
      </>
    );
  }

}

export default TOIEditor;
```

As you understood, this component is the implementation of the new WYSIWYG which is simply using the Media Library.

That's it for this article which, I hope, will have introduced you to a very useful and especially great package.

![strapi-toast-ui](/uploads/strapi_toast_ui_352c444ab6.png)

## To learn more about other WYSIWYG 

  - [Replace the default WYSIWYG by CKEditor](https://strapi.io/documentation/developer-docs/latest/guides/registering-a-field-in-admin.html#introduction).
  - [Replace the default WYSIWYG by Quill Editor](https://strapi.io/blog/how-to-change-the-default-wysiwy-to-quill-editor).

> **Please note:** Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us [by reporting it here](https://github.com/strapi/community-content/issues/new/choose).

 ---

Get started with Strapi by creating a project, using a starter or trying our instant live demo. Also, consult our forum if you have any questions. We will be there to help you.

See you soon!


You might also be interested in...

Get all the latest Strapi updates, news and events.

Join our Newsletter

Foodadvisor Updates February 2021

maxime_castres

Maxime started to code in 2015 and quickly joined the Growth team of Strapi. He particularly likes to create useful content for the awesome Strapi community. Send him a meme on Twitter to make his day: @MaxCastres