Question T12329
Visible to All Users

Override the markup textarea with tinyMCE wysiwyg editor

created 2 years ago

Hi,
I would like to override the markup textarea of the creator (see image) with a Rich text editor (tinyMCE) as it a MIT license and not CK editor who is copyLeft.

So my question is how can I override the textarea component in react, but only the specific one for html?
I would like to override those textarea:

  • Survey Complete page markup
  • Dynamic Survey Complete page markup
  • Markup to show while survey model is loading
  • Markup to show if the user already filled out this survey
  • html question -> HTML markup

Thank you very much

Sign in to comment on this post

Answers approved by surveyjs Support

created 2 years ago

Hello Camille,
You can register a custom React/Angular component and use it as a property editor for various survey and its element' properties. For more information, please check the following step-by-step guide (depending on your JavaScript platform):

You can also find demo and GitHub repo links and research the implementation in detail.

Should you have any questions or require further assistance, we are here to help.

    Comments (2)
    CP CP
    Camille Pire 2 years ago

      Hi,
      I understand how to create a custom component,

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

export class SurveyQuestionWysiwyg extends SurveyQuestionElementBase {
  constructor(props: any) {
    super(props);
    this.state = { value: this.question.value };
  }
  get question() {
    return this.questionBase;
  }
  get value() {
    return this.question.value;
  }
  override renderElement() {
    return (
      <div>
        <Editor
          onInit={(evt, editor) => editor = this.value}
          initialValue = {this.value}
          init={{
            menubar: false,
            toolbar: false,
            inline: true,
            plugins: [
              'link fullscreen paste emojis quickbars'
            ],
            quickbars: 'bold italic underline forecolor | emojis removeformat',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            custom_colors: false
        }}
      />
    </div>
    );
  }
}
export function registerWysiwyg() {
  ReactQuestionFactory.Instance.registerQuestion('wysiwyg', (props) => {
    return createElement(SurveyQuestionWysiwyg, props);
  });
}

      but I don't understand how to replace the question.title by this component in the creator?

      TypeScript
      registerWysiwyg()
Serializer.findProperty('question', 'title') ?????;
      Jane 2 years ago

        Hello,
        If you wish to use a custom editor to edit a question's title property, use the PropertyGridEditorCollection.register function:

        JavaScript
        import { PropertyGridEditorCollection } from "survey-creator-core";

PropertyGridEditorCollection.register({
    fit: function(prop) {
        return prop.name === "title";
    },
    getJSON: function(obj,  prop,options) {
        return { type: "wysiwyg"}
    }
});

        For more information, refer to our documentation and demos:

        Let me know if you have additional questions.

        Sign in to comment on this post