Text Editor Widget

[JazzParticipant]

Hello jqWidget Overlords,

I just noticed that jqWidgets doesn’t have a text editor widget. I was just wondering what the chances are of getting something like that added to the roadmap as I think it would only add value to an already awesome UI framework.

I just thought I’d start a conversation on this and see what happens. I’m happy to help with development wherever I can but I’ve only had minor experience writing jQuery plugins and I think a text editor would be slightly involved (understatement intentional).

Thoughts?

Jamie

[Peter StoevKeymaster]

Hi Jamie,

Unfortunately, Text Editor widget implementation is not in our current development plans. We will consider it in the future.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JazzParticipant]

Thanks for getting back to me Peter. Well actually, today I decided I needed a new challenge so I’ve been working on making my own ‘jqxEditor’ plugin. It’s coming along slowly but quite nicely. I’m using existing widgets as a start point/reference so I’m trying to keep the code in-line with those.

So far I have a simple toolbar (currently with only Bold, Italic, Underline and Strike), and an editor pane. I can type text and retrieve HTML using a call to $().jqxEditor(‘val’).

I’d be more than happy to submit some code to you if you deem it worthy.

I’ll let you know how I get on.

[Peter StoevKeymaster]

Hi Jamie,

Thanks for the update!

I would be very happy to take a look at it, when you have something ready.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JazzParticipant]

Hi!

I’ve got a little bit of a demo page going on. Slowly getting through adding the required features in between doing actual real work.

Demo is at: http://www.hazaarmvc.com/site/test

Hopefully I’m heading in the right direction.

[Peter StoevKeymaster]

Hi Jamie,

Good Job!

The Text Editor looks great as a start. Just a suggestion: You can set “autoDropDownHeight” to the Font Size DropDownList. In addition, It could be better if you use the jqxColorPicker for choosing colors instead of predefined values. I also tried it with IE and the text area seems to have some issue with it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JazzParticipant]

Thanks for the tips Peter.

I actually have used jqxColorPicker now. In the interest of showing something faster I initially used a simple jqxComboBox to start. I’ll push it out to the demo site once it’s all working properly (minor tweaks to go).

I haven’t tested IE. Apprently there is something I need to do differently when activating the contentEditable attribute. I read it in the spec, but I don’t have IE at the moment so I’ll have to figure that one out later.

Jamie

[JazzParticipant]

Updated.

* Now has jqxColorPickers for forecolor and backcolor.
* Toolbars are now grouped so similar items can be kept together.
* Removed cut, copy and paste as they are usually restricted from JavaScript and just didn’t work. (CTRL-C, CTRL-X and CTRL-V will still work).
* Added hyperlinks

I think the only major thing left to do is sync the editor with the toolbar so, for example, bold is selected on bold text, colorpicker is updated, etc. Oh, that and getting it working Internet Excreter.

[JazzParticipant]

Hi Peter! Almost done! I now have everything consistently working in all browsers. Phew, that was a pain in the butt.

Anwayz, quick question. What is the correct method for passing through events from the editor element?

Right now, I have used addHandler() for things like keydown with simple functions that just use a _raiseEvent method to trigger the event on the host object. Is that correct? Or is there a built in way to simply say keyup/down events should be triggered automatically?

[Peter StoevKeymaster]

Hi Jamie,

Thanks for the update!

Feedback from me:

I was not able to run that under IE7 and it looks a little odd when you run it with IE8. The “contentChanged” event is not raised correctly according to me – when I double-click to select a text, the event is raised. I am able to resize the image in IE, but not in Chrome. If the editor is built from textArea, it is not necessary to raise events like “keyup” and “keydown”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JazzParticipant]

Peter,

Yeah, the IE integration is a pain. I’ll do some more testing in my VM tomorrow for the event stuff.

The image resize thing though is an IE only thing. It’s actually not implemented in Chome at all. This is the ‘enableObjectResizing’ command. See http://tifftiff.de/contenteditable/compliance_test.html for compatibility and some idea of the mess that I’m having to deal with. I’m going to try and do the image resize handling in the widget itself if it’s possible. Most other widget framework editors don’t have image resize either anyway.

I’ve also made it so it can be made from either a DIV or a TEXTAREA so it’s up to the developer. If using a TEXTAREA the only thing they gain is the ability to automatically submit the editor content as part of a form submit. If it’s just a DIV, I have exposed a ‘save’ event and method so that a $.post call can be made to save content. Hopefully that’s flexible enough.

I’ll keep plugging on with the IE integration though. IE just really does things differently to every other browser, so finding methods that work in all browsers is my challenge at the moment. IE 10 looks fine for me though, so now it’s just a matter of working backwards.

J

[JazzParticipant]

Peter,

I have figured out why it looks weird in IE7 and IE8. Seems if you iterate over an array it includes the ‘indexOf’ method in the loop. I think it’s cool that you’re adding indexOf for implementations that don’t have (I have used it in a few places), it’s just weird that a for loop has decided that it is an iteratable item. Anywayz, the end result was an extra toolbar and an extra toolbar item in each toolbar that wasn’t meant to be there.

IE7 not working was just me being silly and leaving a comma in the wrong place.

Events are now consistent. Turns out IE only triggers a ‘selectstart’ event when, you know, a selection starts. Whereas in FF and Chrome it’s triggered pretty much along with the ‘mousedown’ event. Fixed by just listening for mousedown events on both instead. Works nice.

So yeah, check it out when you can. I’m just finishing off the toolbar sync but for the most part, everything seems to be working consistently across all browsers now, all the way back to IE7.

Let me know if you spot anything else.

Jamie

[Peter StoevKeymaster]

Hi Jamie,

Looks much better. Good progress! I see that your toolbar bold/italic buttons now catch the context’s style. However, the same is not valid for the text-alignment and strike-through buttons. In addition, the custom HTML inserted in the DropDownLists via the “setContent” is not vertically aligned. I suppose that you can achieve that by adding a top-margin to it. If you want to make it look even more consistent, you may use jqxWindow for the Dialog boxes for Images/Hyperlinks and use jqxButton for the buttons below the editor :).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JazzParticipant]

Already well into switching to jqxWindow, mate.

Strike is now fixed, just missed it in my element->command map. Same with hyperlinks. Justify commands are a bit different though as with those I will actually have to decipher the style attribute on elements. Bold, italic, etc are block elements and easy to handle. Getting there though.

Also, the buttons below the editor are not part of the editor. They are only part of my demo to test external method calls, such as:

$('#editor').jqxEditor('save');

or

$('#editor').jqxEditor('print');

I’m also planning on building some sort of image browser so make inserting images even easier. That may come a bit later though.

[JazzParticipant]

Oh, and also, thanks for pointing out the vertical alignment on the dropdownlists. I think I may have to re-think how the toolbar is rendered to fix this. At the moment, it creates a bunch of items and then appends them to the toolbar which I think stuffs the jqx method calls as the elements are not positioned in the DOM correctly at that point. I need to create, then append, then call the jqxDropDownList method.

[Author]

Posts