{"id":1426,"date":"2014-03-17T15:57:48","date_gmt":"2014-03-17T13:57:48","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1426"},"modified":"2014-03-20T11:13:26","modified_gmt":"2014-03-20T09:13:26","slug":"xpages-a-bootstrap-skin-for-ckeditor","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1426","title":{"rendered":"XPages: A Bootstrap Skin for CKEditor"},"content":{"rendered":"

I have found a very nice skin for CKEditor, the \u201cBootstrapCK-Skin<\/em>\u201d. It gives a bootstrap look and feel to the Editor:<\/p>\n

\"\"<\/p>\n

The dialogs are also skinned:<\/p>\n

\"\"<\/p>\n

You can find and download the skin here http:\/\/kunstmaan.github.io\/BootstrapCK-Skin\/<\/a><\/p>\n

To use the skin in one of your applications, you have to import the unzipped files into your NSF…<\/p>\n

\"\"<\/p>\n

… and add your „own“ declaration of a xspCKEditor<\/em> instance:<\/p>\n

<xp:scriptBlock id=\"scriptBlockCKEditor\">\r\n   <xp:this.value>\r\n      <![CDATA[\r\n         require( ['dojo\/_base\/declare', 'ibm\/xsp\/widget\/layout\/xspCKEditor'], function( declare, xspCKEditor ){\r\n           \u00a0return declare( 'ch.hasselba.xpages.CKEDITOR', xspCKEditor, {\r\n               constructor: function ckew_ctor(\/*Object*\/options){\r\n                  CKEDITOR.timestamp = '';\r\n               }\r\n            });\u00a0\u00a0 \u00a0\r\n         });\r\n\u00a0\u00a0 \u00a0\u00a0 ]]>\r\n   <\/xp:this.value>\r\n<\/xp:scriptBlock><\/code><\/pre>\n
This is required to remove an URL parameter, which is added automatically and will break the references. Then you have to overwrite the dojoType of your RichText control and add a dojoAttribute for the Skin. The path has to be appended after the name of the skin.<\/p>\n
<xp:inputRichText\r\n   id=\"inputRichTextBody\"\r\n   value=\"#{documentInfo.Body}\"\r\n   dojoType=\"ch.hasselba.xpages.CKEDITOR\">\r\n   <xp:this.dojoAttributes>\r\n      <xp:dojoAttribute\r\n         name=\"skin\"\r\n         value=\"BootstrapCK-Skin,\/path\/to\/your\/db.nsf\/BootstrapCK-Skin\/\">\r\n      <\/xp:dojoAttribute>\r\n   <\/xp:this.dojoAttributes>\r\n<\/xp:inputRichText><\/code><\/pre>\n
EDIT:<\/strong>
\nOliver Busse found a problem when using the style in an XPiNC application and added a hotfix for the issue on his blog: http:\/\/mardou.dyndns.org\/hp.nsf\/blogpost.xsp?documentId=BC2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I have found a very nice skin for CKEditor, the \u201cBootstrapCK-Skin\u201d. It gives a bootstrap look and feel to the Editor: The dialogs are also skinned: You can find and download the skin here http:\/\/kunstmaan.github.io\/BootstrapCK-Skin\/ To use the skin in … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,81,24],"tags":[47,7,4,3],"class_list":["post-1426","post","type-post","status-publish","format-standard","hentry","category-javascript","category-web","category-xsp","tag-9-0","tag-domino","tag-js","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1426"}],"version-history":[{"count":8,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1426\/revisions"}],"predecessor-version":[{"id":1435,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1426\/revisions\/1435"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}