Text Editor Component Request

ionic-v1
1

Can any one help me create a text editor component that works well on mobile?
I found a basic contenteditable directive. it works fine on a desktop browser, but not so much on a mobile device.

Application.Directives.directive('contenteditable', function () {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        transclude: true,
        scope:true,
        link: function (scope, element, attrs, ngModel, storageService) {
            if (!ngModel) return; // do nothing if no ng-model
       
        element.attr('style', 'position:absolute;top:0;left:0;bottom:0;right:0;min-height:400px');

        // Specify how UI should be updated
        ngModel.$render = function () {
            element.html(localStorage.getItem(scope.storageKey));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function () {
            scope.$apply(readViewText);
            localStorage.setItem(scope.storageKey, ngModel.$viewValue)
            console.info(localStorage.getItem(scope.storageKey))
        });

        // No need to initialize, AngularJS will initialize the text based on ng-model attribute

        // Write data to the model
        function readViewText() {
            var html = element.html();
            // When we clear the content editable the browser leaves a <br> behind
            // If strip-br attribute is provided then we strip this out
            if (attrs.stripBr && html == '<br>') {
                html = '';
            }
            ngModel.$setViewValue(html);
        }
    }
};

});

I need it to also play nice with other ionic components. I.e. having my editor component inside an ion-content with scroll does not play nice on mobile. I read somewhere that there was a fix for this but my experience has the keyboard appearing on touch, but the cursor does not show up and i cannot actually type anthing. Typing works when I disable scroll.

Is there anyway to mimic the notepad app on iphone, but extend it with some editor controls (bullet points, tabbing, etc)

Thanks in advance

2

Did you got any editor ?? i am also need the same to work with mobile to write emails…

3

Im currently looking at SirTrevor. I’ve nearly got it working. im having to to a bit of custom styles and auto form posting. This may or may not work for emails. let me know what you think.

4

I’m also very interested in Sir Trevor. I love the workflow. I spent an hour trying to figure out why it doesn’t work so well on Android, and then decided to just replicate the functionality. Building my own Angular version was attractive for a lot of reasons. Sir Trevor has a bunch of dependencies, and the “bold” and “underline” features of ST don’t work on mobile phones very well. Also I’ve been following the GitHub issues a good bit. It seems they might make big changes going forward.

It took me about an hour to have a basic template up, and the functionality is fast and smooth. However-- I’m just using textareas for now and not contenteditable divs. For some reason a basic contenteditable div has focus issues in ionic. There’s a lot of folks with these issues apparently so hopefully I can get to the bottom of it. It would be great to have a lightweight ST integrated w/ angular for Ionic.

6

Have you done with SirTrevor