You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Method 1: Data URIs

We can host the images "inline", inside the form (i.e. 自定义HTML) or Userview menu (i.e. 富文本编辑器) itself.

For example, we want to show the image below in a Rich Text Editor in Userview Builder.

Figure 1: Sample photo

  1. Save the photo above to your local.
  2. Go to http://jpillora.com/base64-encoder/
  3. Drag the photo saved previously into the website above.
  4. Copy the code generated.
  5. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
  6. Click on HTML Source.

  7. Add the img tag into the HTML Source Editor and put in the code copied earlier into the src attribute.

    <img src="PASTE THE CODE HERE"/>

     

Reference: https://css-tricks.com/data-uris/

Method 2: Hosting the file from your web server

Assuming that you are running on the default application web server, Tomcat, we can create a new folder in the webapps folder to specifically host images.

  1. In the webapps folder, create a new folder called images.
  2. Put the image file hi.png into the new folder.
  3. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
  4. Click on HTML Source.

  5. Add the img tag into the HTML Source Editor and construct the URL path to the image.

    <img src="/images/hi.png"/>

 

  • No labels