jeudi 9 février 2017

Ruby on Rails: CKEditor preload styled text

I am using CKEditor in my Ruby on Rails application so that users can apply HTML styling to text on a form. What I want to do is display a HTML table within the text area so that the user can edit and style the text within it, as opposed to having to try to create it in the form. Is this possible?

I have tried to do it by adding the table as the default value for the text area, as follows:

<%= f.cktext_area :message, rows: 10, :value => '<table bgcolor=#0066CC width=100% border=0 cellpadding=6 cellspacing=0><tr><td><p><font size=4 face=arial color=white >Table Heading</font></p></td></tr></table>'  %>

But for some reason this does not display the background colour for the table or some of the other styling.

This text area gets its menu options from the app/assets/javascripts/ckeditor/config.js file:

if(typeof(CKEDITOR) != 'undefined')
{
 CKEDITOR.editorConfig = function(config) {
   config.uiColor = "#EEEEEE";
  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
  config.filebrowserImageUploadUrl = "/ckeditor/pictures";
  config.filebrowserUploadUrl = "/ckeditor/attachment_files";
   config.toolbar = [
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','SelectAll','Scayt' ] },
        { name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ] },
        { name: 'styles', items : [ 'Styles','Format' ] },
        { name: 'font', items: ['Font','FontSize'] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic','Strike','Color','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','Outdent','Indent','Blockquote' ] },
        { name: 'links', items : [ 'Link','Unlink' ] },
        { name: 'tools', items : [ 'Maximize' ] }
 ];
}
} else{
  console.log("ckeditor not loaded")
}

Aucun commentaire:

Enregistrer un commentaire