CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Pasting content from LibreOffice Writer Documentation

Overview

The Paste from LibreOffice feature is provided through the Paste from LibreOffice plugin. It was introduced in CKEditor 4.14 and is available in the Standard and Full distributions by default.

The plugin is only supported in Google Chrome, Mozilla Firefox and Microsoft Edge browsers. In Safari and Internet Explorer it is not possible to detect whether the content is copied from LibreOffice Writer. However, even without the official support for the plugin, most of the formatting should be preserved correctly upon pasting in these browsers.

This feature allows you to paste content from LibreOffice Writer and maintain the original structure and formatting. After creating a document in LibreOffice Writer, you can simply copy it and paste it into CKEditor 4 while retaining images, font styles, heading levels, nested lists, complex tables and other advanced features.

If the plugin is enabled, it automatically detects Writer content and transforms its structure and formatting to clean, semantic HTML.

Pasting content without filtering

To test how Paste from LibreOffice works, download the sample Writer document, open it in LibreOffice Writer, copy the content, and paste it into CKEditor 4. Check the clean HTML source code generated by CKEditor 4 using the Source toolbar button.

Pasted content may be filtered by additional Advanced Content Filter rules - see the second sample below. The content appearance in CKEditor 4 also depends on styling used in contents.css files.

You may also test Pasting from LibreOffice with even more complex styling by using our Writer document with a more complicated structure and styling sample.

Filtering pasted content with ACF

The second editor shows the possibilities of content filtering in CKEditor 4 - it enforces the use of only a subset of features, e.g. it filters out tables and images. This can be helpful, for example, while creating official documents. Notice how the table and images will be stripped off during pasting if the original LibreOffice document contains any.

For a sample content to paste, you can download the sample Writer document.

Related Features

Sample Writer Documents

Get Sample Source Code

  • Paste from LibreOffice 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Paste from LibreOffice</title>
  <script src="https://cdn.ckeditor.com/4.24.0-lts/full-all/ckeditor.js"></script>
</head>

