1. 0
No votes yet

9036 downloads insertpre

Insert <pre> element

This plugin makes it easier to insert a <pre> tag in CKEditor.

Installation

1. Download the plugin and unpack it in the plugins folder

2. Enable the "insertpre" plugin in the CKEditor configuration file (config.js):

config.extraPlugins = 'insertpre';

That's all. "InsertPre" button will appear on the editor toolbar and will be ready to use.

Optionally, you may specify which class should be added to the <pre> element:

CKEDITOR.config.insertpre_class = 'prettyprint';

As well as specify how the <pre> tag should be rendered inside CKEditor:

CKEDITOR.config.insertpre_style = 'background-color:#F8F8F8;border:1px solid #DDD;padding:10px;';

Releases

Plugin versions CKEditor versions
4.1 4.0

Version: 1.1 - Download

Show notes

First version compatible with CKEditor 4.1 and Advanced Content Filter.

 compatiblecompatible

Screenshots

  • carousel
  • carousel
  • carousel
Log in to rate this plugin

Comments

Post a comment
  5. The content of this field is kept private and will not be shown publicly.
  1. Yves Hajjar's picture

    Yves Hajjar

    Reply

    This can be done using the built-in Style control 

    here is what i did 

        config.stylesSet = [    { name: 'Computer Code', element: 'pre', styles: { 'font-family': 'monospace', 'font-size': ' 13px',   'color': '#333'  , 'background-color':'#F8F8F8','border':'1px solid #DDD','padding':'10px'} } ];
  or 

    config.stylesSet = [    { name: 'Computer Code', element: 'pre', attributes: {'class':'CssClass'} } ];

    The result is the same as the plugin but the UI doesn't get polluted with an other plugin and the text can be edited in the editor.

    • That's true. In certain situations it's just more simple to have a dedicated button for that, e.g. on sites where people are posting code snippets very often.