CRLF characters being saved in Rich Text Field

  • 1
  • Problem
  • Updated 3 years ago
When pressing "enter/return" in an Rich Text Field, the data being stored in the model and SFDC field upon save contains Carriage Return/Line Feed characters.  The surrounding HTML contains appropriate <p> tags around the paragraphs but the carriage return/line feeds should not be stored in the data.  If anything a the "return/enter" should translate to a <br/> but if <p> tags are going to be applied, not sure its even necessary.

Steps to Reproduce:

1) Add a Rich Text Field to any SObject
2) Create a stock "detail" page for that SObject
3) Add rich text field to field editor
4) Preview page
5) Edit the Rich Text Field by typing a few characters, hitting return/enter and typing some more
6) Inspect the model data

Expected Behavior
Model field data should not contain the CR/LF character(s)

Actual Behavior
Model data contains CR/LF characters

Thanks!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 3 years ago

  • 1
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
This is the behavior of the underlying CKEditor. We allow it's default behavior in most cases. Does this create an issue for you?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey JD -

Thanks for taking a look at this.  I initially tried to change to RTF field from Long Text to work around the issue at https://community.skuidify.com/skuid/topics/cr-lf-in-text-field-results-in-illegal-token-error-in-fo....  That is what triggered this post since I still ended up with carriage returns.

That said, I think having the \n is going to cause issues in another area of our app that has yet to be developed.  In short, it will do document merging (Conga) so I think the \n will end up resulting in an extra line break.  I'll try to throw together a POC to verify but ideally, there would be a way to avoid this.

If I use standard layout and edit the RTF field, I end up with:

"Skuid is cool!<br>Everyone should use it!<br>Have you started?"

If I use Skuid, I end up with:

"<p>Skuid is cool!</p>\n\n<p>Everyone should use it!</p>\n\n<p>Have you started?</p>"
The HTML is completely different and the carriage returns are in there.  The challenge here is that depending on which way a user edits the value (Standard layout or Skuid), the resulting document will be different after merge since the value of the field has changed (with different markup that could be styled differently).

To be honest, I'm not sure there really is a one size fits all here.  Possibly provide a way to override the CKEditor config settings?

Thanks!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Barry - have you seen this post on overriding the CKEditor Default Config? 
https://community.skuidify.com/skuid/topics/change-ckeditor-default-configuration?topic-reply-list%5...
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Rob -

I had not seen that post, thanks for the link!  This is inline with my where I was heading with a way to override the CKEditor settings.  Ideally there would be a way to do this more globally but a custom field renderer works.

I threw together a test that overrides "Enter" behvior and sure enough, it uses a <br/> instead of <p> tag.

Unfortunately, an extra carriage return character is still inside the model data field value which I would not expect.

Using the standard rendered, you get two carriage return characters,  Using the overridden ckEditor properties with enterMode of CKEDITOR.ENTER_BR, you end up with a single carriage return character.

I've updated the sample page two contain two RTF fields.  If you modify the "Test Rich Text" field, you'll get standard render, if you modify "Test Rich Text (With CK Renderer)" you'll get modified enterMode. 

Steps to reproduce:
1) Use sample page below
2) Preview page
3) Clear out "Test RIch Text" field then type hello, hit enter, type goodbye
4) Inspect model data and you'll see Image #1 below
5) Clear out "Test Rich Text (With CK Renderer) field then type hello, hit enter, type goodbye
6) Inspect model data and you'll see Image #2 below

The question is, why are the extra carriage returns getting in there?  In either case (Standard or Custom Renderer), there shouldn't be any at all.  

Image #1


Image #2


Sample XML
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account" adapter="" type="">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
            <field id="Test_Rich_Text__c"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account" uniqueid="sk-l6en7-70">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="delete"/>
            <action type="clone"/>
            <action type="share"/>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="edit" uniqueid="sk-l6en7-71" buttonposition="">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Basics" collapsible="no">
                     <fields>
                        <field id="Name"/>
                        <field id="Test_Rich_Text__c" valuehalign="" type=""/>
                        <field id="Test_Rich_Text__c" valuehalign="" type="CUSTOM" snippet="ckEditorRenderer">
                           <label>Test Rich Text (With CK Renderer)</label>
                        </field>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="System Info">
                     <fields>
                        <field id="CreatedDate"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inlinesnippet" name="ckEditorRenderer" cachelocation="false">var field = arguments[0],
               value = skuid.utils.decodeHTML(arguments[1]);
            
            field.options.ckEditorConfig = function(){
               return {
                  enterMode: CKEDITOR.ENTER_BR
              };
            };
            skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);</jsitem>
         </javascript>
      </resources>
      <styles>
         <styleitem type="background" bgtype="none"/>
      </styles>
   </skuidpage>