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

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.