Solved

CKEditor - will not function

Posted on 2016-10-28
7
80 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
[X]
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
  • 4
  • 3
7 Comments
 
LVL 110

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 110

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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 3

Author Comment

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

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
15 puzzle in Javascript/html 2 81
Increase image taller on inner pages 2 46
send html form with multipe immages as buttons 2 35
display data from multiple ajax calls 9 35
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to use NetBeans IDE 8.0 for Windows to connect to a MySQL database. Open Services Panel: Create a new connection using New Connection Wizard: Create a test database called eetutorial: Create a new test tabel called ee…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

736 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