CKEditor with Free Image Browse and Upload Plugins (version 4.5.3). The imgbrowse plugin allows images on the server to be browsed and picked for inclusion into the editor's contents, using Ajax and PHP.

• To Download the CKEditor web text editor, with Free Image Browser Plugin and Uploader Addon, and other pre installed addons,
click: Download CKEditor [1.9 MB] (see the instructions in the "index.html").
• To test the script: Demo
• To Download the imgbrowse plugin only (with the Image Browser) to include it in your CKEditor, click: Image Browse Plugin

- This plugin requires PHP 5.4+. If you use an earlier PHP version, make these changes in the "imgbrowse.php" file (in the "imgbrowse/" folder): 1. Change line 7 to:
protected $imgext = array('bmp', 'gif', 'jpg', 'jpe', 'jpeg', 'png');
1. Change line 18 to:
$re = array('menu'=>'', 'imgs'=>'');
For comments, questions, or any issue related to this plugin, write on Forum, in the "Scripts from Website" category.

Screenshoot

Click on images

- Image Browser Popup Window
imgbrowse Popup window

- Uploader Addon
imgbrowse Upload extension

Instructions for imgbrowse plugin

• Copy the whole contents of this repository into a new plugins/imgbrowse/ directory in your CKEditor install.
• To include and use the imgbrowse plugin in your CKEditor, specify these parameters in CKEditor configuration: extraPlugins: 'imgbrowse' and filebrowserImageBrowseUrl
Example:
CKEDITOR.replace('IDtextarea', {
  'extraPlugins': 'imgbrowse',
  'filebrowserImageBrowseUrl': '/path_to/ckeditor/plugins/imgbrowse/imgbrowse.html?imgroot=PATH_TO_IMAGE_FOLDER',
});
- The path to the image folder (PATH_TO_IMAGE_FOLDER) it is necessary ONLY IF YOU NOT SPECIFY the path in "imgbrowse.php". The path must be RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER, for example: "imgroot=/img_dir".

- You can set the path to the folder with images in the "plugins/imgbrowse/imgbrowse.php" file, to the $root property (Line 6). In this case you NOT NEED TO ADD the ?imgroot=PATH_TO_IMAGE_FOLDER in the "filebrowserImageBrowseUrl".


• If you want to use Relative Path (without 'http://') for the image selected in the imgbrowse window, open the "imgbrowse.html" file (located in the "ckeditor/plugins/imgbrowse/" folder) and replace this code (lines 192, 193):
if(CKEditorFuncNum !== null) window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, e.target.src);
window.close();
With this:
if(CKEditorFuncNum !== null) window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, e.target.src);
var inp_src = window.opener.document.querySelector('.cke_dialog_ui_input_text input.cke_dialog_ui_input_text');
if(inp_src) inp_src.value = e.target.src.replace(/(http\:\/\/|https\:\/\/)[^\/]+/i, '');
window.close();

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
CKEditor Free Image Browse Plugin

Last accessed pages

  1. Node.js Move and Copy file (3517)
  2. Add, Change, and Remove Attributes with jQuery (36000)
  3. Python Programming (699)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (71507)
  5. Get the value of the selected /checked checkboxes in a form (37629)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (447)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (320)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)