[SalesForce] How to render text as HTML on a page

I tried to complete your code to achieve what you describe and found a little problem: sending the email will create a Task object, which conflicts with saving an EmailTemplate (you get a MIXED_DML_OPERATION).

What I ended up doing is creating separate buttons for the save and the email. I used a TemporalTemplate to store the modified version so I can reuse it.

You may be able to avoid the MIXED_DML_OPERATION by using a @Future method to send the email after the save.

Here's my code:

<apex:page controller="EmailTemplateController">
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton action="{!sendMail}" value="Send Email"/>
<apex:commandButton action="{!saveTemplate}" value="Save Template"/>
</apex:pageBlockButtons>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
    <apex:outputLabel value="Target Contact" />
    <apex:inputField value="{!targetContact.ReportsToId}"/>    
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
    <apex:outputLabel value="Edit Template" />
    <apex:inputTextarea id="editTemplate" value="{!editedTemplate}" richText="true" cols="100" rows="15"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

And the controller:

public with sharing class EmailTemplateController {
    public Contact targetContact {get;set;}
    public String editedTemplate {get;set;}
    private String templateId = null;
    public EmailTemplateController() {
        targetContact = new Contact();
        if (ApexPages.currentPage().getParameters().containsKey('template')) {
            templateId = ApexPages.currentPage().getParameters().get('template');
            this.editedTemplate = [select HtmlValue from EmailTemplate where Id = :templateId].HtmlValue;
        }
    }

    public PageReference saveTemplate() {
        EmailTemplate template =  [select Id, HtmlValue from EmailTemplate where Name = 'TemporalTemplate'];
        template.HtmlValue = editedTemplate;
        update template;

        return null;
    }

    public PageReference sendMail() {
        EmailTemplate template =  [select Id, HtmlValue from EmailTemplate where Name = 'TemporalTemplate'];

        Messaging.SingleEmailMessage email = new Messaging.SingleEmailMessage();
        email.setSenderDisplayName('Tester');
        email.setTemplateId(template.Id);
        email.setTargetObjectId(targetContact.ReportsToId);
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] {email});
        return null;
    }
}

You can re-render the html code with JavaScript as shown in the example below. Rich_Text__c is a RichText field containing raw html code. Through jQuery the span tag is replaced by a div element with the raw html code created by jQuery. Now you can see rendered html in page.

VF Page

<apex:page controller="RichTextController" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <span id="inputtxt"/>
    <script type="text/javascript">
        $("#inputtxt").html($('<div/>').html("{!myText}").text());
    </script>    
</apex:page>

Controller

public class RichTextController {
    public String myText {get;set;}
    public RichTextController(){
        Book__c abook = [SELECT Rich_Text__c FROM Book__c where Id = 'a0Ii000000gKbw5']; 
        myText = abook.Rich_Text__c;
    }
}