WYSIWYG directive - easy to add? about angular-xeditable

[plandem]

WYSIWYG is not as easy as basic inline editing, especially if you gonna to release it for users/customer, because alot of testing for cross-browser functionalities (each major browser, each major operation system, each major update of depencies (libraries and etc)). Better looks for something like CKEditor inline editor mode, there is a angular wrapper for inline editor - at least i saw it somewhere!

[vitalets]

good option!
@plandem could you share the link to ckeditor directive?

[plandem]

Well, here is it:
http://ericpanorel.net/2013/08/03/ckeditor-4-inline-mode-angularjs-directive/

i'm still new about angular, so i can't rate level of implementation.

P.S.: Here is official doc about it:
http://docs.ckeditor.com/#!/guide/dev_inline

[plandem]

to enable inline editing, you will not do alot from CKEditor/etc side. But if you want to bring some 'events' as angular style, then probably some work will be needed :)

[vitalets]

ok, thanks, I will have a look!

[amish-patel]

Thanks guys - CKEditor was definitely good pointer - although I have not used it as form-editable control, I did use a directive on a stand-alone page to provide WYSIWYG editing using CKEditor and it's pretty straightforward

• http://stackoverflow.com/questions/18685530/multiple-4-2-ckeditor-instances-on-one-page-with-angularjs

[ashernevins]

For what it's worth, this isn't that difficult to do. I used textAngular https://github.com/fraywing/textAngular with xeditable and it works great. The only changes I needed to make were:

1. Change inputTpl to '
   ' (I did it only for editableTextarea, but you can do it for whatever you like).
2. Remove one of the x-editable styles that draws a box around the editor in your chosen theme (if applicable).
3. For convenience sake, I added the submit and cancel buttons to textAngularTools, so that I could turn them off in xeditable and use them right in the textAngular toolbar with the others.

[vitalets]

@ashernevins textAngular look very nice.
If you have time, it would be greate to you make PR with editable-wysiwig directive..

[jonaswindey]

@ashernevins : I think github removed your code when pasting, could you post your code again with correct markdown? Thanks!

[vasya10]

@jonaswindey you can copy the xeditable editableTextArea module and just change this line to:
(call your directive as editableTextAngular)
directiveName: 'editableTextAngular',
inputTpl: '<div text-angular></div>',
and you can use the tag as <div editable-text-area> ... it will work.

[vasya10]

@vitalets i could submit a PR but currently im not getting the textAngular styles correctly, once i figure out how to set those styles this could be reusable.

[schup]

editable-wysiwig would be nice :-)

[geoidesic]

@vasya10 any luck getting the textAngular styles to work?

[geoidesic]

@ashernevins Any chance you could show your code for how you removed the buttons and added them as toolbars?

[pdonorio]

+1

An editable-wysiwig should be a must :)

I worked a little with textAngular and found some limitations. Just for the record, i am testing now ng-wysiwyg which - at first impression - seems to cover more options.

Thanks for the great work!

[mitcht]

Closed as being too old