Update Plugin: CKEditor4 (V1.4.3)

Question

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

• Moono
• Moono Dark
• Moono Color
• Moono Blue
• Kama
• icy_orange NEW
• office2013 NEW

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_orange, office2013)
• [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 !!

Comments

Thanks, it works ! Is it possible to do inline editor ? http://ckeditor.com/demo#inline

---

Thanks, It is very nice. I want to make it RTL which file i need to edit?

---

@Another one: I'm interesting in inline editor. However, because Q2A question page include editable contents and uneditable content, it is difficult to equip immediately.

---

@Hussain: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.contentsLangDirection ?

---

@Sama55
can you give me the simple solution. which file and line # etc.
I am not a programmer.

---

1. login as admin.
2. "Admin" > "Plugins" > "CKEditor4" > "Other configration"
3. Input lines below.

contentsLangDirection:'rtl',
toolbarCanCollapse:false,
removePlugins:'elementspath',
resize_enabled:false,
autogrow:false,
entities:false

---

Thank you Sama,
Its working...
Text are is changed to RTL. One more thing how can i set custom font as default font in this Editor?

---

When you edit contents.css, you will find happiness. I recommend that you use FIreBug.

---

Inline editing is a great feature... good job !

---

Two questions:
1. how to define another height (css is not working)? Within "Other configration" I tried adding "height:500," without effect.
2. The inline editing ... i see i can edit on page now, but how do i save the changes?

Thanks sama55, this is probably your best plugin :-)

EDIT: I see that the config.height=550; in config.js does not work either. Having only the height parameter does not work either, weird.

---

> 1. how to define another height?

Change "height:500," > "height:'500px'"
Point one: Value is necessary single / double quote.
Point two: Because it becomes javascript error, in the case of last line, you never attach comma.

> 2. The inline editing

See lower description of "Allow inline editing".
Add lines below to Other configration:
extraPlugins:'savebtn',
saveSubmitURL:'http://xxxxxxxxxx/qa-plugin/ckeditor4/qa-ckeditor4-ajax.php'"

---

Thanks for your quick answer.

1. height still does not work (there is no javascript error). I tried your suggested: height:'500px'
Does it work for you?

2. I have not seen the exta hint to add the save button, thanks for pointing out. Sometimes I should read better :-)

Idea for n°2: Maybe you add those 2 javascript lines using PHP, because i think many users will not read it and forget to add them ;-)

---

> 1. height still does not work

It is strange. Other script (ex: filebrowserImageUploadUrl ?) may influence it ... Check script lines for CKEditor4 in HTML view. In addtion, you may find something by tracing with script debugger.

---

Sorry, my mistake, problem was the browser cache that still had the old settings... it works now!

PS: I tried to add the wordcount plugin: http://w8tcha.github.io/CKEditor-WordCount-Plugin/ and added to "Other configration" the following:

extraPlugins: 'wordcount',
wordcount: {
    showWordCount: true,
    showCharCount: false,
    charLimit: '21844',
    countHTML: false,
    wordLimit: 'unlimited'
}

But it seems not to work (there is no javascript error). Do you have any idea why?

---

Can somebody check: I added some posts with the new editor, all were HTML. In the database however, qa_posts, field "format" I get several empty fields instead of the required "html" - bug?

---

In my environment, wordcount plugin works definitely.

My "Other configration":

toolbarCanCollapse:false,
removePlugins:'elementspath',
resize_enabled:false,
autogrow:false,
entities:false,
extraPlugins:'savebtn,wordcount',
saveSubmitURL:'http://(**my host**)/qa-plugin/ckeditor4/qa-ckeditor4-ajax.php',
height:'300px',
wordcount: {
    showWordCount: true,
    showCharCount: true,
    charLimit: 100,
    countHTML: false,
    wordLimit: 'unlimited'
}

About "format" in qa_post table:

I think that this is not a bug. The contents that you input texts including only <P>/<BR> in CKEditor was converted into plain text. Check thread below.
http://www.question2answer.org/qa/29313

---

Thanks for your help sama! Now it works. Problem could have been that I declared an extra line with "extraPlugins:'wordcount'," instead of putting them together like you did: "extraPlugins:'savebtn,wordcount',".

If I can help you with anything, let me know. :)

---

This is my configuration now:

Toolbar buttons:

