CODEWITHSUNDEEP
jqueryhtmlcssautoresize
user3529020
user3529020

Reputation: 86

Resizing window with NicEditor

I'm using NicEditor (http://nicedit.com).

First, I set the width of the textarea 100%, but when I resize the window, the editor stays the same and won't resize to the new 100% width of the window.

<textarea style="width: 100%;"> something .. </textarea>

<script>
    //<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>

</script>

How can I fix this?

EDIT: I found a solution that works:

  $(function () {
      editor = new nicEditor({fullPanel : false}).panelInstance('text');
  })

  $(window).resize(function() {
     editor.removeInstance('text'); 
     editor = new nicEditor({fullPanel : false}).panelInstance('text');
  });

Upvotes: 1

Views: 2963

Answers (2)

metal maniac
metal maniac

Reputation: 119

I found another easy way. In the nicEdit.js file change you have to change only 2 lines:

Near line 453 change "width".

Original:

var panelElm = new bkElement('DIV').setStyle({
  width: (parseInt(e.getStyle('width')) || e.clientWidth) + 'px'
}).appendBefore(e);

New:

var panelElm = new bkElement('DIV').setStyle({
  width: '100%'
}).appendBefore(e);

and near line 554 you have to change also "width".

Original: 

newX = parseInt(e.getStyle('width')) || e.clientWidth;

New: 

newX = '100%';

That is all.

Upvotes: 1

Venkat.R
Venkat.R

Reputation: 7746

By Default, Nice Editor or CK Editor don't have responsive feature.

Try something like below. control the width and height by parent element.

    <textarea id="comments" style="width:100%; height:100%;"></textarea>

On every window resize, invoke the NiceEdit

JS:

  var editor;
  function reLoadEditor() {
      editor.removeInstance('comments'); 
      editor = new nicEditor({fullPanel : false}).panelInstance('comments');
  }();

  $(window).resize( function() {
     reLoadEditor();
  } );

Reference - Demo 3 : Add/Remove NicEditors:
http://nicedit.com/demos.php?demo=3

Upvotes: 2

Related Questions