SkyVisualEditor: WYSIWYG for Visualforce

Hi @Vidhya P

<apex:page controller="importDataFromCSV">    

    <apex:form >        

        <table class="table table-bordered table-striped">        

            <apex:pagemessages />        

            <apex:pageBlock >            

                <apex:pageBlockSection columns="4">                  

                    <apex:inputFile value="{!csvFileBody}"  filename="{!csvAsString}"/>                  

                    <apex:commandButton value="Import Account" action="{!importCSVFile}"/>            

                </apex:pageBlockSection>                        

                <thead class="head" >               

                    <th><b>Name</b></th>               

                    <th><b>AccountNumber</b></th>               

                    <th><b>Type</b></th>               

                    <th><b>Accountsource</b></th>               

                    <th><b>Industry</b></th>            

                </thead>           

                <apex:repeat value="{!Accounts}" var="acc">               

                    <tr>               

                        <td>{!acc.acc.name}</td>               

                        <td>{!acc.acc.AccountNumber}</td>               

                        <td>{!acc.acc.Type}</td>               

                        <td>{!acc.acc.Accountsource}</td>               

                        <td>{!acc.acc.Industry}</td>               

                        <td><apex:outputText id="status" value="{!acc.csvStatus}"/>  </td>            

                        <td>                        

                            <apex:commandLink StyleClass="btn btn-secondary" action="{!EditAccount}" reRender="form">

                                <i class="fa fa-edit" style="font-size:24px"></i>

                                <apex:param name="accountid" value="{!acc.acc.Id}" assignTo="{!selectedAccountId}"/>

                            </apex:commandLink>                    

                        </td>               

                    </tr>            

                </apex:repeat>               

            </apex:pageBlock>          

        </table>    

    </apex:form>

</apex:page>

public class importDataFromCSV {

    public Blob csvFileBody{get;set;}         //geter and setter methods for VF page access    

    public string csvAsString{get;set;}    

    public string selectedAccountId { get; set; }    

    public String[] csvFileLines;    

    public string[] csvRecordData;    

    public List<account> acc_lst;          

    public Map<String,String> acc_map;         

    public class wrapAccount {        

        public Account acc {get;set;}        

        public String csvStatus {get;set;}         

        public wrapAccount(Account a, Map<String,String> acc_map) {

            acc = a;            

            if(acc_map.containsKey(a.Name)) {                

                csvStatus = 'Duplicate';            

            } else {                

                csvStatus = 'Unique';                              

                insert a;             

            }         

        }    

    }    

    public void LoadData()    {        

        acc_lst = [SELECT Name,AccountNumber,Type,Accountsource,Industry FROM Account];    

    }         

    public List<wrapAccount> wrapAccount_lst {get;set;}     

    public List<wrapAccount> getAccounts() {        

        return wrapAccount_lst;    

    }        

    public pagereference importCSVFile() 

    {        

        csvAsString = csvFileBody.toString();        

        csvFileLines = csvAsString.split('\n');        

        system.debug('csvFileLines= '+csvFileLines+' csvFileLines.size() = '+csvFileLines.size());         //get all accounts        

        acc_lst = new List<account>([select Name, Accountnumber from account]);        //initialize the map        

        acc_map = new Map<String,String>();        //populate the map        

        for (account a: acc_lst) {            

            system.debug('a = '+a);           

            acc_map.put(a.Name,a.AccountNumber);       

        }         

        wrapAccount_lst = new List<wrapAccount>();        

        for(Integer i=0;i<csvFileLines.size();i++) {                        //read the csv row        

            csvRecordData = csvFileLines[i].split(',');        //get values from csv into the account             

            Account a = new Account();            

            a.name = csvRecordData[0] ;            

            a.accountnumber = csvRecordData[1];            

            a.Type = csvRecordData[2];            

            a.AccountSource = csvRecordData[3];            

            a.Industry = csvRecordData[4];            

            wrapAccount_lst.add(new wrapAccount(a,acc_map));          

        }        

        return null;     

    }    

    public PageReference EditAccount()    {        

        System.debug('selectedAccountId' +selectedAccountId);              

        if (selectedAccountId == null) {            

            return new PageReference('/');        

        }else

        {            

            return new PageReference('/apex/importedit?Id='+selectedAccountId);        

        }    

    } 

}

