Image not displaying uploaded by CKeditor

Uploaded Image Not uploading/Not showing can have might reasons:

1. Upload image path is not correct.
2. Tmp folder have not write permission to upload image. Because when have submit form after selecting image, It first move to tmp folder then to target folder.
3. Image folder would not have enough permission.
4. Image Path is not correct while getting image, also make sure image has been uploaded in target folder.
5. Image is not accessible.

Uploaded Image not showing in Email
Problem: Whenever we upload any image through FCK editor. It start displaying in editor as well as in pages of our website.
Sometimes when we display all the content including image in our site it works fine. But when we send all the contents to email then all work except uploaded image (image was not displaying in email).
Reason behind this can that image have relative path.
Solution: Now for this, there should be absolute path in image source including www.example.com. So, that it work in our site as well as in emails.

for this just do the follow lines when uploading image through FCK-Editor.
1) open app/webroot/js/editor/filemanager/connectors/php/config.php
2) replace
Code:

$Config['UserFilesPath'] = '/app/webroot/files/'; 

$Config['UserFilesAbsolutePath']=''; 



WITH

Code:

$Config['UserFilesPath'] = "http://".$_SERVER['HTTP_HOST']."/app/webroot/files/"; 

$Config['UserFilesAbsolutePath'] = $_SERVER['DOCUMENT_ROOT']."/app/webroot/files/";



3) Clear the cache from

Code:

/app/tmp/cache/ 

/app/tmp/cache/persistent 

/app/tmp/cache/views

Above example are for cakephp, If you are using other framework/CMS then only path can be little different but reason will be same. Just understand the above all points of uploading image issue. then you will be able to overcome any type of issue regarding uploading through any Framework OR CMS.



Suggestion for SEO:
With use of text editor, we can upload multiple images/videos and set the attributes like alt tag, title tag in the photos/videos. These tags play very vital rote in SEO. If your photos videos have ALT tag, Title Tag then your website would have better ranking in Search Engines.


5 Best Related Posts are Following:1. PHP Technical Interview Questions and Answers for Fresher and Experienced
2. How to Add attribute in A Tag using jQuery
3. Wordpress Website title repeated two times in browser header [SOLVED]
4. How can I prevent SQL-injection in PHP [SOLVED]
5. Htaccess RewriteRule Flags by Code Example

FckEditor Custom Toolbar- Mange Tools

FckEditor is web based "Text Editor" used in all web application whether application is created in Java, ASP OR PHP etc. This text editor used while submit the form like Registration Form, Detail Form, Feedback Form and Comment form. Most of the time this form used in Comment form where user give his reply on the particular page OR on other user's reply.



In the Text editor, User can do lot of things like add rich text(Bold, Italic, Underline, Text alignment etc), upload photos, upload videos, created custom form etc. In the Text editor there are lots of button (like bold, Italic, image upload etc) in Toolbar. Toolbar also divided in number of types like Basic Toolbar, Standard Toolbar, Full toolbar & Custom toolbar.


In the Basic Toolbar, there will be less button like bold, Italic etc
In the Standard toolbar, there will be more button as compare to Basic Toolbars like Image upload, video upload etc
In the Full Toolbar, there will be have all the buttons which are provided by FckEditor.
In the Custom Toolbar, Developer can decide what buttons he will give the user to use. only provided button by developer will be visible to the users.

config.toolbar_Basic =
[
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

config.toolbar_Standard =
[
 
 { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
 { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
 '/',
 { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
 { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
 '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
 { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, 
 '/',
 { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
 { name: 'colors', items : [ 'TextColor','BGColor' ] },
 
];

config.toolbar_Full =
[
 { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
 { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
 { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
 { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
 '/',
 { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
 { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
 '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
 { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
 { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
 '/',
 { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
 { name: 'colors', items : [ 'TextColor','BGColor' ] },
 { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
 
config.toolbar_Basic =
[
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'],
        { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
];

Follow Below Simple Steps to Create Custom Toolbar

1) Open file "fckconfig.js"

2) There will be list of ToolbarSets like below 'FCKConfig.ToolbarSets["Default"]'

3) Create New ToolbarSets like below

__________________________________________________

FCKConfig.ToolbarSets["MyCustomToolBar"] = [ 

    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'] 

            // No comma for the last row. 

] ;

//you can add / remove the tags like 'bold', 'underline'

__________________________________________________

4) now you "MyCustomToolBar" instead of "Default"

Best Related Posts are Following:

1. Image not displaying uploaded by CKeditor.
2. How to change FCKeditor skin, ToolbarSet, height and width..
3. FckEditor Custom Toolbar- Mange Tools.

How to change FCKeditor skin, ToolbarSet, height and width

CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.

Because CKEditor is licensed under flexible Open Source and commercial licenses, you'll be able to integrate and use it inside any kind of application. This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

Implement with cakephp, Its an easy just follow the some steps. How to implement?

 How to  change FCKeditor skin, ToolbarSet, height and width.
Suppose in one page you have 3 editor and each need different height, width, skin or toolbarset. for this, Follow the following lines.

1) open file "app/views/helpers/fck.php"
2) go to function "load"
3)set all the vars as below

load($id, $skin='silver', $toolbar = 'Basic', $height='400', $width='300');

4)put the variable $skin as below

 bFCKeditor_$did.Skin         = '$skin';

do all the same

5)open the ctp file for add/edit where u r using calling load function [where u r creating editor]
and pass the arguments as below

 $fck->load('id', 'silver','Basic','200px', '200px' );

Best Related Posts are Following:

1. Image not displaying uploaded by CKeditor.
2. FckEditor Custom Toolbar- Mange Tools.
3. How to change FCKeditor skin, ToolbarSet, height and width..