['Bold','Italic','Underline','TextColor'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Outdent','Indent','Blockquote'],
['Link', '-', 'Image']

Other configration:
toolbarCanCollapse: false,
removePlugins: 'elementspath',
extraPlugins: 'autogrow,wordcount,savebtn',
autogrow: true,
resize_enabled: true,
entities: false,
language: 'de',
height: '400px',
removeDialogTabs: 'image:advanced;image:Link;link:advanced;link:upload',
linkShowTargetTab: false,
linkShowAdvancedTab: false,
linkShowTargetTab: false,
colorButton_colors: 'F00,11C11D,00F,B700B7,FF8C00,008080,808080,FFFFFF',
colorButton_enableMore: false,
saveSubmitURL:'http://www.mydomain...com/qa-plugin/ckeditor4/qa-ckeditor4-ajax.php',
wordcount: {
    showWordCount: true,
    showCharCount: false,
    charLimit:'unlimited',
    countHTML: false,
    wordLimit: 'unlimited'
}

PS: There are two typos:
Toolbar B*u*ttons
Other config*u*ration

---

ah, and one more information: When the "autogrow" plugin is enabled, the height parameter for the editor gets ignored!

---

Additional tip: CKEditor 4 still does not work with smartphones, but inline editing seems to work. Because of that there is a problem with line breaks, read here about the core hack: http://www.question2answer.org/qa/24164/comes-that-content-sometimes-saved-despite-using-ckeditor?show=24334#a24334

I solved this by changing qa-ckeditor4-layer.php each:
if(qa_opt('ckeditor4_inline_editing')) {
to:
if(qa_opt('ckeditor4_inline_editing')&&!qa_is_mobile_probably()) {

Maybe this information will help one or the other ;-)

---

* Bug discovered: Inline Editing does not work if post is by anonymous.

Problem is: qa-ckeditor4-ajax.php → if(qa_is_logged_in()) { ...

---

I tried to solve the bug by checking if post-is-by-user:

// get postid
$postid = str_replace('_content', '', substr(qa_post_text('id'), 1));
$userid = qa_get_logged_in_userid();
$post = qa_db_select_with_pending(qa_db_full_post_selectspec($userid, $postid));
$isbyuser = qa_post_is_by_user($post, qa_get_logged_in_userid(), qa_cookie_get());

if(qa_is_logged_in() || $isbyuser) {
...

but does not seem to work yet.

---

it works! we have to include above:

require_once QA_INCLUDE_DIR.'qa-app-cookies.php'; // new

---

Thank you for your report.

1. Miss spell, and, Inline editing by annonymous
Fixed in V.1.1.3.

2. Autogrow
Because it is not included in CKEditor4 plugin package, this plugin needs downloading. And, add "extraPlugins:'autogrow'," to "Other configuration".
http://ckeditor.com/addon/autogrow
In addtion, it seems that chuning of "height" is necessary "autoGrow_*" option. autogrow seems to have various problems to me.

---

In qa-ckeditor4-ajax.php you removed the if-statement. But don't we need to check if the post is by the user himself or if it is admin? Otherwise some other person could ajax-post new content to change the post, I guess. With qa_post_set_content() I did not find a permission check, did you?

---

Because Q2A core should decide user's edit permission in qa-ckeditor4-layer.php, probably, I think it is OK ...?

is_array(@$this->content['q_view']['form']['buttons']['edit'])

---

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 ?

---

What is type 2? You might be creating a new question instead of a comment.

Answer 1

i change something in config.js but it's not working ?

Comments

Your setting may be reflected by clearing cache of client(browser) or server.

Answer 2

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.

Comments

PS: How can I add the "autosave" plugin of ckeditor to your q2a plugin?
http://ckeditor.com/addon/autosave

---

ah, i see I just have to add the extracted plugin.zip, upload it to plugins, and add to config.js:  " config.extraPlugins = 'autosave'; "

---

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

---

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

Answer 3

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!

Comments

Customize on admin panel.
Admin > Plugins > CKEditor4 option > "Other configration"

Answer 4

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

Comments

The latest version of CKeditor will be included in Q2A 1.7 when released (in a month or so). That will also include a method to more easily customize the plugin.

If you want to try it now, you can download the beta from https://github.com/q2a/question2answer/tree/dev then copy the folder qa-plugin/wysiwyg-editor from there to your installation. Then upload the build-config.js file to the CKeditor builder and customize it.

See here for instructions: https://github.com/q2a/question2answer/blob/dev/qa-plugin/wysiwyg-editor/CUSTOMIZE.md

---

Builder seems simple tool which only packages parts which you want. This is not intelligent tool solving dependence of plugins. When you add specific plugin, it is necessary to install all plugin with dependence according to dependence list of the plugin page. And it is also necessary to coordinate configuration options.

@Scott Unfortunately,  editor of V1.7 under development did not move in my environment.

Q2A V1.7dev + wysiwyg for V1.7 : NG
Q2A V1.6.3 + wysiwyg for V1.7 : NG

---

@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'

---

http://www.question2answer.org/qa/33769/how-to-add-configuration-for-ckeditor-4-3-plugins

Answer 5

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

 

 

Comments

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.

---

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.

---

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.

Answer 6

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.

Answer 7

Hi Sama,

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

One problem remember these seettings in Administration center - Viewing

Detect and link URLs in posts:
Open linked URLs in a new window:

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

How can I fix this problem????

Thank you so much... :)

Comments

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.

---

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

---

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...

Answer 8

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

Answer 9

Hi,

How can I add default rel=nofollow user added link into editor???
Thanks

Comments

You could try this plugin : http://www.question2answer.org/qa/29001/new-plugin-seo-links

---

When I upload that plugin i get this error
Fatal error: Can't use method return value in write context in /home/mysite/public_html/qa-include/qa-base.php(510) : eval()'d code on line 36

---

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')))) )

---

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 ?

Answer 10

is there turkish language option for this plugin ? or which languages ?

Comments

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

Answer 11

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

Comments

I emailed you one JS code . Just try that out

Answer 12

Sama,

Thank you for the version 1.3

One question how can I add insert "Code" button to the editor?
Thanks

Comments

If you are member of ASKIVE, you can download my plugin.
http://askive.cmsbox.jp/937/syntaxhighlighter-plugin
This plugin seems to work definitely. But, I am not satisfied with this plugin yet. If it becomes good, I may publish it.

---

well, your site like a bank... registration, confirmation then approval... wow... pretty good .... let me know the approval system that I can try the plugin...
Thanks

---

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

---

I got it. Thanks.