HTML Editor: Request for floating toolbar

[FlowIT-JIT]

In some scenarios the traditional HTML editor takes up too much space. It would be really nice to have support for the floating toolbar instead, which is automatically shown above or below the editable area when focused.

To get started, replace CKEDITOR.replace(..) with CKEDITOR.inline(..) in Input.js.

Adjust Input.css ...

Although, make sure the CSS changes are only applied when toolbar is floating! Otherwise the styles will be applied in the traditional editing experience as well.

And disable calls to updateDesignEditorSize in Input.js (just return out).

The above changes will give us a working sample like shown in the screenshot.

The outer control (div.FitUiControlInput) assumes a default height of 150px which it should not. We want the editable div to adjust its size to the content.

[FlowIT-JIT]

In my test I just noticed that adding content does not push DOM elements below it down the page. So eventually we get something like this:

This is likely due to the default height of 150px which the editable div eventually exceeds. So either remove that constraint or consider overflow:auto if we'd like the traditional editing experience with a fixed container for the content.

[FlowIT-JIT]

Furthermore there's an annoying tooltip when hovering the editable div; "Rich Text Editor, <control ID here>"

[FlowIT-JIT]

For testing (debug.js):

Fit._internal.Controls.Input.DefaultSkin = "bootstrapck";
Fit.Internationalization.Locale("da");

var view = new Fit.Template(true);
view.AllowUnsafeContent(false);
view.LoadUrl("debug.html", function(sender)
{
    var item = null;

    //var s = performance.now();
    for (var i = 0 ; i < 5 ; i++)
    {
        var input = new Fit.Controls.Input("Input" + (i > 0 ? (i + 1) : ""));
        input.Value("Hello world");
        input.DesignMode(true);
        input.Width(500);
        input.Height(400);
        item = view.Content.Controls.AddItem();
        item.Control = input.GetDomElement();
    }

    view.Update();
    //console.log("Time usage: " + ((performance.now() - s) / 1000) + " sec.");
});
view.Render(document.body);