React, текстовый редактор на сайте

215
04 августа 2018, 14:20

как правильно сделать кнопки редактора, чтобы при клике менялись стили следующих слов, а не всего текста? Помогите пожалуйста

вот код

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Folder from './folder';
import Text from './text';

export default class RichEditor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { 
      textName : '',
      textContent : '',
  }
  const contentValue = this.state.textContent;
}

  handleUserInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value});
  }
  handleSize(){
    this.setState({textContent});
  }
  handleClickB(){

  }

render() {
  return(
    <div className="">
      <div className="row folder-editor">
        <div className="col-md-2">
          <Folder />
        </div>
        <div className="col-md-2">
          <Text />
        </div>
      <div className="editor col-md-8">
        <input 
          type="textName" 
          placeholder="text-name" 
          value={this.state.textName}
          name="textName"
          onChange={this.handleUserInput}
        />
        <div className="">
          <div className="row menu container">
            <button 
              className="btn-bold"
              onClick={this.handleClickB}
            >B</button>
            <button className="btn-bold">I</button>
            <button className="btn-bold">U</button>
            <button className="btn-bold">fontName</button>
            <button className="btn-bold" 
              onClick={this.handleSize}>
              16
            </button>
            <button className="btn-bold">color</button>
            <button className="btn-bold">unordered</button>
            <button className="btn-bold">ordered</button>
            <button className="btn-bold">Play</button>
          </div>
          <textarea 
            className="text-content"
            type="text" 
            placeholder="text-content" 
            value={this.contentValue}
            name="textContent"
            onChange={this.handleUserInput}
            >
            </textarea>
            </div>
        </div>
      </div>
    </div>
  );
}
}
Answer 1

Посмотри внимательно execCommand, функция обработчик будет иметь вид:

$('кнопка').on('mousedown', function (e) {
document.execCommand("bold");
e.preventDefault(); });

Там много чего есть для редактора. Если будут вопросы можешь обращаться, я уже написал свой редактор, включая работу с таблицами и связанными input. Связь как в Excel можно вписывать формулы.

Конкретно execCommand работает как с уже выделенным текстом так и с тем который еще будет вводиться. По моему то что тебе нужно.

READ ALSO
верификация email

верификация email

В firebase выставил аутентификацию с помощью emailНо не могу найти, как верифицировать email

185
Повторные обращения к серверу Angular2

Повторные обращения к серверу Angular2

В зависимости от ответа сервера, нужно в цикле сделать новые обращения к серверуКакой вариант предпочтительней? Делать все внутри одного...

170
toThrow для проверки массива на неизменяемость

toThrow для проверки массива на неизменяемость

Подскажите, как проверить массив на имутабельность? В конечном результате тест должен проверять изменился ли массив, а если да, то выдавать...

167