Texteditor in Shopify Remix App

Shopify Discussion
1

I use Tinymce for show Text-editor in my Shopify remix app but when i run, app run successfully and no error show, but in front side only text-area show not full text-editor show.

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class RichText extends React.Component {
  constructor(props) {
    super(props);
    this.handleEditorChange = this.handleEditorChange.bind(this);
  }
  handleEditorChange = (e) => {
    console.log(
      'Content was updated:',
      e.target.getContent()
    );
  }

  render() {
    return (
      <>
      <Editor
        initialValue="<p>Wow ! ... It Works !!!</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image',
            'charmap print preview anchor help',
            'searchreplace visualblocks code',
            'insertdatetime media table paste wordcount'
          ],
          toolbar:
            'undo redo | formatselect | bold italic | \
            alignleft aligncenter alignright | \
            bullist numlist outdent indent | help'
        }}
        onEditorChange={this.handleEditorChange}
      />
      </>
    );
  }
}

export default RichText;
1 Like
2

Did you get solution to this?

3

No, but i found new that’s working.
i use this editor:- https://codesandbox.io/s/prosemirror-template-ruwq5u?file=/src/editor/index.jsx