Apex Code Development You need to sign in to do that
Don't have an account?
ptepper 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:
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:
Message Edited by ptepper on 07-09-2008 01:21 PM
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>
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
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
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?
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
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.
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
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
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>Use a <div> tag to increase the width.
ex:
<div width=""> <apex:inputtextarea value="{!Object__c.Field__c}" richText="true"/>
</div>
Cheers!