CODEWITHSUNDEEP
jqueryasp.net-mvcwysiwyg
drunkcamel
drunkcamel

Reputation: 915

asp.net mvc wysiwyg editor w/ database images upload/preview

Is there any jQuery WYSIWYG editor w/ ability to upload and then preview images to/from the database? Maybe there are kinda adapters for well-known CKEditor + CKFinder to work with database? Thank you!

Upvotes: 2

Views: 2568

Answers (2)

jrummell
jrummell

Reputation: 43067

" What's the best WYSIWYG editor when using the ASP.NET MVC Framework? " has a few WYSIWYG suggestions. Personally, I like TinyMCE. They have an image manager that's pretty slick too.

  • Easy to integrate. MCFileManager compatible.
  • Create folders. Upload images.
  • Crop & Resize (if GD is enabled).
  • Thumbnail auto generation (if GD is enabled).
  • EXIF jpg/jpeg and tiff thumbnail support. Highly customizable configuration.
  • Works perfectly in fullscreen and "popup" mode. Full source included, not obfuscated.
  • Ajax based interface using a JSON bridge. Multilanguage support.

As far as database image support goes, you can use an image list (see http://www.tinymce.com/forum/viewtopic.php?id=12634 for similar discussion in php):

<script language="javascript" type="text/javascript" src="../../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
  theme: "advanced",
  mode : "textareas",
  plugins : "style",
  theme_advanced_buttons3_add : "styleprops",
  content_css : "../tiny.css",
  external_image_list_url : "Image/List",
  browsers : "msie,gecko,opera"
});
</script>

Where ImageController.List() is a controller action that returns a JSON array of action links to your images retrieved from the database and ImageController.View(id) is an action that returns an image:

["test_before.jpg", "Image/View/bread"],
["cherry.jpg", "Image/View/cherry"],
["bread.jpg", "Image/View/bread"],
["test_after.jpg", "Image/View/cherry"]

Then to upload, you'll need to create another action that will accept a posted file (image) and save it to your database. There are a few open source plugins that will take care of this for you:

Upvotes: 1

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

i'm using http://labs.corefive.com/projects/filemanager/ plugin. Supports CKEditor and FCKEditor.

Ofcourse you have to program the part where you want to store the files etc. But they do have a few examples included.

Upvotes: 0

Related Questions