CODEWITHSUNDEEP
phpckeditor
Teson
Teson

Reputation: 6736

code snipplets for ckeditor plugin?

Using CKeditor I want to provide an easy way to insert small amounts of html-code, from a combobox or similar. Is this possible w/o plugin or is there an existing plugin for this?

example:

Toolbar:[ ][ ] [comboBox] 
               |article image         | => (inserts <img src="aimage/{{id}}"/>
               |full-width-2col-table | => (inserts <table width="100%"><tr>..

( {{id}} will be replaced by ajax but that's another story...)

regards,

Upvotes: 2

Views: 384

Answers (1)

Gregg
Gregg

Reputation: 121

I was working on a similar problem just a few days ago, so I stripped out a plugin I made.

Create a folder in the CK plugins directory called "myinsert". Create a file called plugin.js and paste the following into it:

CKEDITOR.plugins.add( 'myinsert',
{
init: function( editor )
{
    editor.addCommand( 'insertMycode',
        {
            exec : function( editor )
            {    
                var timestamp = new Date();
                editor.insertHtml( 'Some Code Here.' );
            }
        });


    editor.ui.addButton( 'Mycode',
    {
        label: 'Insert Timestamp',
        command: 'insertMycode',
        icon: this.path + 'tag.gif'
    } );
}
} );

You will have to include an icon in that directory, otherwise the button won't show up properly.

Next, in your script to call your editor, place this: extraPlugins : 'myinsert', For example:

<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
    extraPlugins : 'myinsert',
    toolbar : 'EditPost',
    uiColor : '#BBB',   
}); 
</script>

Then just add the function name to your toolbar settings, wherever that may be.

    { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About', 'Mycode' ] }

If you rename the function or folder, just make sure that they have to be the same name. Also, the name you put on the toolbar, has to match the name in editor.ui.addButton()

Upvotes: 1

Related Questions