logo

Sådan bruger du Syncfusions React Rich Text Editor med React Redux Form

Syncfusion React Rich Text Editor-komponenten er en WYSIWYG-editor-komponent, der kan bruges til at indramme en UI-formularkontrol. Det fungerer problemfrit med React Redux Form og kan validere input i formularfelter.

Denne blog forklarer proceduren for at flette vores Rich Text Editor-komponent med Redux-formularfelter for at validere input. Følgende emner er dækket i denne blog:

  • Hvad er Redux Form?
  • Kom godt i gang med create-react-app
  • Konfiguration af Syncfusion React Rich Text Editor-komponenten
  • Opret en redux-butik
  • Opret en RteForm.js-fil
  • Integrer Rich Text Editor-formularen i en React-komponent
  • Ressourcer

Hvad er Redux Form?

Redux er et open source JavaScript-bibliotek. Det bruges til at udvikle UI-komponenter i React og Angular platforme. redux -form er et valideringsbibliotek, der nemt kan integreres i enhver React-webapplikation. Den bruger Redux-biblioteket til at gemme feltinputværdier og komponenter af højere orden.

Se redux-formens dokumentationsside for at få flere oplysninger.

Lad os nu se, hvordan du opretter en React-app med Redux og integrerer vores React Rich Text Editor i den.

Kom godt i gang med create-react-app

Følg disse trin for at oprette en React-applikation:

Trin 1: Brug kommandoen create-react-app til at installere NuGet-pakken globalt, som vi vil bruge til at oprette en grundlæggende React-applikation.

npm i create-react-app -g

Du kan oprette appen i en hvilken som helst mappe ved at bruge kommandoen create-react-app.

Trin 2: Flyt til den mappe, hvor du vil oprette applikationen, og kør følgende kommando. Her navngiver jeg denne app RichTextEditor-Redux-Form .

create-react-app RichTextEditor-Redux-Form

Derfor har vi oprettet applikationen.

Trin 3: For at køre programmet med standardkonfiguration skal du flytte til programmets bibliotek og bruge følgende kommando.

cd RichTextEditor-Redux-Form
npm start

Med dette har vi oprettet basisapplikationen og fået den til at køre.

Konfiguration af Syncfusion React Rich Text Editor-komponenten

Kør følgende kommando for at installere NuGet-pakken, der er nødvendig for at konfigurere React-applikationen med Syncfusion React Rich Text Editor.

npm install ej2-react-richtexteditor

Følgende kommando vil installere Redux og dets afhængige pakker sammen med redux-form for at validere input med en tilpasset React-komponent.

npm i --save-dev redux react-redux redux-form

Nu har vi fuldført den nødvendige konfiguration.

Opret en Redux-butik

Opret en butik med combineReducers og send det gennem Udbyderen komponent i index.js fil. Se følgende kodeeksempel. 

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
import App from './App';

const rootReducer = combineReducers({
    form: formReducer
});

const store = createStore(rootReducer);

ReactDOM.render(
<Provider store={store}>
 <App />
</Provider>
,document.getElementById('root'));

Opret en RteForm.js-fil

Når du har oprettet Redux-butikken, skal du oprette en RteForm.js fil inde i kilden bibliotek og flet Rich Text Editor-komponenten i feltet input til at kommunikere med redux gem og send det med reduxForm.

RteForm vil give Redux Form tilstande og funktioner til at håndtere indsendelsesprocessen og vise valideringsmeddelelsen i en etiket.

For at validere Rich Text Editor-komponenten i Redux Form skal du tilknytte følgende feltinputhændelseshandlere til begivenhederne i Rich Text Editor.

Se følgende kode. 

//RteForm.js 
import React from ‘react’;
import { Field, reduxForm } from ‘redux-form’;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from ‘@syncfusion/ej2-react-richtexteditor’;

const validate = values => {
  const errors = {}
  if (values.comment && values.comment.length < 20) {
    errors.comment = ‘Minimum be 20 characters or more’;
  } else if (!values.comment) {
    errors.comment = ‘Required’;
  } else {
    errors.comment = false;
  }
  return errors
}

const renderRTEField = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <label className=”control-label”>{label}</label>
    <div>
      <RichTextEditorComponent htmlAttributes={{ name: “comment” }} value={input.value}
        change={param => input.onChange(param.value)} focus={param => input.onFocus()} blur={param => input.onBlur()} id=”defaultRTE”>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
      </RichTextEditorComponent>
      {touched && ((error && <span className=”text-danger”>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

let RteForm = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div className=”form-group”>
        <Field name=”comment” component={renderRTEField} label=”Comment” />
      </div>
      <div className=”form-group”>
        <button type=”submit” disabled={pristine || submitting} className=”btn btn-primary”>Submit</button>
      </div>
    </form>
  )
}
RteForm = reduxForm({
  form: ‘contact’,
  validate,
})(RteForm);

export default RteForm;

Nu vil filen RteForm.js fungere som en React-webformularkomponent med et Redux-formularfelt. Valideringen i dette formularfelt udføres af Rich Text Editor-komponenten.

Integrer Rich Text Editor-formularen i en React-komponent

Se følgende kode for at integrere Rich Text Editor-formularen i en React-komponent. 

import React from 'react';
import RteForm from './RteForm';

class App extends React.Component {
  submit = (values) => {
    alert("Form values submitted");
    console.log(values);
  }
  render() {
    return (
      <div className="container">
        <h3>Redux Form Validation with RichTextEditor</h3>
        <RteForm onSubmit={this.submit} />
      </div>

    )
  }
}

export default App;

Nu er Rich Text Editor-komponenten klar til brug i Redux-formularen med validering. Jeg vil køre programmet og derefter skifte til browseren for at se Rich Text Editor-komponenten i formularen.

I ansøgningen skal du indtaste en værdi i formularfeltet og klikke på Send knap. Værdien vil blive valideret af Rich Text Editor og vil vise dig valideringsmeddelelsen, hvis den indtastede værdi er på mindre end 20 tegn.

Ressourcer

Du kan tjekke hele projektet fra dette GitHub-lager.

Konklusion

Jeg håber, at du nu har en klar idé om, hvordan du tilføjer Syncfusion React Rich Text Editor-komponenten i en Redux-formular til validering. Vi ser frem til, at du prøver denne integration og håber, at du giver feedback i kommentarfeltet nedenfor.

Hvis du er ny til Syncfusion, kan du prøve vores kontrolfunktioner ved at downloade en gratis prøveperiode. Du kan også udforske vores online demo og vores dokumentation.

Du kan kontakte os via vores supportfora, Direct-Trac eller feedbackportal. Vi er altid glade for at hjælpe dig!