1

I have one task in that i need to upload my photos from local machine folder so i used Rich area text field but its showing some hyperlinks and text align fields also how to hide the unwanted fields.

This is my Vf page.

<apex:page standardController="FeedbackFrom__c" extensions="Page2Controller" showheader="False" sidebar="False">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".bPageBlock").css("background-color","papayawhip");
        $(".bPageBlock").css("border-color","papayawhip");
    });
    </script>
    <style>
   body{ background-color:papayawhip;}
</style>
<apex:form > 
<html>
<head>
<title>Questionnaire2</title>
 <style>
       div.btnGroup{
      text-align: center;margin-top:125px;margin-right:250px;padding:8px*20px;
       }

      div.btnGroup1{
      text-align:right;margin-top:-24px;margin-right:450px;padding:8px*20px;
       }

     div.btnGroup2{
     text-align:left;margin-top:160px;margin-left:125px;padding:8px*20px;font-size:150%
      }

     div.btnGroup3{
     text-align:center;margin-top:100px;margin-right:10px;padding:8px*20px;
     }

     body .bPageBlock .pbHeader {
    background-color: Green; 
}
 </style>
</head>

<body>
<div class="btnGroup">
    <apex:commandButton action="{!Profilesetting}" value="Profile setting" styleClass="buttonStyle"  style="background:thistle ;width:130px;height:25px;font-size: 14px"/>
    </div>    
<div class="btnGroup1">    
  <apex:commandButton action="{!Logout}" value="Logout" styleClass="buttonStyle" style="background:thistle ;width:130px;height:25px;font-size: 14px"/>
</div>

       <div class="btnGroup2">  
      <label for="Feed Back">YOUR FEEDBACK <br/><br/><br/></label> 
      <apex:pageBlock >
      <apex:pageBlockSection > 
     <apex:inputField id="myPicklist" required="true" value="{!FeedbackFrom__c.X1_Are_you_satisfied_with_the_cleanlines__c}"/><br /> <br /> 
      </apex:pageBlockSection>
     <apex:pageBlockSection > 
     <apex:inputField value="{!FeedbackFrom__c.image1__c}"/><br /> <br /> 
      </apex:pageBlockSection>
    </apex:pageBlock>
       </div>



     <div class="btnGroup3">          
    <apex:commandButton action="{!NextPage}" value="Next page" styleClass="buttonStyle" style="background:lightcoral ;width:120px;height:25px;font-size: 13px"/>    
    </div>


    </body>
    </html>
    </apex:form>
   </apex:page>
  • Maybe an image of what you are seeing? My first thought is why the extra stuff is there. If it's not supposed to be then stop it at the source – Eric Apr 6 '17 at 5:15
  • @Eric, I think he is taking about toolbars – Santanu Boral Apr 6 '17 at 5:19
  • Sorry for the confusion Eric Yes I want to hide my tool bars only... – Anjaan Apr 6 '17 at 5:20
0

You can't hide the Toolbars for Rich Text Area. What you can do is, use an <apex:inputFile to upload the image and store it in the Rich Text Area.

To store an image in a Rich Text Area you have to create a String as below. And use this entire source text data and use it as the value in the relevant field of the API. See details here.

<img alt="<image_Name>" src="data:image/<image_File_Extension>;base64, <base64_Image_String>"></img>

Here you can use a temporary Document object to take the image from File Input dialog then convert it to Base64 string in the above-said format and add this string as field value for Rich Text Area. Here is an example.

VF Page

<apex:page standardController="Book__c" extensions="ImgaeUploadExt">
    <apex:messages />
    <apex:form id="theForm">
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:inputField value="{!book.Name}" />
                <apex:inputFile value="{!image.body}" filename="{!image.name}"/>
                <apex:commandButton value="Save" action="{!doSave}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller

public class ImgaeUploadExt {
    public Document image{get;set;}
    public Book__c book{get; set;}
    public ImgaeUploadExt(ApexPages.StandardController controller) {
        book= new Book__c();
        image = new Document();
    }
    public PageReference doSave(){
        String fileName = image.name;
        String[] fileNameParts = fileName.split('\\.');
        String mimetype ='';
        if(fileNameParts[1].equals('jpg')){
            mimetype = 'jpeg'; 
        }else{
            mimetype = fileNameParts[1]; 
        }
        System.debug('fileName '+fileName);
        String strImageBody = EncodingUtil.base64Encode(image.body);
        //String strImageBody = image.body;
        String richTextString = '<img alt="'+fileNameParts[0]+'" src="data:image/'+mimetype+';base64,'+strImageBody+'"></img>';
        System.debug(richTextString);
        book.Rich_Text__c = richTextString ;
        upsert book;
        Pagereference ref = new Pagereference('/'+book.Id);
        return ref;
    }
}

Screenshots

Input Screen

enter image description here

Output Screen

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.