Text area with image

Asked

Viewed 1,373 times

1

Hi, I’m going to make a form and I don’t know how to include an image within the text area, something like that.

TEXT inserir a descrição da imagem aqui

TEXT

IMAGE

TEXT

Something to include user know? How is done here in stack overflow, for questions.

html css twitter-bootstrap ruby-on-rails ruby

  • did not understand, would have an example with image?

  • something like it’s here to ask.

  • I wanted the user to be able to include an image anywhere, and be able to right after continuing writing. Like, he explains something, and he puts an image to illustrate it, and he keeps writing down.

  • 2

    One option is to use a WYSIWYG editor, such as Tinymce.

  • That’s what I wanted, thank you very much!!!!

  • You might also like a div contenteditable https://stackoverflow.com/questions/30279671/how-to-pass-an-image-into-a-html-textarea

  • 1

    @Andersoncarloswoss, answer the question with that answer.

  • Use the CK editor text editor plugin. http://ckeditor.com/

  • Nicedit: http://nicedit.com very simple to use, I used this, met my needs.

Show 4 more comments

1 answer

4


What you want to do is resolved with WYSIWYG editors (What You See Is What You Get). A simple example of these editors is the Tinymce. To use it:

  1. Go to the URL: https://store.ephox.com/signup/ to create your account;
  2. In the side menu, access API Key Manager;
  3. Copy the key that appears (you will use it later);

To use it on the page, you can download the library directly from the site. Here I will use the cloud version for example. Add the Javascript file tinymce.min.js, informing your API key:

<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=your_API_key"></script>

and create the element textarea you want to configure as editor. In your Javascript file, add the code snippet that initializes the editor:

tinymce.init({ selector:'textarea' });

About using images in the editor, you can read the documentation File & Image Upload.

See the example below (not functional as it is running on Snippet):

tinymce.init({ selector:'textarea' });
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=API_KEY"></script>

<textarea>Seu editor de texto</textarea>

Other similar editors:

Browser other questions tagged html css twitter-bootstrap ruby-on-rails ruby

You are not signed in. Login or sign up in order to post.