How to add Source Editing Area for wysiwyg editor that comes with version 1.7.2?

Question

I tried to follow the instruction on the following post. But it appears to be an instruction on a different version. So it didn't work for me. 

http://www.question2answer.org/qa/42919/how-i-add-source-editing-area-for-wysiwyg-editor?show=42919#q42919

 

 

Comments

Soon you won't need this ...http://www.question2answer.org/qa/51849/most-powerful-editor-meets-q2a-a-revolution-has-come

Answer 1

Hello There , 

You can Follow these steps:

1. Download the Source Editing area plugin from http://ckeditor.com/addon/sourcearea

2. Put the sourcearea folder in the .zip file in qa-plugin/wysiwyg/ckeditor/plugins

3. Edit the qa-plugin/wysiwyg-editor/ckeditor/config.js​ and add exactly this line:

{ name: 'source', items: [ 'Source' ] },

Immediately below this line:

{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteFromWord', '-', 'Undo', 'Redo' ] },

4. In that file also add this line (if not already there) :

config.extraPlugins: 'sourcearea';

Immediately below this line:

config.fillEmptyBlocks = false;

And that's it. 

Enjoy .. 

(Update - removed the extra quotes)

Comments

I followed your instruction to add source to the editor, however it didn't work. Please see below for my config.js file details:

/**
 * @license Copyright (c) 2003-2014, 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
       
    // NOTE: if you make changes to this file, make sure that you do not overwrite it when upgrading Q2A!

    // The toolbar arrangement, two rows of buttons
    config.toolbar = [
        { name: 'basic', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Superscript' ] },
        { name: 'color', items: [ 'TextColor', 'BGColor' ] },
                { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote' ] },
        { name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
        { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Smiley' ] },
                { name: 'links', items: [ 'Link', 'Unlink' ] },
        '/',
                { name: 'source', items: [ 'Source' ] },
        { name: 'font', items: [ 'Font', 'FontSize', 'Format' ] },   
        { name: 'last', items: [ 'RemoveFormat', 'Source', 'Maximize' ] },
                
    ];



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

    // Make dialogs simpler
    config.removeDialogTabs = 'image:advanced;link:advanced;table:advanced';



    // Use native spell checking (note: Ctrl+right-click is required for native context menu)
    config.disableNativeSpellChecker = false;

    // Prevent blank paragraphs
    config.fillEmptyBlocks = false;
        config.extraPlugins: 'sourcearea';
        
};


Any comments on why is not working?

---

Few questions -

1. Is your editor working fine after modification
2. Do you see any errors in JS Console if the editor plugin broken
3. Have you refreshed the browser using Ctrl + R or cleared cache after you have done some modifications

---

Hi,

1. Editor is working fine after modification, but I didn't see the source icon on the editor.
2. How to identify any errors in SJ Console as I don't see it visually on the plugin itself as it loads just fine.
3. Yes, I have refreshed the browser using by clearing cache after I have done some modifications.
Extra point: If I move the toolbar within config.js file, then the changes are reflects on the editor.

---

Is the source area plugin is bundled properly ?

---

And what do you mean by - "If I move the toolbar within config.js file" ?? In the above steps I asked to put the config in config.js only

---

I downloaded it from the ckeditor.com, which the link that you provided here earlier. I uploaded the folder in the right place. However there are 4 different versions (4.5     4.4    4.3    4.2) to use. Which one is the correct version to install?

---

As you asked in the above steps I put the config in the config.js only. What I meant to say was that if I change the following code...

{ name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
 { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Smiley' ] },

into this...

 { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Smiley' ] },
{ name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },

the location of the toolbar in the editor changes as well.

---

It finally worked. Thanks for the help.

---

Did not work for me until I changed config.extraPlugins: 'sourcearea'; to config.extraPlugins = 'sourcearea'; ([:] to [=])