We Keep Coding

ckeditor, how to adjust the wrap code display styling

I'm testing out CKEditor
I'm trying to get the display in the editor, to match my sites css style for displaying the end result.
What I'm trying to do is style the "wrap code" button to match the css of my site, by adding in a class.
I've seen on this page of the manual, that you can do stuff like this:
config.format_pre = { element: 'pre', attributes: { 'class': 'editorCode' } };
However, doing the same for a code block like so:
config.format_code = { element: 'code', attributes: { 'class': 'someclass' } };
Doesn't actually do anything. Anyone got a pointer on what I might be missing?
I've tested it working on other elements, so I know the config file changes are being picked up.

The one important thing is that every tag which is formatted via config.format_tagname should be also included in config.format_tags. However, this two settings (config.format_tagname and config.format_tags) works only form Block-Level elements (as stated in the manual page you referenced ).
As code element is considered as an inline one by CKEditor (see DTD), it is not possible to use this config here.
However, the easiest way to modify the elements added via Style dropdown is to edit styles.js file which is present in CKEditor directory. The dropdown styles are based on this file, so you can easily modify code element there. You can also define your custom stylesSet.

Javascript remove ckeditor plugins on load

Html:
<textarea name="Editor" class="ckeditor" id="aboutme">#Model.Content</textarea>
Javascript:
<script>
config.removePlugins = 'elementspath,save,font';
</script>
When page load , i want to disable all ckeditor plugins.I tried above code however it did not work for me.
How can i remove plugins by javascript on load of page ?
Any help appreciates.
Thanks.

You can define a list of plugins to load (CKEDITOR.config#plugins):
config.plugins = 'wysiwygarea,toolbar,basicstyles,...';
But you can also restrict existing (default) list of plugins (CKEDITOR.config#removePlugins):
config.removePlugins = 'link,...';
Both options can be defined globally (config.js) or for a particular editor instance like
CKEDITOR.replace( 'editor1', {
removePlugins: 'link'
} );
Please refer to official Setting Configuration guide to know more.
Note: Since CKEditor 4.1, the presence of a plugin determines whether certain type content associated with that plugin is allowed or disallowed. Read more about Advanced Content Filter.

To answer my own question in the comment to oleq's answer:
I have a CKEditor instance that I'm using (with jQuery) like so:
window.onload = function () {
$ckTarget = $(".pageContentTextBox");
if ($(".pageContentTextBox").length > 0) {
$ckEditor = $ckTarget.ckeditor({
htmlEncodeOutput: true,
removePlugins: "link"
});
}
};
I was able to successfully remove the "link" plugin that way. I am going to set up an ASP.net User Control with public properties "extraPlugins" and "removePlugins" and insert the values using the client-side yellow tags ("code nuggets") to be able to use this on multiple pages with different plugins enabled/disabled.
I hope that helps someone!

You can also edit the config.js. This js is loaded/included from the ckeditor.js. config.js is a default custom editor js file. You can remove buttons or your plugins from the editor by including the list of names of elements to remove. For the list of names to remove from the editor please refer to the below link: https://ckeditor.com/old/forums/CKEditor-3.x/config.js-changes-not-reflected
Include the list of buttons or plugins to remove from the editor by appending them to the config.removebuttons and include this line of code in config.js
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript,Image,Flash,Table,HorizontalRule,Smiley...';

Dynamically add contents style to CKEditor 4 instance

I have passed a CSS filepath to my CKEditor instance with the contentsCss option, which works great. However, I need to be able dynamically add more styles that I can't add in the CSS file. In version 3 it looks like one could use the addCss function (see this forum post). Unfortunately, this doesn't seem to work in version 4 (see this forum post). Does anyone have an alternative? I am using the jQuery adapter, so a solution using either API would work.

I think you can do something like
$(window).on('print',function(e){
e.preventDefault();
var styles = '<style>'+/*calculation of styles*/+'</style>'
$('head').append(styles);
window.print();
});
or
$(window).on('load',function(e){
var styles = '<style>'+/*calculation of media query print styles*/+'</style>'
$('head').append(styles);
});

How to add dynamic customized ShareThis button?

I would like to use ShareThis on my site and add multiple buttons for the same service to share multiple objects. This is possible but I could only get the buttons to be in one of the default styles. How can I add buttons through javascript and still get them with a customized image?
stWidget.addEntry({
"service":"facebook",
"element": $('.fb_custom').get(1),
"url":"http://sharethis.com",
"title":"sharethis",
"type":"large", // one of the default styles
"text":"ShareThis" ,
"image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png", // image TO BE SHARED
"summary":"this is description1"
});

No problem, using type="custom" did the trick..wasn't on the doc, at least I couldn't find it!

Just create new buttons and put them on your server. Like
this:
"image":"http://www.MYOWNSERVER.com/images/myart.png

Minimal modifications to jQuery plugin sample to call plugin with no elements

I essentially have the same goal as in this question:
Calling a jQuery plugin without specifying any elements
However I am looking for the minimal edit to add a method to the "conclusion" built up in the jQuery plugin guide...which culminates in a jQuery "data" based tooltip plugin:
http://docs.jquery.com/Plugins/Authoring
I'm looking for the turnkey "right" way to add a method (the sort that finds its place in the list with reposition, show, hide, and update) for something that could be called with no elements. My case is I want to add a debug mode method you can call like:
$.tooltip('debug', true);
Like the author of the question I cite, I can get this working just fine with a parallel to:
$().tooltip('debug', true);
But the supplied answer wasn't cast in terms of the full-on .data-based tooltip plugin structure. So I can't quite figure out where to inject the offered advice of using .extend. Can anyone suggest the minimal edit to get the desired effect?

After looking at this a bit, I think the simplest modification to do is just to inject the extend call right after the $.fn.tooltip = function(method) { ... } and make it a synonym, like this:
$.extend({
tooltip: $.fn.tooltip
});
That seems to do the trick...and in the plugin's methods you just test to see if this is equal to jQuery (or $) to see if it's actually being called on "nothing".