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

Update Plugin: CKEditor4 (V1.4.3)

+31 votes
9,597 views
asked Aug 16, 2013 in Plugins by sama55
edited Jul 10, 2015 by sama55

Thank you for so many downloads (5,000 over). I have added a feature that CKEditor4 fans have been waiting!

Highlight of V1.4.2 [2015/07/04]:

This version is for CKEditor 4.4.8 with a Security Patch Released. No functional changes. However, I recommend that you immediately upgrade. In addtion, I am developing V1.5.

Highlight of V1.4 [2015/02/14]:

  • Update CKEditor core version from 4.4.5 to 4.4.7
  • Add "Dynamic Changer" (Text <> Standard <> Advanced)
    Each user's setting is saved in browser (cookie).
  • Support i18N (Language)
  • Add skin (icy_orange, office2013)
  • Support Bootstrap theme

View (Dynamic Changer)

Features

  • Skin option (You can change skin in plugin admin panel)
  • Config option (You can customize buttons and configuration in plugin admin panel)
  • Dynamic changer (Users can change edit mode ["Basic"<>"Standard"<>"Advanced"] on site)
  • Inline editing
  • htmlLawed (HTML security filter) controller

Skins

Compatibility

1.5.1 later, 1.6.x, 1.7

Caution

The behavior of the editor is delicately different V3 and V4. When contents apply to the existing site, it is necessary to apply it after confirming that existing contents do not fail enough.

Update history

  • [V1.4.3] Tune default config values for CKEditor 4.4.8.
                 Remove inline editing feature.
  • [V1.4.2] Upgrade CKEditor [4.4.7 to 4.4.8]
  • [V1.4.1]
    Fixed plugin version mistake [From V1.4 (RC) => 1.4.1)
    There is no changes about logic.
  • [V1,4RC (2015/02/13)]
    Update CKEditor core version from 4.4.5 to 4.4.7
    Add dynamic changer
    Support i18n (Language)
    Add skins (icy_orangeoffice2013)
  • [V1.3 (2013/10/03)]
    Update CKEditor core version from 4.3.3 to 4.4.5
    Add moono dark V4.4.2
    Add skin auto detect feature
    Add htmlLawd controler
  • [V1.2 (2013/03/17)] Update CKEditor version from 4.2 to 4.3.3.
  • [V1.1.3 (2013/12/12)] Fixed miss spell. Support annonymous inline edit. Thanks Kai.
  • [V1.1 (2013/11/18)] Added inline editing feature.
  • [V1.0.2] Add moonocolor/skin.js Thanks maxjtechno.
  • [V1.0.1] Replaced moonocolor skin. See this issue. The person using 1.0, please re-download and replace qa-plugin/ckeditor4/skins/moonocolor. Thanks maxjtechno.

Related plugin: CKEditor4 for admin

Download

Have fun !!

Q2A version: 1.6.x, 1.7
commented Oct 5, 2014 by civil.engineer
http://www.question2answer.org/qa/?qa=blob&qa_blobid=2317839303321121902

asking editor is type 1 and when I click add image, there is upload tab.
answering editor is type 2, when i click add image, no tab to upload
commenting editor is like simple editor, no button.

why different editors? why no tab to upload on answering ? is there any problem like that for other users or it is a theme problem you think ?
commented Oct 6, 2014 by sama55
What is type 2? You might be creating a new question instead of a comment.

18 Answers

0 votes
answered Aug 16, 2013 by anhmjn
i change something in config.js but it's not working ?
commented Aug 17, 2013 by sama55
Your setting may be reflected by clearing cache of client(browser) or server.
+2 votes
answered Dec 4, 2013 by q2apro
edited Dec 4, 2013 by q2apro

Dear sama55,

Today I tried to update the ckeditor 3.6.x - that is coming with the default q2a (v1.6.2)  - with the new version ckeditor 4.1.x.

However, I failed because I had no time to dig into the problem...

Your plugin solved my problem, thanks for saving me some hours :o)  much appreciated.

どうも有難う

---

Edit: you may want to add that the user gets warned when accidentially clicking away from the editor and loosing content by using Jquery:

