Как правильно авторизовать текстовое поле wysihtml5

Я использую bootstrap-wysihtml5, поэтому получаю ввод от поля ввода текстового поля. Чтобы улучшить работу с пользователем, я хочу, чтобы авторезистировать текстовое поле, чтобы оно соответствовало входному тексту.Как правильно авторизовать текстовое поле wysihtml5

С помощью кода в this Gist Я могу изменить размер текстового поля при нажатии, но не при загрузке.

Вот моя текущая реализация:

var container = $("#container"); 
var textarea = $("<textarea />"); 
textarea.attr("style", "width: 90%;"); 

container.append(textarea); 

textarea.wysihtml5({ 
    "font-styles": false, 
    "emphasis": false, 
    "lists": false, 
    "html": false, 
    "link": false, 
    "image": false, 
    "color": false 
}); 

textarea.val("<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div<div><br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div"); 

textarea.observe("load", function() {  
    var $iframe = $(this.composer.iframe); 
    var $body = $(this.composer.element); // <body marginwidth="0" marginheight="0" contenteditable="true" class="wysihtml5-editor" spellcheck="true" style="color: rgb(85, 85, 85); cursor: auto; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; min-height: 0px; overflow: hidden; background-color: rgb(255, 255, 255);"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div></body> 

    $body.css({ 
    'min-height': 0, 
    'line-height': '20px', 
    'overflow': 'hidden', 
    }) 

    var scrollHeightInit = $body[0].scrollHeight;    // 3860 
    var bodyHeightInit = $body.height();       // 3860 
    var heightInit = Math.min(scrollHeightInit, bodyHeightInit); // 3860 
    $iframe.height(heightInit); 

    $body.bind('keypress keyup keydown paste change focus blur', function(e) { 
    var scrollHeight = $body[0].scrollHeight;  // 150 
    var bodyHeight = $body.height();     // 60 
    var height = Math.min(scrollHeight, bodyHeight); // 60 
    $iframe.height(height); 
    }); 
});

Как вы можете видеть height оценивается в , что является правильным. Но heightInit оценивается как , что является неправильным. Как это исправить?

источник

2015-03-09 ChristofferJoergensen

Можете ли вы опубликовать минимальный рабочий пример вашего кода? –

Hi @ GabyakaG.Petrioli. Вышеприведенный код действительно работает. Это просто дает мне неправильное значение heightInit. Поэтому, если вы хотите протестировать его, вы должны это сделать, а затем подтвердить мои результаты, выполнив 'console.log (heightInit);'. – ChristofferJoergensen

Я имел в виду, если есть живая страница (* http: //jsfiddle.net, http: //codepen.io*), поэтому нам не нужно создавать полную страницу со всеми плагинами и т. Д. –

bootstrap-wysihtml5 имеет имущество events; одним из этих событий является событие load.

Чтобы изменить текстовую нагрузку на все, что вам нужно сделать, это объявить load событие внутри функции textarea.wysihtml5 конфигурации;

См код ниже:

Код

textarea.wysihtml5({ 
    ...other properties...., 
    "events": { 
    "load": function() { 
     console.log("Loaded!"); 
     var $iframe = $(this.composer.iframe); 
     var $body = $(this.composer.element); 
     $body.css({ 
     'min-height': 0, 
     'line-height': '20px', 
     'overflow': 'hidden', 
     }); 
     var scrollHeightInit = $body[0].scrollHeight; 
     console.log("scrollHeightInit", scrollHeightInit); 
     var bodyHeightInit = $body.height(); 
     console.log("bodyHeightInit", bodyHeightInit); 
     var heightInit = Math.min(scrollHeightInit, bodyHeightInit); 
     $iframe.height(heightInit); 
    } 
    } 
});

Вот ответ Working Plunker

источник

2015-03-15 20:14:07 Manube

Manube не работает для меня. Я не знаю почему. Я получил консольный журнал от $body и $iframe. Но не удалось установить $body.css и $iframe.height(). Вместо этого я принял document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute(). Тогда это сработало. Однако UX для изменения размера для автоматического изменения размера iframe не очень хорош. Ответ Манубе мне очень помог, и это очень просто. Спасибо! Вот код, который я использовал:

$('#edit').wysihtml5({ 
    toolbar:{ "fa": true, "image": false, "html": false }, 
    locale: 'zh-TW', 
    name: 't-iframe', 
    events: { 
     load: function(){ 
      var $body = $(this.composer.element); 
      var $iframe = $(this.composer.iframe); 
      iframeh = Math.max($body[0].scrollHeight, $body.height()) + 100; 
      document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + iframeh +'px !important'); 
},change: function(){ 
      var $abody = $(this.composer.element); 
      var $aiframe = $(this.composer.iframe); 
      aiframeh = Math.max($abody[0].scrollHeight, $abody.height()) + 100; 
      document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + aiframeh +'px !important'); 
     } 
    } 
});

источник

2016-08-15 15:22:57

Как правильно авторизовать текстовое поле wysihtml5

ответ

Смежные вопросы