We help IT Professionals succeed at work.

Custom ckeditor using builder

Rohit Bajaj
Rohit Bajaj asked
on
337 Views
Last Modified: 2016-02-23
Hi,
I tried using ckeditor builder from here :
http://ckeditor.com/builder
but I am unable to make it the way i want...
Here is a snapshot of what toolbar features i need :
Screen-Shot-2016-02-09-at-8.46.14-PM.pngthere seems to be too many confusing plugins on their side...
Any help in selecting the right plugins that works...
I tried making a custom build on this... and when i used it... things appeared in a strange way.
I need the minimum configuration so that it appears like the above.

Thanks
Comment
Watch Question

Principal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Pravin AsarPrincipal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005

Commented:
Here is a sample editor using the above config file.
Replace the appropriate path for ckeditor library

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A Simple Page with CKEditor</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="./ckeditor/ckeditor.js"></script>
    <script src="./ckeditor/config.js"></script>
</head>
<body>
<form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
    <script>
        // Replace the <textarea id="editor1"> with a CKEditor
        // instance, using default configuration.
        CKEDITOR.replace( 'editor1' );
    </script>
</form>
</body>
</html>

Author

Commented:
Hi,
The above doesnt work if i use cutomize editor : http://ckeditor.com/builder
I want to download a barebones editor without any plugins buttons etc... and then
add all the above buttons i showed you...
If i just download the basic editor then the underline button doesnt appear...

The reason for doing this is... full editor size is almost 3 times the basic one...

Is it possible to download a bare bones thing without anything and then custom add it..
Or if not... download the basic one and add the above buttons like font, size and underline in it ?
Pravin AsarPrincipal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005

Commented:
You need to use standard editor as starting point.

Author

Commented:
Why is that... Wont that be too large compared to what i need ?
Pravin AsarPrincipal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005

Commented:
What are worried about. Based on the config, appropriate plugins are loaded.

Do you have any constraint on the disk space on server?

Author

Commented:
no space constraint. but if say i use full or standard there js and css files are large making page slow to load...
as it will require network call to fetch
Pravin AsarPrincipal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005

Commented:
Plugins code is loaded based on the config file settings. So that loading speed would not be constraint

You want to test, use Google Chrome Debugger (look at the  "Network" and "Timeline" tabs).

Author

Commented:
Hi,
One thing that i saw on ckeditor builder... is when i download the optimized file i see the size of ckeditor.js is around 500KB.
But when i download the source one the size is 3 KB !!! ??
How is that...ideally the optimized one should have less size...

Author

Commented:
Also i am getting the following error when i include the ckeditor custom build :
Screen-Shot-2016-02-13-at-6.14.40-PM.pngAny idea why this could be happening..
ckeditor was working perfectly before when i downloaded the full thing.. I downloaded the standard optimized build with minimalist skin.. and its not loading... getting the above error ?

Thanks

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.