We Keep Coding

CKEditor Character Count (charcount) is not working

If anyone has any experience with adding a charcount (Characters count) plugin for CKEditor, I sure could use a hand. This is my understanding of what needs to be done to add a plugin to CKEditor to count characters.
Create a plugin.js file which has the JavaScript to count the characters, and place this file at /web/server/root/ckeditor/plugins/charcount/plugin.js
Add the line config.extraPlugin = 'charcount'; to the config file at /web/server/root/ckeditor/config.js
Style the Character Count by adding CSS to the file at /web/server/root/ckeditor/skin/skin_name/editor.css.
Here is the plugin.js file I am using. Note: This JavaScript comes from the first post from this thread on the CKEditor forum.
CKEDITOR.plugins.add( 'charcount',
{
init : function( editor )
{
var defaultLimit = 'unlimited';
var defaultFormat = '<span class="cke_charcount_count">%count%</span> of <span class="cke_charcount_limit">%limit%</span> characters';
var limit = defaultLimit;
var format = defaultFormat;
var intervalId;
var lastCount = 0;
var limitReachedNotified = false;
var limitRestoredNotified = false;
if ( true )
{
function counterId( editor )
{
return 'cke_charcount_' + editor.name;
}
function counterElement( editor )
{
return document.getElementById( counterId(editor) );
}
function updateCounter( editor )
{
var count = editor.getData().length;
if( count == lastCount ){
return true;
} else {
lastCount = count;
}
if( !limitReachedNotified && count > limit ){
limitReached( editor );
} else if( !limitRestoredNotified && count < limit ){
limitRestored( editor );
}
var html = format.replace('%count%', count).replace('%limit%', limit);
counterElement(editor).innerHTML = html;
}
function limitReached( editor )
{
limitReachedNotified = true;
limitRestoredNotified = false;
editor.setUiColor( '#FFC4C4' );
}
function limitRestored( editor )
{
limitRestoredNotified = true;
limitReachedNotified = false;
editor.setUiColor( '#C4C4C4' );
}
editor.on( 'themeSpace', function( event )
{
if ( event.data.space == 'bottom' )
{
event.data.html += '<div id="'+counterId(event.editor)+'" class="cke_charcount"' +
' title="' + CKEDITOR.tools.htmlEncode( 'Character Counter' ) + '"' +
'> </div>';
}
}, editor, null, 100 );
editor.on( 'instanceReady', function( event )
{
if( editor.config.charcount_limit != undefined )
{
limit = editor.config.charcount_limit;
}
if( editor.config.charcount_format != undefined )
{
format = editor.config.charcount_format;
}
}, editor, null, 100 );
editor.on( 'dataReady', function( event )
{
var count = event.editor.getData().length;
if( count > limit ){
limitReached( editor );
}
updateCounter(event.editor);
}, editor, null, 100 );
editor.on( 'key', function( event )
{
//updateCounter(event.editor);
}, editor, null, 100 );
editor.on( 'focus', function( event )
{
editorHasFocus = true;
intervalId = window.setInterval(function (editor) {
updateCounter(editor)
}, 1000, event.editor);
}, editor, null, 100 );
editor.on( 'blur', function( event )
{
editorHasFocus = false;
if( intervalId )
clearInterval(intervalId);
}, editor, null, 100 );
}
}
});
Here is my config.js file. Notice I do have config.extraPlugin = 'charcount'; near the beginning of this file.
CKEDITOR.editorConfig = function( config ) {
config.extraPlugin = 'charcount';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Source','Save' ] },
{ name: 'editing', items : [ 'Find','Replace','Scayt', 'TextColor' ] },
{ name: 'insert', items : [ 'Image','CodeSnippet','Table','HorizontalRule' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','ShowBlocks','-' ] }
];
};
I added the following to the bottom of my editor.css file.
.cke_skin_kama .cke_charcount {
display:block;
float:right;
margin-top:5px;
margin-right:3px;
color:#60676A;
}
.cke_charcount span.cke_charcount_count,
.cke_charcount span.cke_charcount_limit {
font-style: italic;
}
Here is my stage.html file.
<script src="ckeditor/ckeditor.js"></script>
<textarea id="editor1"></textarea>
<script> CKEDITOR.replace('editor1'); </script>
Here is a screen shot of the expected outcome, where the bottom right hand corner of my CKEditor should have text which counts the characters.
Here is a screen shot showing that my CKEditor does not have a character count.
There are some other similar threads on this. However, the similar threads add a button to the CKEditor toolbar. The JavaScript I am using does not add a button to the toolbar, and instead displays text at the bottom right-hand corner of CKEditor, which is what I am attempting to achieve. Hopefully this difference makes this post unique enough to not be considered a duplicate.
If it helps, my Web Server OS is Linux Mint version 17.2.

I was not able to figure out what the issue is with the JavaScript I posted in my original question. However, I did come across a solution to this issue, which I want to share here in case others happen upon this post with a similar issue. I found a plugin for CKEditor called the Word Count & Char Count plugin. This plugin can be downloaded from http://ckeditor.com/addon/wordcount or https://github.com/w8tcha/CKEditor-WordCount-Plugin. This plugin totally works, and display the number of words, paragraphs and/or characters in CKEditor.

Ckeditor not working with angular App

I am having issue with ckeditor4.When I run it independently its working fine.But when I trying to run it with my angular app its not working.Here is my sample code:
var initSample = ( function() {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
return function() {
var editorElement = CKEDITOR.document.getById( 'editor' );
// :(((
if ( isBBCodeBuiltIn ) {
editorElement.setHtml(
'Hello world!\n\n' +
'I\'m an instance of [url=http://ckeditor.com]CKEditor[/url].'
);
}
// Depending on the wysiwygare plugin availability initialize classic or inline editor.
if ( wysiwygareaAvailable ) {
CKEDITOR.replace( 'editor' );
} else {
editorElement.setAttribute( 'contenteditable', 'true' );
CKEDITOR.inline( 'editor' );
// TODO we can consider displaying some info box that
// without wysiwygarea the classic editor may not work.
}
};
function isWysiwygareaAvailable() {
// If in development mode, then the wysiwygarea must be available.
// Split REV into two strings so builder does not replace it :D.
if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
return true;
}
return !!CKEDITOR.plugins.get( 'wysiwygarea' );
}
}
When I console after "isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' )" line its consoling fine.But it is not entering inside return function() { }.Any suggestion?

Javascript error - cannot call method 'appendChild' of null (svgicons)

I get this error in the Chrome Developer Tools, but I can't see any errors visually on the page.
Here is a short extract of the JS:
function svgIcon( el, config, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this.svg = Snap( this.options.size.w, this.options.size.h );
this.svg.attr( 'viewBox', '0 0 64 64' );
this.el.appendChild( this.svg.node );
// state
this.toggled = false;
// click event (if mobile use touchstart)
this.clickevent = mobilecheck() ? 'touchstart' : 'click';
// icons configuration
this.config = config[ this.el.getAttribute( 'data-icon-name' ) ];
// reverse?
if( hasClass( this.el, 'si-icon-reverse' ) ) {
this.reverse = true;
}
if( !this.config ) return;
var self = this;
I believe that this code does not tell much, so the page can be found here: http://goo.gl/j7M5r8
I have tried solving the problem by looking into other similar cases on Stackoverflow, and it points out that there are either something missing or something with the order it is read/written in.
I have not written svgicons.js, so there are not supposed to be any issues with it. However I can see that some has the same issues as me, but there are not provideded an explanation or answer for the problem. Here is basically the same question from another person.
Relevant files:
http://goo.gl/0RisGa
http://goo.gl/UgWHMS
http://goo.gl/X269NO

Check your hamburger_animations.js file - it's at http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/hamburger_animation.js
(function() {
[].slice.call( document.querySelectorAll( '.si-icons-default > .si-icon' ) ).forEach( function( el ) {
var svgicon = new svgIcon( el, svgIconConfig );
} );
new svgIcon( document.querySelector( '.si-icons-easing .si-icon-hamburger' ), svgIconConfig, { easing : mina.backin } );
new svgIcon( document.querySelector( '.si-icons-easing .si-icon-hamburger-cross' ), svgIconConfig, { easing : mina.elastic, speed: 600 } );
})();
document.querySelector( '.si-icons-easing .si-icon-hamburger' ) is resulting in null

understanding js code in classie.js

hey guys a i downloaded some simple effect coded in JS . the plugin is called classie.js and the guy has written some custom code that interacts with this plugin classie.js
a similar question got asked a while ago classie.js Question and the guy really perfectly answered how the code inside classie.js is functioning . thats great , so now i understand how the code inside classie.js works , now my problem is , there is a lot of code written that actually interacts with this plugin called classie.js and and i have some difficulty understanding . so let me explain what elaboratly is my problem :
The classie.js code :
( function( window ) {
'use strict';
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
// console.log(document.documentElement);
hasClass = function( elem, c ) {
// cons100%ole.log("elem is : " + elem + " c is " + c);
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
console.log('elem Logged');
console.log(elem);
elem.classList.add( c );
};
removeClass = function( elem, c ) {
console.log('removeClass function got used in if statement')
elem.classList.remove
( c );
};
}
else {
// I have deleted this part as its only a fallback for older browsers. :)
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else if ( typeof exports === 'object' ) {
// CommonJS
module.exports = classie;
} else {
// browser global
window.classie = classie;
}
})( window );
The code that Interacts with classie.js :
(function() {
// disable/enable scroll (mousewheel and keys) from https://stackoverflow.com/a/4770179
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [32, 37, 38, 39, 40], wheelIter = 0;
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function touchmove(e) {
preventDefault(e);
}
function wheel(e) {
// for IE
//if( ie ) {
//preventDefault(e);
//}
}
function disable_scroll() {
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
document.body.ontouchmove = touchmove;
}
function enable_scroll() {
window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
}
var docElem = window.document.documentElement,
scrollVal,
isRevealed,
noscroll,
isAnimating,
container = document.getElementById( 'container' ),
trigger = container.querySelector( 'button.trigger' );
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
function scrollPage() {
scrollVal = scrollY();
// console.log(scrollVal);
if( classie.has( container, 'notrans' ) ) {
classie.remove( container, 'notrans' );
return false;
}
if( isAnimating ) {
return false;
}
if( scrollVal <= 0 && isRevealed ) {
toggle(0);
}
else if( scrollVal > 0 && !isRevealed ){
toggle(1);
}
}
function toggle( reveal ) {
isAnimating = true;
if( reveal ) {
classie.add( container, 'modify' );
}
else {
noscroll = true;
disable_scroll();
classie.remove( container, 'modify' );
}
// simulating the end of the transition:
setTimeout( function() {
isRevealed = !isRevealed;
isAnimating = false;
if( reveal ) {
noscroll = false;
enable_scroll();
}
}, 600 );
}
// refreshing the page...
var pageScroll = scrollY();
noscroll = pageScroll === 0;
disable_scroll();
if( pageScroll ) {
isRevealed = true;
classie.add( container, 'notrans' );
classie.add( container, 'modify' );
}
window.addEventListener( 'scroll', scrollPage );
// trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
})();
alot of the code that interacts with classie.js is actually derived from a thread directly from stackoverflow : how to disable and enable scroll
now all the above is just for your clear understanding , what my question really is , is i don't quite understand the usage of the add method in the code that interacts with the classie.js API , its somehow does't make any sense to me and MDN doc's says very little about this method . what is that method really really doing ?? .
Edit :: The confusing part :
function toggle( reveal ) {
isAnimating = true;
if( reveal ) {
classie.add( container, 'modify' );
}
else {
noscroll = true;
disable_scroll();
classie.remove( container, 'modify' );
}
// simulating the end of the transition:
setTimeout( function() {
isRevealed = !isRevealed;
isAnimating = false;
if( reveal ) {
noscroll = false;
enable_scroll();
}
}, 600 );
}
The above is the part that confuses me , am i right when i am guessing , that if any function from classie.js gotta be used , it has to be used like follows :
classie.functionname(); ?? and can't be directly assessed ?? eg. functionname();
My Second Big Problem (understanding JS syntax of classie.js) :
also as a supplementary question , you can choose not to answer , but certain parts of the code that interacts with classie.js has a lot of confusing syntax , let me point it out .
in the disable_scroll function there is this :
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
and in the enable scroll function there is this :
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
now i understand
A = B ;
where ur assigning A the value of B ;
But The above Syntex is more like , A = B = C ; and thats totally over my head .
can somebody clarify Please
if somebody can be elaborate and explain , it would be great .
Thank you.
Alexander.

Don't have enough rep to comment yet.
The add() method is not a 'native' js function. If you look at the classie.js code, towards the end of it the is an object 'classie' which defines public shortcuts to the internal function addClass :
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
These shorcuts will let you call the internal functions (which cannot be accessed otherwise from the global scope) by calling classie.publicFunctionName(args) or window.classie.publicFunctionName(args) where "publicFunctionName" is the shorcut defined, which is exactly what the second chunk of code does :
...
classie.remove( container, 'modify' );
...
classie.add( container, 'modify' );
All the addClass() method does is add a class to the html element it is called on.
I believe this is called the 'revealing module' design pattern, but not 100% sure.
Hope that helps at least a bit.
If you want to learn a bit on js design patterns I warmly recommend reading Addy Osmani's very good (and free) book here : http://addyosmani.com/resources/essentialjsdesignpatterns/book/

How to change data produced by CKEditor dialog

I want to do some stuff with the image that is added using Image toolbar button in CKEditor.
I actually want to get the url and modify if required.
How can I do it?
I am able to do that stuff using dataFilter but only when image is directly pasted into the
editor. But dataFilter rule doesn't execute when image is added using default Image button in editor.
CKEDITOR.replace( 'idContent' );
CKEDITOR.on( 'instanceReady', function( e ) {
CKEDITOR.instances.idContent.dataProcessor.dataFilter.addRules( {
elements: {
"img": function (element) {
var imageSrcUrl = element.attributes.src;
// Do some stuffs here.
}
}
} );
} );

I achieved my purpose using following code
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data
var dialogName = ev.data.name,
dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ) {
var onOk = dialogDefinition.onOk;
dialogDefinition.onOk = function( e ) {
var input = this.getContentElement( 'info', 'txtUrl' ),
imageSrcUrl = input.getValue();
//! Manipulate imageSrcUrl and set it
input.setValue( imageSrcUrl );
onOk && onOk.apply( this, e );
};
}
});