Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
//A script for use in a Visualforce page to override RichText inputFields with an expanded CKEditor
//values we need from the old editor
var instanceName;
var uploadURL;
var extraPlugins;
//the default editor exists in our scope as the variable 'editor'
//get the name of the text area element the editor lives in
instanceName =;
//add an event that launches our code when the editor instance is loaded
editor.on('instanceReady', reInitEditor());
function reInitEditor() {
//test if the value we need is null
if (editor.config.filebrowserImageUploadUrl) {
//Assign the values we need for our new editor instance
uploadUrl = editor.config.filebrowserImageUploadUrl;
xtraPlugins = editor.config.extraPlugins;
//Init our new editor instance with config. Configuring the editor is well documented at
editor = CKEDITOR.replace(instanceName, {
removePlugins: 'image',
toolbar: [
name: 'clipboard',
items: ['Undo', 'Redo']
name: 'styles',
items: ['Format', 'Font', 'FontSize']
name: 'basicstyles',
items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
name: 'colors',
items: ['TextColor', 'BGColor']
name: 'align',
items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
name: 'links',
items: ['Link', 'Unlink']
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
name: 'insert',
items: ['sfdcImage', 'sfdcMediaEmbed', 'Table', 'CodeSnippet']
name: 'tools',
items: ['Maximize']
name: 'editing',
items: ['Scayt']
name: 'document',
items: ['Print', 'Source']
customConfig: '',
extraAllowedContent: 'iframe',
//xtraPlugins is a value we saved from the old instance to load the SF proprietary plugins
extraPlugins: xtraPlugins + ',autoembed,embed,codesnippet',
//This is a mess but necessary for SF plugins to function
sfdcLabels: {
CkeMediaEmbed: {
iframeMissing: 'Invalid <iframe> element. Please use valid code from the approved sites.',
description: 'Use <iframe> code from DailyMotion, Vimeo, and Youtube.',
title: 'Embed Multimedia Content',
exampleTitle: 'Example:',
subtitle: 'Paste <iframe> code here:',
example: '\n \n <iframe width=\"560\" height=\"315\" src=\"\" frameborder=\"0\" allowfullscreen></iframe>\n \n '
CkeImagePaste: {
CkeImagePasteWarning: 'Pasting an image is not working properly with Firefox, please use [Copy Image location] instead.'
CkeImageDialog: {
infoTab_desc_info: 'Enter a description of the image for visually impaired users',
uploadTab_desc: 'Description',
defaultImageDescription: 'User-added image',
uploadTab_file_info: 'Maximum size 1 MB. Only png, gif or jpeg',
uploadTab_desc_info: 'Enter a description of the image for visually impaired users',
imageUploadLimit_info: 'Max number of upload images exceeded',
btn_insert_tooltip: 'Insert Image',
httpUrlWarning: 'Are you sure you want to use an HTTP URL? Using HTTP image URLs may result in security warnings about insecure content. To avoid these warnings, use HTTPS image URLs instead.',
title: 'Insert Image',
error: 'Error:',
uploadTab: 'Upload Image',
wrongFileTypeError: 'You can insert only .gif .jpeg and .png files.',
infoTab_url: 'URL',
infoTab: 'Web Address',
infoTab_url_info: 'Example:',
missingUrlError: 'You must enter a URL',
uploadTab_file: 'Select Image',
btn_update_tooltip: 'Update Image',
infoTab_desc: 'Description',
btn_insert: 'Insert',
btn_update: 'Update',
btn_upadte: 'Update',
invalidUrlError: 'You can only use http:, https:, data:, //, /, or relative URL schemes.'
sfdcSwitchToText: {
sfdcSwitchToTextAlt: 'Use plain text'
//load up the URL and token from the old editor instance
filebrowserImageUploadUrl: uploadUrl,
codeSnippet_theme: 'monokai_sublime',
contentsCss: [ ''],
removeDialogTabs: 'image:advanced;',
embed_provider: '//{url}&callback={callback}'
} else {
//Our IF test failed so we wait 50 millis
setTimeout(reInitEditor, 50);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.