Search code examples
javascriptreactjstinymce

TinyMCE wrapping preformatted text


With TinyMCE's Editor, I'm trying to have the preformatted text wrap onto the next line. Is there a way in which I can achieve this?

Here is my attempt on achieving the above so far:

<Editor
  ...
  plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
  ],
  selector: 'textarea',
  content_style:
    `
      body {
        font-weight: normal;
      }
    ` +
    `
      wrappretext {
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    `,
      formats: {
        prewrap: {
          selector: 'pre',
          classes: 'wrappretext'
        }
      },
      style_formats: [
        {
          title: 'Pre',
          format: 'prewrap'
        }
      ]
/>

wrap preformatted text


Solution

  • This works (latest v6 version of tinymce)

    tinymce.init({
       selector: "textarea",  
       content_style:
        `
          body {
            font-weight: normal;
            color:red;
          }
        ` +
        `
          .wrappretext {
            white-space: pre-wrap;
            word-wrap: break-word;
            color:navy;
            font-size:2em;
          }
        `, 
          formats: {
            pre: { block: 'pre', classes: 'wrappretext' }
          }
    });
    

    NB the . (period) prefixing the style definition (missed out in your code), adn I've added extra styling there (color and size) just to show it up easier - the "pre" selector will show in the standard format dropdown under "Blocks"