Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CKEditor - will not function

Posted on 2016-10-28
7
71 Views
Last Modified: 2016-10-31
Hi,

I have custom-built a standard version of CKeditor with plugins, downloaded and installed.

When I try to use it, it doesn't work; the editor does not show at all.  The console log is attached.

This is my call...

<script type="text/javascript">
	CKEDITOR.replace( 'txtBody',
    {
        /*extraplugins: 'youtube',*/
		//uiColor : '#F90',
        uiColor : '#FC0',
		//toolbar : 'Basic',
		//toolbar : 'FOBG',
		on :
		{
			instanceReady : function( ev )
			{
				this.dataProcessor.writer.setRules( 'p',
					{
						indent : false,
						breakBeforeOpen : false,
						breakAfterOpen : false,
						breakBeforeClose : false,
						breakAfterClose : false
					});
			}
		}
    });
</script>

Open in new window


and my config.js:
/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
};

Open in new window


Without plugins it works OK.

Can anyone tell me what the problem is please?

Cheers,

  Col
localhost-1477669786439.log
0
Comment
Question by:colinspurs
  • 4
  • 3
7 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41864162
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41864181
Not really Ray.  They don't seem to have found an answer either, and a search for Aggregate CKeditor.js seems to bring up Drupal-related issues only, and I'm not using that.

Since the plugin-free build works, maybe I could debug by adding one plugin at a time and seeing which one causes the issue.  

On the subject of plugins, do I have to create a new build each time or could I just add a plugin folder from another build into my current one?  I know I have to enable plugins after adding them but the editor should still work even if the plugins don't.

It's been a tough week, all I seem to have been doing is chasing down problems of one kind or another.
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 41864224
...plugin-free build works, maybe I could debug by adding one plugin at a time...
That is exactly what I would do!  But since this appears that it may be related to a missing path, if the first plug-in you try fails, take it out and try another plug-in.  It may have something to do with the paths to the plug-ins, and if that's the case, it's likely any plug-in could fail.
1
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 3

Author Comment

by:colinspurs
ID: 41864309
I've had another play without success...will revisit Monday.  Cheers.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41864313
Have a good weekend.
1
 
LVL 3

Author Comment

by:colinspurs
ID: 41866982
this appears that it may be related to a missing path, if the first plug-in you try fails, take it out and try another plug-in.  It may have something to do with the paths to the plug-ins, and if that's the case, it's likely any plug-in could fail

I reinstalled a vanilla version, then added one plugin that would be very useful to me.  I used CKEditor's CKbuilder app.  Running CKEditor thereafter showed a lot of bugs with the plugin.  including missing files and incorrect paths, as you indicated Ray.

After my debugging skills ran out I contacted the plugin author who advised downloading the plugin direct, as "CKbuilder has a lot of bugs relating to not loading all files".  I have done this and this particular plugin works OK.

So the moral is, try one plugin at a time, and don't use CKbuilder if it can be avoided.

Cheers
0
 
LVL 3

Author Closing Comment

by:colinspurs
ID: 41866989
With missing files as a clue, I found the errors in the plugin's PHP code, contacted the author, downloaded the plugin directly and all seems OK.

Thanks.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question