+ Start a Discussion
ptepperptepper 

Customizing Built-in (Dojo) Rich Text Editor or Using external one

Hi,

I'm trying to incorporate a rich text textarea into a Visualforce page. I tried using the richtext="true" attribute,  but it seems like I don't have
very little control over the size and location of the textarea once it's rendered. This creates the rich text editor fine:

Code:
            <apex:pageBlockSection collapsible="true" title="My Form">        
                <apex:inputField value="{!event.Field1__c}"/>
                <apex:inputTextarea value="{!event.Field3__c}" id="specialTextArea" richtext="true"/>
                <apex:inputField value="{!event.Field2__c}"/>
            </apex:pageBlockSection>

 
but adding rows & cols attributes doesn't work, nor does adding css to the element (e.g. style="width:150px; height: 100px"). It just 
displays as wide as it can fit. I'm getting input for a SObject, so I'm using inputField elsewhere, but this seems to work as far as 
getting input in and out goes -- it gets and saves the field data with no problem.

Unlike inputField though, this won't automatically generate a label, so I also tried something like this:
Label <apex:inputTextarea value="{!event.Field3__c}" id="specialTextArea" richtext="true"/>

But that doesn't work either -- it just pushes the rich textarea over to the right.

Has anyone had any luck using this inside a PageBlockSection amongst other inputFields?

I also tried a few other WYSIWYG packages that I used in other work -- TinyMCE and the WYMeditor plugin for jquery. However,
I was not able to get either to work in the visualforce page. Both require a class or id attribute to identify the textArea to make
rich text. Identifying class doesn't seem to work. I also tried using the id, but the id seems to get transformed in the output.
Looking at the source of the html frame, I see something like
id="j_id0:j_id3:j_id4:j_id32:specialTextArea".
I also tried that id, but it didn't work either. If anyone has gotten another
WYSIWYG editor working with visualforce, I'd be interested
in hearing about that also.

thanks,
-paul


Message Edited by ptepper on 07-09-2008 01:21 PM
ptepperptepper
I guess no one has figured this out yet, but I made a little progress so I figured I'd share it. By looking at the entities used in the page for the Dojo editor, I found that the box where text is typed is rendered inside an iframe inside a div with class='RichTextEditable'. So you can add some styling to the page by adding it like this for example:

div.RichTextEditable iframe {
    background-color: #FFFFFF;
    padding: 4px;
}

I tried controlling the size and the border, but these were ignored (e.g. border: 1px solid #000000; height: 150px;)


-paul

Message Edited by ptepper on 07-16-2008 12:55 PM
KrishnanKrishnan
Hi There
Am also in need of integrating a Rich Text Editor with Visual Force. Did give a try by zipping the tiny mce to a zip file and adding it as Static Resource. Its not recognizing the object tinyMCE and giving script errors.

Also script errors are not shown FF and is shown only in IE.
Can you please help if you know the answer?

dchasmandchasman
Paul,

Please be advised that salesforce.com is very (guaranteed in this case) likely to make changes to internal implementation details like this in future releases that will break this entirely (e.g. we plan to replace the dojo based rich text editing functionality with the editor in Ext.js).


Message Edited by dchasman on 07-23-2008 07:51 AM
Ron WildRon Wild
Although I'd love to use visualforce + richtext editor in my applications, I think I'll wait until this has been worked out at Salesforce and isn't likely to change on us.   Please let us know when you make progress (a posting here would be great so we can subscribe to updates).

In the meantime - I've been using the RTE in Flex and embedding a flex control.   Not a very good RTE, but it's better than nothing.


ptepperptepper
Thanks for the info. It is pretty frightening to think that there are features that will "break...entirely" though. Especially since that implies that the richText="true" attribute setting would no longer work -- why would that be the case if you're replacing the functionality with a different editor? I'm doing some basic CMS work through salesforce and the rich text functionality is pretty important for it.

The kicker here is that things that are very easy to do in normal, non-Visualforce web development -- like using TinyMCE or YUI's Rich text editor -- are nearly impossible within Visualforce. I'd really like to see a more Javascript-framework-friendly environment on the next update or release. Ron Hess has a tutorial from Sept 2007 about creating a blogging app within Visualforce and I've never even been able to get that replicated it within my own pages - in my case I can get the YUI editor to load partially, but none of the buttons in the interface get button styling, they just look like text.

It would be fine if things like this rich text editor feature broke entirely if we as developers were able to take advantage of outside JS frameworks, plugins, widgets, etc., to do this stuff, putting maintenance of the code in the developers' hands as it probably should be. I can see in Firebug that even before I load my own JS files, Visualforce is using about 20 or so of it's own JS files, including Ext.js and Prototype, so it seems like the chance of these different scripts conflicting is pretty high, esp. if I add more of my own.

What rich text editor does Ext.js offer? I've never seen one listed in their feature demos.

looking forward to future releases.

-paul


Message Edited by ptepper on 08-19-2008 01:34 PM

Message Edited by ptepper on 08-19-2008 01:38 PM
Raumil SetalwadRaumil Setalwad

Hello Krishnan use the following code to avoid javascript errors in IE for integrating tinyMCE editor.

 

<script type="text/javascript"
        src="{!URLFOR($Resource.TinyMce, 'tiny_mce/tiny_mce.js')}"></script>

 

Regards

Raumil Setalwad

SoozeeSoozee

Has anyone had any success implementing TinyMce or any other editor with visualforce?

I've been working on this for over a day and can't get anything to work.

 

Here's the code:

<apex:includeScript value="{!URLFOR($Resource.TinyMCE, 'tiny_mce/tiny_mce.js')}"/>

<script type="text/javascript">
       function tinyMCE.init({
        mode : "specific_textareas",
        editor_selector : "mceEditor"
	});
   </script>

<div class="mceEditor">
            <apex:inputtextarea rows="60" cols="60" rendered="true" richtext="false" id="LetterTxtArea" value="{!Letter__c.Letter_Body__c}"/>
            </div>

 

Matt_Matt_

Use a <div> tag to increase the width. 
ex:
<div width=""> <apex:inputtextarea value="{!Object__c.Field__c}" richText="true"/>
</div>

Cheers!