Adds upload functionality to a textarea or CodeMirror instance by either drag-dropping or pasting (only in chrome) an image inside it.
It mimics the comment system on issues which is used on Github.
The most recent minified versions can be found here
Configuration
All versions can be configured using the following options:
{
/**
* URL which handles the data
*/
uploadUrl: 'upload_attachment.php',
/**
* Name of the POST field where the file will be sent.
* Defaults to 'file'.
*/
uploadFieldName: 'file',
/**
* Name of the field from the response where the file can be downloaded.
* Defaults to 'filename'
*/
downloadFieldName: 'file',
// List of allowed MIME types
allowedTypes: [
'image/jpeg',
'image/png',
'image/jpg',
'image/gif'
],
/**
* Will be inserted on a drop or paste event
*/
progressText: '![Uploading file...]()',
/**
* When a file has successfully been uploaded the last inserted text
* will be replaced by the urlText, the {filename} tag will be replaced
* by the filename that has been returned by the server
*/
urlText: "![file]({filename})",
/**
* When a file is received by drag-drop or paste
*
* @param {Blob} file
*/
onReceivedFile: function(file) {},
/**
* When a file has succesfully been uploaded
*
* @param {Object} json JSON data returned from the server
*/
onUploadedFile: function(json) {}
/**
* Custom upload handler, must return false to prevent default handler.
* Can be used to send file via custom transport(like socket.io)
*
* @param {Blob} file
* @return {Boolean} when false is returned it will prevent default upload behavior
*/
customUploadHandler: function(file) { return true; }
}
jQuery
$('textarea').inlineattach(options);
CodeMirror
var editor = CodeMirror.fromTextArea(document.getElementById("textarea_editor"));
inlineAttach.attachToCodeMirror(editor, options);
Input field
inlineAttach.attachToInput(document.getElementById('inputfield'), options);
Handling image uploads
The Demo folder contains an example in PHP on how to handle uploads.
To build the project you need node, npm and grunt installed. These tools can be installed on Ubuntu as follows:
Follow the Node.js guide: Node.js installation
Go to the project folder and run the following:
npm install
grunt
This should build the project and the files will appear in the dist/
folder
- Updated Grunt.js tasks
- Fixed some documentation errors
- Added onUploadedFile callback (ROMB)
- Added 201 code on upload to make it compatible with a REST create response
- Now supports custom field names for upload
- Added default filename for Chrome's paste
- Better newline handling for pastes
Thanks to micho for this patch!
- Fixed paste, drag & drop and CodeMirror events in Firefox
- Changed options parameters, upload_url to uploadUrl and allowed_types to allowedTypes.
- Added
onReceivedFile
andonUploadedFile
hooks. - Changed the way different editors are handled.
- The markdown syntax can now be replaced by changing the
progressText
andurlText
options.
- Markdown, jQuery, Codemirror and standard Textarea support.