$(document).ready(function(){

    /* warn user on leaving if he changed text */
    if(typeof(CKEDITOR) !== 'undefined') {
        var warn_on_leave = false;
        CKEDITOR.on('currentInstance', function() {
            try {
                CKEDITOR.currentInstance.on('key', function() {
                    warn_on_leave = true;
                });
            } catch (err) { }
        });
        $("input:submit").click( function() {
            warn_on_leave = false;
            return true;
        });
        // show popup
        $(window).bind('beforeunload', function() {
            if(warn_on_leave) {
                return 'Your text has not been saved and gets lost if you navigate away.';
            }
        });
    }
            
}); // end document ready

 

PS: I found no built-in "warning" of ckeditor.

commented Dec 4, 2013 by sama55
edited Dec 5, 2013 by sama55
Your warning is good. The saving process has reformability still more.

About autosave plugin
In the case of CKEditor4 plugin, user changes editor settings in admin panel.
"admin" > "plugins" > "CKEditor4 option"

Toolbar bottons option:
'autosave'

Other configration option:
extraPlugins:'autosave',
autosave_SaveKey:'autosaveKey',
autosave_NotOlderThen:1440
commented Dec 5, 2013 by q2apro
Elegant solution, I have overseen this option field! Thanks a lot, great work :)

By the way, here are all my configurations for a usable, simple ckeditor: http://stackoverflow.com/questions/17030689/how-to-configure-simple-links-and-image-attaching-in-ckeditor/20387086#20387086
+1 vote
answered Apr 3, 2014 by s3bastian
works great, but I can't extend the editor with editor plugins like this one:

http://ckeditor.com/addon/pbckcode

I changed the config.js but nothing happens. the plugin does not appear!
commented Apr 3, 2014 by sama55
Customize on admin panel.
Admin > Plugins > CKEditor4 option > "Other configration"
+2 votes
answered Apr 14, 2014 by Mikey Zhao

Hiya, I've actually got a question.

http://ckeditor.com/builder allows (La)TeX2MathML and equation editors.

How would I implement this? Do I have to download the Latex plugin and put it into a folder?

Thanks in advance!

Mikey

commented Apr 14, 2014 by sama55
@Mikey

1. Download (La)TeX2MathML V1.0.1 for CK V4.3
2. Make "texzilla" folder under "qa-plugin/ckeditor4/plugins"
3. Upload files under "src" to "texzilla" folder
4. Goto Admin > Plugins > CKEditor4 options
5. Add button into "Toolbar buttons" option (e.g. "['texzilla'],")
6. Add plugin into "Other configuration" option (e.g. "extraPlugins: 'texzilla'")

Example options:

['texzilla'],
['Bold','Italic','Underline','Strike'],
['Font','FontSize'],
['TextColor','BGColor'],
['Link','Unlink'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
['RemoveFormat', 'Maximize']
---
toolbarCanCollapse:false,
removePlugins:'elementspath',
resize_enabled:false,
autogrow:false,
entities:false,
extraPlugins: 'texzilla'
+1 vote
answered Jun 12, 2014 by solveit

Hi, Thanks for nice work.

I find  'codesnippet ' (ckeditor plugin) usfull, but after install it and call in setting in Q&A, the Editor not show anything, can you test it and let me how can i install this plugin?

or refrer me to related plagin, I want to use ckeditor but need to let users post

 

 

commented Jun 12, 2014 by sama55
codesnippet plugin seems to be compatible with CKEditor V4.4. Now, "CKEditor4" plugin is made with CKEditor V4.3. I do not try it, but think like version compatibility issues. In addition, contents input into textarea are filtered by Q2A core to keep security. Even if this plugin works in CKEditor4, contents may be renewed by Q2A core. It may be necessary to review not only CKEditor4 but also the disposal of Q2A cores to use this plugin.
commented Jul 25, 2014 by Richard Prestone
Hi Sama5 - Thanks for fantastic plugin.
One quick question - can I remove items from image_info tab.
For example, can I remove the following:-
URL, Alternative text, Preview box

I've tried using removeDialogFields:  in config but cant get it to work.

Thank you for your help.
commented Jul 25, 2014 by sama55
If you have much knowledge about Javascript, it may come true by hacking CKEditor. However, it is very difficult. Unfortunately, If you do not know a lot about program, I recommend that you give it up.
+1 vote
answered Aug 14, 2014 by QA-Themes
Great plugin Sama, I switched to it in most my sites.

the only problem I found was that it doesn't read editor's template directory to list it's templates. so in order to add a new template webmaster has to edit it's code to add new editor templates.
+2 votes
answered Sep 30, 2014 by truthonlytruth

Hi Sama,

Great plugin... keep up the good work...

One problem remember these seettings in Administration center - Viewing

Even both are uncheked, it is detecting and link URL added by user....

How can I fix this problem????

Thank you so much... :)

