What is WYSIWYG Editor?


WYSIWYG is an acronym for "what you see is what you get". Our WYSIWYG Editor enables rich text editing capabilities for your features, about me sections, creating emails and even landing pages.


For more information regarding WYSIWYG Editors, please visit our master article shared down below.


Everything About WYSIWYG Editors


How to Upload Images  


Navigate to Content → Media Manager → Click on “Upload Image”





In this section, you will have two options to upload an image. 


1.Click to Upload





2. Drop Files to Upload





After the upload, click the “Back To All Images” button





We are back on the Media Manager again, right click on preferred image and click “Copy Image URL”





Your images FULL URL path should look like this:


http://YOURDOMAIN/images/background-pricing1-(1).jpg


The URL path that will be used to post on WYSIWYG Editor looks like this:


/images/background-pricing1-(1).jpg


Now we uploaded and copied the images URL path, we will be inserting these images on preferred WYSIWYG Editors.


For this instance, we will be posting an example Blog Article.


Adding Images on WYSIWYG Editors


1) Adding Images on Blog Articles


Login as preferred member who is also allowed to post “Blog Articles”


On Member Dashboard, navigate to Blog Articles → Add Blog Articles



On the “Article Content” section, click on “Code View”




On a new line, paste the code specified down below:



<img src="PASTE YOUR URL PATH" >





Your image will be rendered on the fly.


IMPORTANT NOTE #1: In this example, the URL path is “/images/test.jpg”


IMPORTANT NOTE #2: In this example, the full code with the URL path is:

 

<img src="/images/test.jpg" >



2) Adding Images on Static Pages


Navigate to Content --> Edit Web Pages --> Click on "New Web Page"





On WYSIWYG Editor, click on "Insert Image".




You will see two options: "By URL" or "Browse"





Paste your FULL URL path and click "Insert"





OR click "Browse" to choose your image manually from the Media Manager




Additional Image Options


  • Allign Image "left", "Centered" or "right"





  • Remove: 




  • Image Caption: 




  • Insert Link:



  • Add Alternative Text:



  • Change Image Size:




  • Choose different styles:




This is an example of how a "Circle" styled image looks like:



  • Replace Image:





After clicking on "Replace" select either the URL or Browse option to successfully replace the image.


Note: The replace image option is only available to Admin Froala Editors.