Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

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

+2 votes
318 views
asked Feb 7, 2016 in Plugins by Ankhamax

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

 

 

Q2A version: 1.7.2

1 Answer

+1 vote
answered Feb 7, 2016 by Ami
selected Feb 15, 2016 by Ankhamax
 
Best answer

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)

commented Feb 10, 2016 by Ankhamax
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?
commented Feb 10, 2016 by Ankhamax
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.
commented Feb 15, 2016 by Ankhamax
It finally worked. Thanks for the help.
commented Mar 24, 2017 by btwebgroup.com
Did not work for me until I changed config.extraPlugins: 'sourcearea'; to config.extraPlugins = 'sourcearea'; ([:] to [=])
...