views:

66

answers:

0

I am creating an in-page editor using FCKEditor. Essentially there will be multiple div's on a page, with each div being editable having certain tags as identifiers. When you click on a div, it will convert into an FCKEditor, and place the toolbar above. All the other text areas are disabled.

I have this working, however I am looking at best practice in coding the javascript. At the moment, I am using jQuery as my javascript library, and have something like the following:

var InlineEditor = {
   AreaID: null,
   OriginalText: null,
   FCKEditorInstance: null,
   ContainerDiv: null,

   Init: function() {
     // add click events to divs which calls create function
   },

   Create: function(e) {
      ContainerDiv = $(this);
      AreaID = ContainerDiv.attr("id");

      // create the fckeditor, empty the div and insert the new editor

      InlineEditor.Toolbar_Create();
   },

   Toolbar_Create: function() {
      Container.before("<div id='" + FCKEditorInstance + "_Toolbar'></div>");
   }

   // etc
}

$(document.ready(function() {
   InlineEditor.Init();
});

Reading other articles/posts on javascript, I could possibly do the following:

   function InlineEditor()
   {
      this.AreaID;
      this.Create = function()
      {
          // create the fckeditor
          var toolbar = new FloatingToolbar();
          toolbar.Create(this.AreaID);
      };
   }

   function FloatingToolbar()
   {
      this.Create = function(areaID)
      {
          // create the toolbar
      };
   }

var Editor = {
   Init: function() 
   {
       $("div.editor[type]").click(Editor.Click);
   },
   Click: function(e)
   {
       var inline = new InlineEditor();
       inline.AreaID = $(this).attr("id");
       inline.Create();
   }
}

$(document).ready(function() {
   Editor.Init();
});

With this though, it would have to be a hybrid, i.e. get all the elements, and call

Where I see this as an issue, is that I have custom buttons in the fckeditor that will need to cancel (essentially returning the text area to it's natural state, and save, which will post off the new data, and then return the text area to natural state with updated data.

I have also been thinking about creating a jQuery plugin, but not sure which would be best way to proceed.