steveathon / bootstrap-wysiwyg

Tiny bootstrap-compatible WYSIWYG rich text editor
MIT License
661 stars 1.71k forks source link

Angular Port ? #13

Open abhinavguptas opened 9 years ago

abhinavguptas commented 9 years ago

Do we have any angular directive for the same ?

electricjones commented 9 years ago

I have forked this to remove bootstrap dependencies and create a base library that can then be wrapped by simple libraries to use with Foundation 5 or angular or whatever else. Should have my init commit up in a week or so. It will be here: http://github.com/phoenix-labs/wysiwyg-core.js and then whatever wrapper implementations will be angular-wysiwyg.js, foundation-wysiwyg.js and such.

I'd love feedback on how to make this more intuitive.

steveathon commented 9 years ago

@chrismichaels84 would be interested in seeing more on this! I mean, the idea behind the JQuery element is to be small and as independent as possible. Most of the dependancies are for iconography, etc, so happy to look at options here to reduce it further and make it more portable.

electricjones commented 9 years ago

I have completed my port and issued a pull request at Issue #18. I may create an angular wrapper this weekend if I have a couple hours.

poppywood commented 9 years ago

In Angular you can bind your model to the content of the editor in a directive like this

.directive('richTextEditor', function( ) {
            var initToolbarBootstrapBindings = function() {
            // your init stuff
};
return {
            restrict : "A",
            require: ['^ngModel'],
            scope: {
                ngModel : '='
            },
            replace : true,
            transclude : true,
            template : "<div id=\"editor\"></div>",
            link : function(scope, element, attrs, ctrl) {
                initToolbarBootstrapBindings();
                var editor = jQuery('#editor');
                editor.wysiwyg();

                editor.bind('blur keyup change', function() {
                    scope.$apply(function(){
                        scope.ngModel = editor.cleanHtml();
                    });
                });

                scope.$watch("ngModel",function(newVal){
                    if(newVal == editor.cleanHtml())
                        return;
                    if(newVal == undefined)
                        editor.html('');
                    else {
                        editor.html(newVal);
                    }
                });
            }
        };
});

Hope it helps someone :-)

steveathon commented 9 years ago

I'm leaving this open for the minute because I think the conversation is valid and is worth a longer and more indepth exploration - but marking it as enhancement/wont fix for now.