CODEWITHSUNDEEP
javascriptreactjstinymce
Jeremy Chee
Jeremy Chee

Reputation: 63

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

Upvotes: 0

Views: 627

Answers (1)

PSU
PSU

Reputation: 187

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"

Upvotes: 2

Related Questions