commented Sep 30, 2014 by sama55
edited Sep 30, 2014 by sama55
URL conversion is carried out by viewer processing in the output. Therefore, URL conversion has nothing to do with editor. Even default editor will become the same state. Do you use "http://localhost" on your test? So, because this URL do not include "dot", it is not converted into anchor.

OK: http://localhost.com
NG: http://localhost

Refer regular expression of qa-include/qa-app-format.php::qa_html_convert_urls()

In addition, when I turn off upper option, I confirmed that all URLs are not converted.
commented Sep 30, 2014 by truthonlytruth
Sorry, I have made a mistake and report wrong way...
if you write or paste a link, it works... It does not convert it...
But if you use editor anchor button to add a link it is diffrent story...
Even I turn those options off the editor is bringing anchor buttons and letting user add links to the editor....
By using achor buttons they can add URL links to the questions or answers

Thanks
commented Sep 30, 2014 by truthonlytruth
Never mind i have solved my problem....
From options view under your plugin, I have removed this line of code

['Link','Unlink'],

That fixed the problem... :)
Thanks for the great plugin...
+2 votes
answered Sep 30, 2014 by truthonlytruth
try to add youtube plugin but could not get it working

download youtube folder and uploaded under ckeditor plugin folder

then went to config add this to toolbar

['youtube'],

and then config section added this:

extraPlugins:'youtube',

Am I missing something?

Thanks
asked Oct 1, 2014 in Plugins by sama55
edited Oct 2, 2014 by sama55
Tips: YouTube embed video (iframe) with CKEditor4 plugin
+1 vote
answered Oct 2, 2014 by truthonlytruth
Hi,

How can I add default rel=nofollow user added link into editor???
Thanks
commented Oct 3, 2014 by maxjtechno
I think you should change the line 36 of the file qa-seo-links.php ( https://github.com/Towhidn/Q2A-SEO-Links/blob/8d6c64d5d96d2ae4a926cf0e71f572ff7e2261a1/q2a-seo-links/qa-seo-links.php#L36 )

from :
if( (isset($site_url['host'])) && (!(empty($site_url['host']))) && (!(empty($link->getAttribute('href')))) )
to :
if( (isset($site_url['host'])) && (!(!($site_url['host']))) && (!(!($link->getAttribute('href')))) )
commented Oct 3, 2014 by maxjtechno
However I just verified now that the *default* rel should already be "nofollow", for every link.
The plugin is useful when you want to **change** this default relation type ("nofollow") to another type (for instance : "dofollow")
Did you find a link inserted by a user that did not have the "nofollow" relationship specified ?
+2 votes
answered Oct 3, 2014 by civil.engineer
is there turkish language option for this plugin ? or which languages ?
commented Oct 3, 2014 by sama55
By default, CKEditor detects language of the client (browser) automatically and decides language. If you fix language to Turkish, you perform the following operation.

1. Go to "admin" > "plugins" > "CKEditor" options
2. Add "language:'tr'" line in "Other configuration"
    [Don't forget (,) comma of the last line]

Refer to page of user interface for detail.
http://ckeditor.com/ckeditor_4.3_beta/samples/uilanguages.html
+1 vote
answered Oct 5, 2014 by civil.engineer

while answerin when I click to add a image button, upload tab doesnt seem. While asking new question no problem but while answering, ı can only give image url, cant upload. How can I fix this ?

And there are 2 types of editor ? But I dont know it depends on what ?

 

 

thanks

commented Oct 5, 2014 by Ami
I emailed you one JS code . Just try that out
+2 votes
answered Oct 19, 2014 by truthonlytruth
Sama,

Thank you for the version 1.3

One question how can I add insert "Code" button to the editor?
Thanks
commented Oct 20, 2014 by truthonlytruth
Well, I do not have a website yet, I am trying everything on a local environment... Let me know if you still need a website?
Thanks
commented Oct 20, 2014 by sama55
I got it. Thanks.
...