TinyMCE PowerPaste Premium Plugin

In this example below you will see how to do a TinyMCE PowerPaste Premium Plugin with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tinymce, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tinymce ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" class="codepen">

<head>
  <meta charset="UTF-8">
  <title>TinyMCE PowerPaste Premium Plugin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://www.tinymce.com/css/codepen.min.css'>

  
  
</head>

<body>

  <textarea>
  <h1>
    <span class="span">
        <img src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" style="float: right">
    </span>
    <span style="color: #828282; font-size: 35px; font-family: avenir; font-weight: 200;">TinyMCE demo: PowerPaste plugin!</span>
</h1>
<p style="color: #7e7e7e; font-size: 15px; font-family: avenir;font-weight: 500;">PREMIUM PLUGIN: The TinyMCE  <a  href="https://www.tinymce.com/docs/enterprise/paste-from-word/">PowerPaste plugin</a> automatically cleans up and transfers content & images from Microsoft Word and HTML sources to ensure clean, compliant content that matches the look and feel of the site.</p>
  
<p style="color: #7e7e7e; font-size: 15px; font-family: avenir;font-weight: 500;">COPY AND PASTE FROM WORD or EXCEL</p>
<ol style="color: #7e7e7e; font-size: 14px; font-family: avenir;font-weight: 500;">
<li>Copy and paste content from MS Word or Excel into this editor.</li>
<li>Choose Remove Formatting (remove inline styles) or Keep Formatting (keep inline styles)</li>
</ol>
<p style="color: #7e7e7e; font-size: 15px; font-family: avenir;font-weight: 500;">COPY AND PASTE FROM WEBSITE OR HTML SOURCES</p>
<ol style="color: #7e7e7e; font-size: 14px; font-family: avenir;font-weight: 500;">
<li>Copy and paste content from website content into this editor.</li>
<li>Choose Remove Formatting (remove inline styles) or Keep Formatting (keep inline styles)</li>
</ol>
<p style="color: #7e7e7e; font-size: 15px; font-family: avenir;font-weight: 500;">DRAG AND DROP IMAGE</p>
<ol style="color: #7e7e7e; font-size: 14px; font-family: avenir;font-weight: 500;">
<li>Drag a local image into this editor.</li>
</ol>
  <p>---------------------------------------------------------------------</p>
  <h2 style="color: #7e7e7e; font-size: 20px; font-family: avenir;font-weight: 500;">Got questions or need help?</h2>

  <ul style="color: #7e7e7e; font-size: 14px; font-family: avenir;font-weight: 500;">
    <li>Our <a href="https://www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Visit the <a href="https://community.tinymce.com" target="_blank">Community Forum</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="www.tinymce.com/pricing">TinyMCE Enterprise</a>.</li>
  </ul>

  <p style="color: #7e7e7e; font-size: 14px; font-family: avenir;font-weight: 500;">
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
  <script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tinymce/tinymce-powerpaste-premium-plugin-Jbaeyr */
tinymce.init({
  selector: 'textarea',
  height: 400,
  menubar: true,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks advcode fullscreen',
    'insertdatetime media table contextmenu powerpaste'
  ],
  toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
  powerpaste_allow_local_images: true,
  powerpaste_word_import: 'prompt',
  powerpaste_html_import: 'prompt',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css']
});

Comments