i have tinymce embedded in my website, so if users want to edit content, then can click on an "EDIT" link and it brings up the content in tinymce editor. when they click "Save", i save the html to a database. this works perfect and avoids them calling me when they need content changes as they can go in directly and next time they reload the main page, it loads up their changed content.
they now want to be able to add their own images. I see there is some image support in tinymce as seen here, but in my case, the images would be on their computer.
So i am looking for some advice on how to handle image support using tinymce on my asp.net mvc website similar to how stackoverflow allows you to upload and include an image in your question all in one step
any suggestions?
I guess you need to take a look here:
Best TinyMce editor Image Manager / File upload for Asp.net Mvc
it has a list of tinyMCE file browsers/uploaders/managers which work with MVC :)
I had a similar issue and solved it by;
Allowing the user to upload images which i then stored in the file system.
Once the image was saved then you could use tinyMCE to link to it.
It's a round-about way of doing it but it worked. If your images are stored on a users computer then you're going to need to implement something like this me thinks as you can't assume you can link to the image and if you can you can't be sure the computer will be on.
Maybe you can give this TinyMCE-plugin a try (the official Moxiecode plugins are quite expensive):
http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/
I haven't tested it yet, but it's a free add on that allows uploading and selecting files.
HTML 5 supports embedded images. You can embed image in html code as a base64 string.
Example Code:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQYmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150"/>
There is a opensource TinyMCE plugin available in github:
https://github.com/buddyexpress/bdesk_photo
Related
I am working on MVC4 project and facing a problem.The project on which i am working was developed in web forms.The html of pages is already saved in Database.I am getting this html from DB and showing it on Views. Now the problem is that this Html aslo contains Images and links and these are working fine in web forms application but in MVC images and links are not working i.e images fail to load due to invalid path although i have made the same folder structure. Here is an example.
Suppose i have an image in folder App_Themes/Theme1/Img/download_icon.gif. Now in MVC project if i give this image the src like /App_Themes/Theme1/Img/download_icon.gif it is loaded correctly but if i give it the src like App_Themes/Theme1/Img/download_icon.gif it does not load and this is saved in Db. My question is how can i load all images correctly that come from Db in html?
You got a tricky scenario. Its always a bad practice to keep Html tags in database because it may cause these kind of issues in future, which gives head aches to current developer working on that. As per my opinion there is no solution, but I am suggesting a work around for you to overcome this. This is an issue with virtual directory and hope that we can resloved by Url.content.
Any way your are getting the html from database. So I believe that you have something similar to this.
string htmlContent = getHtmlforPage1()
it will returns you all the html for page one and you use HtmlString() to show it in your view.
You can replace the <img src=blah\blah.img /> with "<img src="+ Url.Content(blah\blah.img") />. all you need is to write down a function to achieve this.
This question will gives you about the need for url.content()
why use #Url.Content
If possible please change avoid storing html in database
I started to learn grails and now I am trying to develop a simple blog.
I created the domain model(User, Tag, Comment, Category, Post), controllers.
I installed fckeditor plugin(for adding new posts). I want to add ui interface, which will be support wysiwyg editor.
But I do not understand how does fckeditor store images, which will be linked to post.
Advice please some links or code samples.
... the editor stores the images in a folder that you need to specify. If I remember correctly it will insert the photo at point of cursor in the editor panel. There's another way to deal with it also. Upload your images/create thumbnails and where you have the thumbnails displayed on the page (say as links to full blown pixes) drag one onto the fckeditor pane and it will drop the thumbnail/link at cursor.
I'm sure you've been here as well ;-)
I am new to Symfony and I need to work to a large project with many themes to modify them. How can I find where actually is the theme file in which module, just looking at the HTML browser output? Or do I need to look somewhere else, routing for example?
What you want to do is use the Web Debug Toolbar.
Once you have that running on the page, using appname_dev.php, simple click the view link and it will show you which templates have been used. If you need to know which layout to use then use logs link, click none the sfPHPView.
I want to have a web page coded with HTML5, and I want to be able to put a pdf file onto this page so you can view it without having to click on any links to download it separately. Anyone know how to do this?
I want it to keep the text, images, and layout of the pdf file also. If that weren't the case I would just use an image. Thanks!
Edit: This will be hopefully going onto the ipad. So it won't support adobe. I need to just find a way to somehow make the pdf file show up in an html5 page without using a viewer. I want to keep all of its layers. It doesn't have to stay a pdf file when its on the page, I just need to find a way to transfer all of those layers there without having to do this manually with divs for each image, paragraph, etc.
I don't think this is possible without using Flash. Instead, you might want to convert the PDF to a different format (HTML for example) that can be rendered by the browser. There are tools that can do this from the command line, so making a script to do it on your site won't be too difficult.
You can use the embed tag like this:
<embed src="/path/to/your/file.pdf" />
Maybe you could convert the pdf to images on the server and display the images instead of the original pdf. As far as i know, Apache pdfbox can be used to do such a convert.
A little bit late and maybe issuu is gonna fix it soon but for now you can embed with issuu.com using an iframe and your magazine address ending in ?mode=mobile. Tested in ipad:
<iframe width="850px" height="580px" src="http://www.issuu.com/your_username/docs/your_magazine_name?mode=mobile" frameborder="0" allowfullscreen></iframe>
I would like same mobile version loading in desktop so there is no advertising. If you know how to make the browser to think it's an ipad let me know.
This code would directly embed a pdf viewer in a webpage
<object data="path to pdf " type="application/pdf" width="100" height="100">
<p>Alternative text - include a link to the PDF!</p>
</object>
If you are using ASP.NET, this link may be of interest to you.
Browser Based PDF Viewing And Editing
Hosted entirely on your server,
activePDF Portal is an ASP.NET
WebControl that enables your users to
interactively view and modify PDF
documents from any source - adding
comments, form fields, bookmarks, and
more – directly from within a standard
web browser, without requiring any
client-side software such as Adobe
Reader or Flash, or the use of ActiveX
controls.
- http://portal.activepdf.com/
PDFObject looks promising, but it doesn't work on iPads at the moment.
I am looking to include CKEditor in a project I am working on and I need the image upload support provided by the CKFinder plugin, however I do not particularly need the rest of the CKFinder tool and thus purchasing a license is a little overkill. Has anyone taken the time to implement a custom image uploader for CKEditor 3 that will work with ASP.NET MVC? If need be I can create my own, just wanted to check here first.
Alternatively, does anyone know of a decent WYSIWYG editor on par with CKEditor / Cute Editor that supports image uploading and will work in ASP.NET MVC?
Here is a image uploader I originally wrote in ASP.NET WebForms for Fckeditor (hence the theme no longer matches), that I've modified to work with Ckeditor.
https://github.com/mcm-ham/ckeditor-image-uploader
Update: I've now added an example showing how you can add this WebForms image uploader to a MVC project.
Update 2: I've now added a Razor Pages version which can be used in .NET Core MVC projects.
Here is a tutorial on how to upload image with ASP:NET MVC2 (not Webforms) using CKEditor
http://arturito.net/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/
I have used ckeditor and the upload control using ASP.NET, but not MVC specifically. I haven't found anything on par with ckeditor that is even close to being as easy to set up or offers the same features.
Not sure of the restrictions for MVC, but I set up file upload support by using the following:
The basic documentation referring mostly to the CKFinder plugin you mentioned:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29
Better documentation on how to implement the upload component:
How can you integrate a custom file browser/uploader with CKEditor?
Otherwise, I believe ckeditor just stuffs all the image bytes in the request object and sends it to the page configured for uploading. This page can take those bytes and do whatever it pleases (i.e. save them to the file system, sql server, etc.) This is where the custom implementation comes in.
Instead of using a page to do the upload, I used an httphandler implementation. The page ckeditor redirects to calls the requisite javascript function to indicate the status of the upload after it is complete, but the handler really controls the actual file upload. The basic implementation for the httphandler I used is at:
http://darrenjohnstone.net/2008/07/15/aspnet-file-upload-module-version-2-beta-1/
Hope this at least gives you a starting point.
UPDATE: found this while searching for some other stuff. Didn't look at in depth, but seems to be right up your alley:
http://interactiveasp.net/blogs/spgilmore/archive/2009/06/03/how-to-support-file-uploads-in-asp-net-mvc.aspx
If you need to implement it quickly and have a reliable solution, you may consider a hosted solution to upload and store images for CKEditor - for example, our plugin:
http://ckeditor.com/addon/uploadcare