<apex:page  Controller="sampleController" id="myPage" showHeader="false" sidebar="false" lightningStylesheets="true" docType="html-5.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <apex:form id="form">
        <center><h1>CONTACT LISTS</h1></center>
        <apex:pageBlock title="Contacts">
            <apex:outputPanel id="theTablePanelId">
                <div style="height: 300px; overflow: auto">
                    <apex:inputText value="{!searchKey}" label="Input"/>
                    <apex:commandLink StyleClass="btn btn-effect-ripple btn-primary" action="{!search}" reRender="form">
                        <i class="fa fa-search"></i>
                    </apex:commandLink>
                    <apex:commandButton value="Add Contact" action="/apex/SCtrl2"/>
                    <table class="table table-bordered table-striped">
                        <div class="col-sm-5">
                            <div class="form-group">
                                <i class='fas fa-users'></i>
                            </div>
                        </div>
                        <thead>                            
                            <tr>
                                <th>FirstName</th>
                                <th>LastName</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Fax</th>
                            </tr>
                            <apex:repeat value="{!con}" var="Ct">
                                <tr>           
                                    <td>{!Ct.FirstName}</td>
                                    <td>{!Ct.LastName}</td>
                                    <td>{!Ct.Email}</td>
                                    <td>{!Ct.Phone}</td>
                                    <td>{!Ct.Fax}</td>   
                                    <td>
                                        <apex:commandLink StyleClass="btn btn-danger" action="{!DeleteContact}" reRender="form">
                                            <i class='fas fa-trash-alt' style='font-size:24px'></i>                                           
                                             <apex:param name="contactid"
                                                    value="{!Ct.Id}"
                                                    assignTo="{!SelectedContactId}"/>
                                        </apex:commandLink>
                                    </td>       
                                    <td>
                                        <apex:commandLink StyleClass="btn btn-secondary" action="{!EditContact}" reRender="form">
                                            <i class="fa fa-edit" style="font-size:24px"></i>
                                             <apex:param name="contactid"
                                                    value="{!Ct.Id}"
                                                    assignTo="{!SelectedContactId}"/>
                                        </apex:commandLink>
                                    </td>
                                    <td>
                                        <apex:commandLink StyleClass="btn btn-success" action="{!PreviewContact}" reRender="form">
                                            <i class="fa fa-eye" style="font-size:24px"></i> 
                                             <apex:param name="contactid"
                                                    value="{!Ct.Id}"
                                                    assignTo="{!SelectedContactId}"/>
                                        </apex:commandLink>
                                    </td>
                                    <td>
                                        <apex:commandLink StyleClass="btn btn-primary" action="{!uploadimagecon}" reRender="form">
                                            <i class='fa fa-portrait' style='font-size:24px'></i>
                                             <apex:param name="contactid"
                                                    value="{!Ct.Id}"
                                                    assignTo="{!SelectedContactId}"/>
                                        </apex:commandLink>
                                    </td>
                                </tr>
                            </apex:repeat>
                        </thead>
                    </table>
                </div>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>    
</apex:page>

public class sampleController {
    public List<Contact> con { get; set; }
    public Contact cont {get;set;}
    public string SelectedContactId { get; set; }
    public Attachment att{get; set;}
    private Id parentId {get; set;}
    public String searchKey {get;set;}
    public ApexPages.StandardController stdcontroller  { get; set; }
    public sampleController() {
        cont = new Contact();
        con= new List<Contact>();
        LoadData();
    }
    public void LoadData() {
        con = [SELECT FirstName,LastName,Email,Phone,Fax FROM Contact LIMIT 10];
    }
    public void search(){
        string searchquery='select Name from Contact where name like \'%'+searchKey+'%\' Limit 10';
        con= Database.query(searchquery);
    }
    public void clear(){
        con.clear();
    }
    public PageReference saveAndRedirect() {
      stdcontroller.save();
     //PageReference newPage = Page.SCtrl1; 
    //newPage.setRedirect(true);
    return null;
   }
    public void DeleteContact()
    {
        try{
            System.debug('SelectedContactId' +SelectedContactId);
            if (SelectedContactId == null) return;
            Contact tobeDeleted = null;
            for(Contact a : con)
                if (a.Id == SelectedContactId) {
                    tobeDeleted = a;              
                    break;
                }
            if (tobeDeleted != null) {
                System.debug('Success' +tobeDeleted);
                Delete tobeDeleted;
            }
            LoadData();
        }catch(Exception ex){
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.WARNING,'Please check this error --> '+ex.getMessage()));
            LoadData();           
        }
    }
    public PageReference EditContact()
    {
        System.debug('SelectedContactId' +SelectedContactId);       
        if (SelectedContactId == null) {
            return new PageReference('/');
        }else{
            return new PageReference('/apex/SCtrl2?Id='+SelectedContactId);
        }
    }
    public PageReference PreviewContact()
    {
        System.debug('SelectedContactId' +SelectedContactId);       
        if (SelectedContactId == null) {
            return new PageReference('/');
        }else{
            return new PageReference('/apex/SCtrl3?Id='+SelectedContactId);
        }
    }
    public PageReference newCon()
    {
        System.debug('SelectedContactId' +SelectedContactId);       
        if (SelectedContactId == null) {
            return new PageReference('/');
        }else{
            return new PageReference('/apex/SCtrl2?Id='+SelectedContactId);
        }
    } 
    public PageReference uploadimagecon()
    {
        System.debug('SelectedContactId' +SelectedContactId);       
        if (SelectedContactId == null) {
            return new PageReference('/');
        }else{
            return new PageReference('/apex/SCtrl4?Id='+SelectedContactId);
        }
    }
    public void uploadImage()
    {
        att.parentId = parentId;
        att.Name = 'image';
        insert att;
        att = new Attachment();
    }
    public Id getImageId()
    {
        Id result = null;
        List<Attachment> images = [Select id from Attachment where Name='image' and parentId=:parentId];
        if(images.size()>0)
        {
            result=images[0].id;           
        }
        return result;
    }
}

This should work, check it