The goal is to have a user paste a URL in textarea, and it outputs not a simple text or URL but displays that image from the URL?
http://www.thecampussocialite.com/wp-content/uploads/South-park-VS.-Family-Guy.jpg
Can this be done? Are there any examples?
The textarea is simply not capable of that.
You need to use a rich text editing control, instead of the basic HTML Text Area tag. Popular options are:
FCKEditor
TinyMCE
Related
My friend is making a CMS and we are looking for a Rich Text Editor which works like wordpress's editor.
We have word documents on us which have some text and images on it and we want to make a cms on which we can just copy paste the word and images and it appears on a custom field on our site.
I looked into various editors but it seems they doesn't copy images..
So is there any way that we can also copy images from clipboard to the site?
Or upload the word file and images and content get converted somehow?
Thanks guys for the help.
Really appricate it.
check this out.! Full featured web editing. Featherweight download.
https://www.tinymce.com/
I want to create a some kind of a <textarea>/textbox on my page, that when you copy from a word document a paragraph with links, and when I submit a form (PHP) - it gets the text as an exactly how the doc looks like.
The only solution I have found for this is using something like TinyMCE
Is there a better PHPish solution for this? Or other HTML text-area tag I don't know of in HTML that does that?
yes,you can do it easily using TinyMCE
I have web application i need to add new function to it.
I allow user to post comment. Now what i want is if any user just post image url it should turn into proper with html tag. I am using php.
For example if user post just plan link of image, now i want it to add html tag to it itself.
Hi how are you? http://www.example.com/image/user/1.jpg have a good day!
And should look like this this:
Hi how are you? <img src="http://www.example.com/image/user/1.jpg"> have a good day!
You can use regular expressions for this.
Parse posted content on URLs by regular expression.
Validate URLs on right images formats extensions (jpeg, jpg, png, ...) with some function.
If in URL is image file location - replace it with <img> tag.
I am going to use CKEditor to format the text while editing the content of my website. The content is saved into MySQL database, so if I use CKEditor, will the text be saved with its formats (size, color, etc) and displayed with that format in client side?
Yes and no. Not really.
Some information will be saved, yes, but some other will require the CSS of the editor page and the display page to match. They usually do, but not necessarily.
CKeditor offers several ways of customizing the HTML that's being generated. Your best option would be to use CSS classes for SPAN and DIVs, and all other tags you allow in the editor; then, define those in a separated .css file that would be imported by your CKeditor edit page as well as the site at large. This will give you as much WYSIWYG as you're going to get.
(I'll try and whip up an example later when I get access to a CKeditor on my servers; but you can also looks at CKeditor' documentation).
Yes CK editor will save the way you specify. On CK editor you have a source button if you click on it you will get the html source.
How do I embed text in an image? The embedded text should be hyperlinked to an URL. The use case is like having an image with a link that says 'Click here' which opens a new page.
If you want to stay away from z-indexes and/or image maps, you could do it the old school way, which is to set the image as a background for a table or div, and then just put text inside the table or div.
You have to options to accomplish this:
Add your text to the image with your graphics program of choice. (Use ImageMagick for automated processing) Then create an image map to make parts of the image clickable. If you need some kind of "hot state", then you have to use small images which are absolutely positioned above the original image and show/hide them using Javascript. Depending on your needs it might be easier to make the whole image clickable.
Add a normal image and a normal hyperlink. You can use a regular img tag or use set the background image of the container. Then use absolute positioning to move the hyperlink to the desired position on top of the picture. With that solution you don't need Javascript to create a hover effect.
Using an image editor add the desired text to image itself and then use the image map to the area where text appears to required URL. For a sample please check my sample at http://shreedhar.kotekar.com/ImageMapSample.htm
If you are using asp.net this Embed text in Image using ASP.NET from developer's fusin shows a good example.
Edit- From your comments I see you're looking for php: Adding text to images with PHP
You could use this tool:
http://www.jsclasses.org/package/324-JavaScript-Embed-encoded-text-in-images-using-steganography.html
and here on github:
https://github.com/blauharley/LoremImageCryptonator
With help of this JS-Object you can embed any text you want. It offers two methods (getCryptoImage, getTextFromCryptoImage) that can be used for inserting and extracting any text into and out of an image.
For your use-case you can insert an URL and extract it as soon as the image is clicked.
But first of all you need to create a "Crypto-Image" that a URL has been inserted into before then saves the image. The saved "Crypto-Image" can then be shown on a page.
Hope this helps.