Is there Any Rich text Editor to use in my Hybrid App

I have been using ckeditor which has been working fine - though I haven’t pushed it on ios as much

Had some issues with ckeditor in ios, and not even loading on some devices on android.

Tried quill.js, and it seemed great at first, but hopeless on ios. Seems to get orphaned from the keyboard as soon as you do anything.

Tried froala, and no luck with even being able to type in ios. There must be some way to get WYSIWYG working in ionic, but so far everything I try has blocker issues.

I have more issues when use textAngular with ionic
And i found out ui-tinymce as a savior for myself


It tried it on android device and emulate ios and it work good
Hope it help you

1 Like

I’m struggeling with CKEDITOR to get working in an Ionic app.
I is it working almost. But if the modal with the editor is on a phone the editor doesn’t replace the textarea.
Maybe it’s something because the modal is resized to fullscreen to fit on the phone.

Do you have working CKEDITOR as well on phone??

There is another issue with CKEDITOR. On android an blue arrow appears as a textcursor. After clsing the modal this blue arrow jumps to the upperleft corner and doesnt disappear.

Any suggestion??

it does work in ionic.
unfortunately it’s too heavy for mobile device…

use outline:none; to make it disappear in your editor css

Thank you for reply.
I ve another issue. Th CKEditor workshop on all devices except Android phones. Tablets and IOS phones no problem.
On Android phone the editor is not rendered. Any clue why??

Tried wysihtml, but with problems about focus on iOS…

quill has a similar problem about focus on ios…

Try below css with your editor to fix focus issue.

-webkit-user-select: none;

-webkit-user-select: auto | none | text;

Hi guys,

After some digging I get a solution on the ios focus issue.

The problem for the editors is that, when calling document.execCommand inside the editors (the editors use the api internally to edit the content inside a textarea or contenteditable div), iOS will check if the current focused element is an editable one, and if not, the calling will fail, which results in the functionality break for all the editors.

So we need to make sure by the time the callbacks of the rich text editors are called, the focus point is at the input area DOM node.

  1. Force the focus: add a capture phase event listener for ‘mousedown/touchstart’ which calls focus() and click() at the input area DOM node, on the parent of the toolbar buttons

  2. Prevent ionic from making the UI jump on Tap event: add a capture phase event listener for ‘mouseup/touchend’. Inside the listener, call the callbacks of the toolbar buttons and call e.preventDefaul() and e.stopPropogation() to make the gesture transparent to ionic.

Here are my codes:

	.directive('richText', function () {
		return {
			restrict: 'A',
			link: function ($scope, elem, attrs) {
				var cmdStatus = {},
					editorClass = '.rich-text-editor-textarea',
					toolbarClass = '.rich-text-editor-toolbar',
					cmdKey = 'rt-cmd';

				var inputArea = elem.find(editorClass)[0],
					toolbar = elem.find(toolbarClass)[0];
				['touchstart', 'mousedown', 'focus'].forEach(function (eventType) {
					toolbar.addEventListener(eventType, function () {
						inputArea.focus();
						inputArea.click();
					}, true);
				});
				elem.find('*[' + cmdKey +']').each(function () {
					var button = angular.element(this);
					['touchend', 'mouseup'].forEach(function (eventType) {
						button[0].addEventListener(eventType, function (e) {
							e.preventDefault();
							e.stopPropagation();

                                                            //here I don't use a rich text editor library, but you can surely call the callbacks of one if you like
							var cmdStr = button.attr(cmdKey);
							if (cmdStr) {
								var result = cmdStr.match(/([^(-)]+)\(?([^(-)]*)\)?/);
								if (result) {
									var cmd = result[1],
										params = result[2];
									if (document.execCommand(cmd, false, params)) {
										var isApplied = !cmdStatus[cmd]
										cmdStatus[cmd] = isApplied;
										if (isApplied) {
											button.addClass('toolbar-button-active');
										} else {
											button.removeClass('toolbar-button-active');
										}
									} else {
										console.log('could not execute command: ' + cmd);
									}
								}
							}
						}, true);
					});
				});
			}
		};
	})

@quangtqag I tried the tinymce directive too. But no luck. The toolbar does not render in the text area with ui-tinymce directive. Please would you post a code-snippet or even better a codepen example. I need an editor in modal templates.

The focus issue coming because of ionic creating clone for textarea while opening the keyboard.so when user try to focus somewhere into textarea then uit hard to focus and previous focus cursor still there.

I found two work Around for this issue.

  1. Text area should be on top of the page and should not move up when keyboard opens.
    2.Create one iframe inside content and give other simple html page url within iframe and create your text area within that newly created html page.

@darrenahunter please show me some code how to use this on a Android phone. I have it working on all devices except Android phone.

Hi @pcr

My use of CKEditor was in the dashboard side of my projects (ie. not the ionic app). The dashboards are standard twitter bootstrap / angular webapps.
The CKEditor works ok on an Android, however I do recall that you have to tell the chrome browser to ‘Run in Desktop Mode’ this is in the options for the page.
Maybe that points in the right direction.

Cheers

@mhartington does @darrenahunter post:36, topic:4437" here has a point??

The CKEditor works ok on an Android, however I do recall that you have to tell the chrome browser to ‘Run in Desktop Mode’ this is in the options for the page.Maybe that points in the right direction.

Not sure I follow, "Run in Desktop Mode"
Either way, this would be an issue for CKEditor and not ionic.

i’ve wrote a litte quill editor directive:

not that beautiful, but works … keep in mind that quill editor does not work on Safari < 8 -> so you need iOS 8.x

3 Likes

If you’re looking for a better editor, especially for mobile, I run into Froala editor: https://www.froala.com/wysiwyg-editor and it seems to be doing a hack of a job.