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

41

@chakraveer Hi how do I create an iframe with other simple html page url inside the content of an Ionic app. DO you have a code snippet for that??

42

Did anyone finally get one of these directives working in Ionic (textAngular or CKEditor ).

@chakraveer could you please post your code? Looks like you got close to making this workā€¦

43

@chakraveer Me too. Please show us some code how you manage the cloning textarea.
I tried a lot to code a teksteditor. All editors have problems. For all using in a phone device.

44

Any update on this? Tried ionic with textAngular plus all above suggestions, still no luck. Really hope ionic team can help find solutions or provide suggestions.

45

@peterzheng Try quill , and donā€™t put it in ion-content .
html:

    <div id="editor-container" class="selectable" data-tap-disabled="true" style="height:200px;"></div>

css:

.selectable {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important;
}

there is still some problem like cursor may overlap with other component when it should not be visible and scroll bar not showing. But it is still pretty good.

1 Like
46

Thanks Nick, just tested, much better than textAngular from Ionic integration point view!

47

Hi.

Did you find a solution to your problem. What did you end up with?

48

I started using squire.
Not the angular squire but the plain javascript squire

and it is working good.

textangular was causing exceptions for me for some reason

49

Did you use it with an iframe? or the other way? I will appreciate if you can show me a little of your implementation code on your controller. Thanks :smile:

50

i used the default squire configuration

inside my View

`

B I U List
`

inside my controller

`$scope.myModel = {}
$scope.myModel.fullWrapperText = ā€œā€;
var editorFrame = document.getElementById(ā€˜fullTextWrapperEditorā€™);
var sqEditor;
editorFrame.onload = function(){
sqEditor = editorFrame.contentWindow.editor;
sqEditor.addEventListener(ā€˜inputā€™, editorEditing , true );
sqEditor.addEventListener(ā€˜pathChangeā€™, editorEditing , true );
sqEditor.addEventListener(ā€˜focusā€™, editorEditing , true );
}
$scope.currentPath = [];
$scope.hasBold = $scope.hasItalic = $scope.hasUnderline = $scope.hasList = false;
$scope.updateEditor = function(){
$scope.hasBold = $scope.hasItalic = $scope.hasUnderline = $scope.hasList = false;
//console.log( $scope.currentPath );
$scope.hasBold = $scope.currentPath.indexOf(ā€˜bā€™) > -1
$scope.hasItalic = $scope.currentPath.indexOf(ā€˜iā€™) > -1
$scope.hasUnderline = $scope.currentPath.indexOf(ā€˜uā€™) > -1
$scope.hasList = $scope.currentPath.indexOf(ā€˜liā€™) > -1
//console.log( $scope.hasBold + " " + $scope.hasItalic + " " + $scope.hasUnderline +" " + $scope.hasList );
}
function editorEditing(){
$scope.currentPath = sqEditor.getPath().toLowerCase().split(">");
$scope.updateEditor();
$scope.myModel.fullWrapperText = sqEditor.getHTML();
}

function editorInitialized(){
sqEditor.setHTML( $scope.myModel.fullWrapperText );
}

$scope.handleText = function( handle ){
switch( handle ){
case ā€˜boldā€™ :
if( $scope.hasBold ){
sqEditor.removeBold();
} else {
sqEditor.bold();
}
break;
case ā€˜italicā€™ :
if( $scope.hasItalic ){
sqEditor.removeItalic();
} else {
sqEditor.italic();
}
break;
case ā€˜underlineā€™ :
if( $scope.hasUnderline ){
sqEditor.removeUnderline();
} else {
sqEditor.underline();
}
break;
case ā€˜listā€™ :
if( $scope.hasList ){
sqEditor.removeList();
} else {
sqEditor.makeUnorderedList();
}
break;
}
return false;
}`

51

quill works in ion-content too, just add

<ion-content overflow-scroll="true">
1 Like
52

Hi Nick,

Sorry to bring this back but I am having problems getting quill to work on an IONIC project.

I am using ng-quill pluguin.

The editor works fine on the browser, however on IPhone the text editor shows but when i try to type the letters and cursor do not show up.

Any ideas how to fix this?

EDIT:

GOT NG-QUILL WORKING (TESTED ONLY ON IOS 9.2 SO FAR)

Solution ( From nickTheUncharted solution)

index.html

<!-- QUILL -->
<link rel="stylesheet" href="lib/quill/dist/quill.base.css">
<link rel="stylesheet" href="lib/quill/dist/quill.snow.css">

<script src="lib/quill/dist/quill.min.js"></script>
<script src="lib/ngQuill/src/ng-quill.min.js"></script>

view.html

<ion-view view-title="Send">
  <ion-content overflow-scroll="true">

<ng-quill-editor style="height:200px;" class="selectable" ng-model="send_to_customer.email_message" toolbar="true" link-tooltip="true" image-tooltip="true" toolbar-entries="font size bold list bullet italic underline strike align color background link image" editor-required="true" required="" error-class="input-error"></ng-quill-editor>

<style>
.selectable {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important;
}
</style>

  </ion-content>
</ion-view>

Important to add selectable class and set the height to ng-quill-editor, wasnā€™t working without the extra css.

53

Have you fixed That? beacuse i am facing same issue?