CODEWITHSUNDEEP
dialogckeditor
LazNiko
LazNiko

Reputation: 2123

CKEditor 3.x add text to dialog

I disabled the advanced & target tabs from the link dialog, and only left the URL input box.

Actually what I did is exactly explained here: http://peterpetrik.com/blog/remove-tabs-and-elements-from-ckeditor-dialog-window

My question is, is it possible to add a text string to the dialog (as my supplement hints for users.) ?

Upvotes: 0

Views: 2066

Answers (1)

codewaggle
codewaggle

Reputation: 4943

Yes, you can use " add(elementDefinition, nextSiblingId) ", to add elements to the dialog.

From the code on the page in your link, I added "infoTab.add" before the "infoTab.remove" entries:

infoTab.add(
  {
    type : 'html',
    html : '<div id="myDiv">Supplemental <b>hint</b>.</div><br />'
  },
  'linkType'
);

// Remove unnecessary widgets from the 'Link Info' tab.         
infoTab.remove( 'linkType');
infoTab.remove( 'protocol');

The nextSiblingId is used to place the new element above an existing element.
I assigned "linkType" as nextSiblingId to place the new element above the url input box.

To place the new element between the url input box and the browse button, replace 'linkType' with 'browse' ( 'browse' is the id assigned to the browse button in the definition for the link dialog ).

To place the new element below the button, just remove ( , 'linkType' ).

Between this information and that found on the page you linked to, you should be able to accomplish your goal.

If you want to get a better understanding of your options, you can look at the following files:

The source files for the link dialog:
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_link_plugin.js.html
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_link_dialogs_link.js.html
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_link_dialogs_anchor.js.html

The source files are also in your CKEditor directory:
ckecitor/_source/plugins/link/

The CKEditor documentation is located here:
http://docs.cksource.com/

Some relevant info from the CKEditor API:
CKEDITOR.dialog
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html

CKEDITOR.dialog.definition.html
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html.html

CKEDITOR.dialog.definitionObject
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definitionObject.html

CKEDITOR.dialog.definition.contentObject
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.contentObject.html

Be Well,
Joe

Upvotes: 2

Related Questions