0
votes

Currently i'm having issue with Tiny MCE text editor with iPad. Issue is that if i will put one big string(without text) then it will go out of text editor and will break the layout as well as iPad will hang too. Not sure why this issue is coming as in web version it seems good but in ipad it is not.

I have used resize plugin(not working) and word limit too but as if i will type without space then it will counted as one word so that's not working too.

Can anyone please solve this error as i have spent hours to check this error on net as well as on SO too but did not get any hint, how to solve it.

To check error
Sorry to not provide you any fiddle or demo as this issue is coming in iPad so please try to open tiny mce in iPad and type one big text string without space and you will see that it will break the border and will go out of text editor's box so please help me.

If there is any jquery or Tiny MCE plugin help, please let me know. Thank you

1

1 Answers

1
votes

After spending hours i have got the solution for my own question. What i did is i edited the TinyMCE css by applying this code, so my code is look like this :

tinymce.init
    ({
          selector: '#tickeFormEditor', //texteditor'id
          plugins: "pagebreak",
          menubar: "insert",
          toolbar: "pagebreak",
          width: "auto",    
          height: 200,
          theme: 'modern',
          setup: function (ed) {
                ed.on('keyup', function (e) { 
                    var count = CountCharacters();
                    document.getElementById("character_count").innerHTML = "Characters: " + count;
                });
            },
            theme_advanced_resizing: false,
          plugins: 
          [
            'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons template paste textcolor colorpicker textpattern imagetools'
          ],
          toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
          toolbar2: 'print preview media | forecolor backcolor emoticons',
          image_advtab: false,
          templates: 
          [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
          ],
          content_css:  //this is where i have used css of TinyMCE
          [
            'includes/plugins/tinymce/codepen.min.css'
          ],
          table_default_attributes: 
          {
            border: '1'
          },
          table_default_styles:
          { 
            border: '1px solid black', borderCollapse: 'collapse'
         }
});

And then i edited css and updated this class .mce-content-body p

.mce-content-body p
   {
     margin:25px 0;
     word-wrap:break-word;
     word-break:break-all;
   }

and that's how i got the solution of my issue so if any of you having this issue or any issue regarding css of text editor then you can edit this css and get solve your issue. Hope this will help you. :)