Aloha editor: Inserting images/pictures

Question

I'm using Aloha editor for editing content on a website powered by PHP and MySQL. It's working fine, but I need to be able to insert images/pictures. I found an Aloha editor plugin for that. Here are some links:

• http://labs.tapo-it.com/aloha-editor/image-plugin/
• http://aloha-editor.org/wiki/ImagePlugin
• https://github.com/alohaeditor/Aloha-Plugin-Image

There is an example in the first link. However, I can't get the plugin running on the latest version of Aloha editor and jQuery. It fails to load and Chrome says:

image.js:30 Uncaught TypeError: Cannot read property 'fn' of undefined

I have no bloody clue what this means.

Ideally, the user should be able to select an image from a list of images that are on the server. These are located in a single directory and also have a MySQL table for them. I suspect this is where the repository comes in, but I wasn't able to understand how to implement that.

Has anyone had any luck using this plugin in Aloha editor, or found any other ways of inserting images?

Answer 1

A bit too late, but if you need I made a simple plugin for Aloha Editor to insert / upload an image. This plugin is part of my symfony 1.x plugin to easily integrate Aloha in a Symfony app.

This is the source of the Symfony plugin.

And here is my image insert / upload plugin.

It's really simple, and it could probably improved. It doesn't use a file repository on the server side as you expect, so this is only answering to your "any other ways of inserting images" of your question.

Answer 2

I wrote this for another editor to post in pictures. Far from perfect but it should work. You should only need to change the .te to your editors iframe

    $SQL = "SELECT * FROM PHOTO_GALLERY";
    $result = mysql_query( $SQL );
    while( $row = mysql_fetch_array( $result ) ) {
    $photo_id = $row["photo_id"];
    $photo = $row["photo"];
    $photo_name = $row["photo_name"];

 $picture = "<img alt='$photo_name' title='$photo_name' src='http://$domain/$photo'>";

echo '<span style="cursor:pointer" class="picture_'.$photo_id.'"><img title="Click to add image" alt="'.$photo_name.'" height="50" src="/'.$photo.'" width="50"/></span>


< script>
 $(document).ready(function(){
$(".picture_'.$photo_id.'").click(function() {
$(".te").contents().find("body").append("'.$picture.'");
});
});
< /script>