<body>
  <style type="text/css">
    /* Minimal styling to center the editor in this sample */
    .container {
      padding: 30px;
      display: flex;
      align-items: center;
      text-align: center;
    }

    .inner-container {
      margin: 0 auto;
    }
  </style>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      // Make the editing area bigger than default.
      height: 1000,
      width: 760,

      // Allow pasting any content.
      allowedContent: true,

      // Fit toolbar buttons inside 3 rows.
      toolbarGroups: [{
          name: 'document',
          groups: ['mode', 'document', 'doctools']
        },
        {
          name: 'clipboard',
          groups: ['clipboard', 'undo']
        },
        {
          name: 'editing',
          groups: ['find', 'selection', 'spellchecker', 'editing']
        },
        {
          name: 'forms',
          groups: ['forms']
        },
        '/',
        {
          name: 'paragraph',
          groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']
        },
        {
          name: 'links',
          groups: ['links']
        },
        {
          name: 'insert',
          groups: ['insert']
        },
        '/',
        {
          name: 'styles',
          groups: ['styles']
        },
        {
          name: 'basicstyles',
          groups: ['basicstyles', 'cleanup']
        },
        {
          name: 'colors',
          groups: ['colors']
        },
        {
          name: 'tools',
          groups: ['tools']
        },
        {
          name: 'others',
          groups: ['others']
        },
        {
          name: 'about',
          groups: ['about']
        }
      ],

      // Remove buttons irrelevant for pasting from external sources.
      removeButtons: 'ExportPdf,Form,Checkbox,Radio,TextField,Select,Textarea,Button,ImageButton,HiddenField,NewPage,CreateDiv,Flash,Iframe,About,ShowBlocks,Maximize',

      // An array of stylesheets to style the WYSIWYG area.
      // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
      contentsCss: [
        'http://cdn.ckeditor.com/4.24.0-lts/full-all/contents.css',
        'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/css/pastefromword.css'
      ],

      // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
      bodyClass: 'document-editor'
    });
    CKEDITOR.replace('editor2', {
      // Make the editing area bigger than default.
      height: 1000,
      width: 760,

      // Define the toolbar: https://ckeditor.com/docs/ckeditor4/latest/features/toolbar
      // The full preset from CDN which we used as a base provides more features than we need.
      // Also by default it comes with a 3-line toolbar. Here we put all buttons in two rows.
      toolbar: [{
          name: 'document',
          items: ['Source', 'Print', 'PageBreak']
        },
        {
          name: 'clipboard',
          items: ['PasteFromWord', '-', 'Undo', 'Redo']
        },
        {
          name: 'paragraph',
          items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
        },
        {
          name: 'insert',
          items: ['Image', 'Table']
        },
        {
          name: 'align',
          items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
        },
        {
          name: 'links',
          items: ['Link', 'Unlink']
        },
        {
          name: 'editing',
          items: ['Scayt']
        },
        '/',
        {
          name: 'styles',
          items: ['Format', 'Font', 'FontSize']
        },
        {
          name: 'basicstyles',
          items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
        },
        {
          name: 'colors',
          items: ['CopyFormatting', 'RemoveFormat', '-', 'TextColor', 'BGColor']
        }
      ],

      // Since we define all configuration options here, let's instruct CKEditor 4 to not load config.js which it does by default.
      // One HTTP request less will result in a faster startup time.
      // For more information check https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-customConfig
      customConfig: '',

      // Upload images to a CKFinder connector (note that the response type is set to JSON).
      uploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',

      // Configure your file manager integration. This example uses CKFinder 3 for PHP.
      filebrowserBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html',
      filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
      filebrowserUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
      filebrowserImageUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images',

      // For more information check:
      //  - About Advanced Content Filter: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html
      //  - About Disallowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
      //  - About Allowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html
      disallowedContent: 'img table',

      /*********************** File management support ***********************/
      // In order to turn on support for file uploads, CKEditor 4 has to be configured to use some server side
      // solution with file upload/management capabilities, like for example CKFinder.
      // For more information see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_ckfinder_integration

      // Uncomment and correct these lines after you setup your local CKFinder instance.
      // filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
      // filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
      /*********************** File management support ***********************/

      // An array of stylesheets to style the WYSIWYG area.
      // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
      contentsCss: [
        'http://cdn.ckeditor.com/4.24.0-lts/full-all/contents.css',
        'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/css/pastefromlibreoffice.css'
      ],

      // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
      bodyClass: 'document-editor',

      // Reduce the list of block elements listed in the Format dropdown to the most commonly used.
      format_tags: 'p;h1;h2;h3;pre',

      // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
      removeDialogTabs: 'image:advanced;link:advanced',

      // Define the list of styles which should be available in the Styles dropdown list.
      // If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
      // (and on your website so that it rendered in the same way).
      // Note: by default CKEditor 4 looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor 4 from loading
      // that file, which means one HTTP request less (and a faster startup).
      // For more information see https://ckeditor.com/docs/ckeditor4/latest/features/styles
      stylesSet: [
        /* Inline Styles */
        {
          name: 'Marker',
          element: 'span',
          attributes: {
            'class': 'marker'
          }
        },
        {
          name: 'Cited Work',
          element: 'cite'
        },
        {
          name: 'Inline Quotation',
          element: 'q'
        },

        /* Object Styles */
        {
          name: 'Special Container',
          element: 'div',
          styles: {
            padding: '5px 10px',
            background: '#eee',
            border: '1px solid #ccc'
          }
        },
        {
          name: 'Compact table',
          element: 'table',
          attributes: {
            cellpadding: '5',
            cellspacing: '0',
            border: '1',
            bordercolor: '#ccc'
          },
          styles: {
            'border-collapse': 'collapse'
          }
        },
        {
          name: 'Borderless Table',
          element: 'table',
          styles: {
            'border-style': 'hidden',
            'background-color': '#E6E6FA'
          }
        },
        {
          name: 'Square Bulleted List',
          element: 'ul',
          styles: {
            'list-style-type': 'square'
          }
        }
      ]
    });
  </script>
</body>

</html>