ckeditor - CK Editor Text Font Color issue - Salesforce

Question

Unable to add the font color option to the CK Editor tool bar in Visualforce page.

Whereas, the font color option is available in Standard Rich Text Area field. As we add color to the text and save, it saves with no issues, however, we have a new tab with Rich Text area fields which mirrors the same text (CK Editor). As new text is added to the Rich Text Area fields on the CK Editor tab the font color to the original text is lost.

Would like to know and understand how to add the font color option to the CK Editor tool bar.

<apex:page controller="KX_CKEditorController" showHeader="false" id="thepageid">

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<script src="https://cdn.ckeditor.com/4.15.0/standard/ckeditor.js">
</script>
<apex:form id="theformid">
    
    <style>
        a.cke_button_on{
        pointer-events: none; 
        cursor: default; 
        }
    </style>
    
    <apex:slds />
    
    <textarea id="editor1" class="ckeditor" rows="4" cols="50">{!know.Issue__c}</textarea>
    
    <apex:actionFunction name="save" action="{!saveKnowData}" rerender="theformid" oncomplete="init();">
        <apex:param assignTo="{!alert}" name="prm" value=""/>
    </apex:actionFunction>        
    
    <div class="demo-only" style="height:6rem">
        <div class="slds-spinner_container">
            <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </div>
    
    
</apex:form>


<apex:form >
    <script type="text/javascript">
    
    window.onload = function(){
        CKEDITOR.replace( 'thepageid:theformid:editor1', {
            extraPlugins: 'imageuploader',
            colorButton_enableAutomatic :true
        });
        CKEDITOR.on('instanceReady', function( evt ){
            var editor = evt.editor;
            editor.execCommand('maximize');                
        });
        CKEDITOR.instances.editor1.on('blur', function() {
            var element = CKEDITOR.instances['editor1'].getData();
            save(element);
        });
    }
    function init(){            
        window.location.reload();            
    }
    </script>
</apex:form>

</apex:page>

question from:https://stackoverflow.com/questions/65516762/ck-editor-text-font-color-issue-salesforce

Answer 1

Waitting for answers