內嵌文本編輯器不適用於 textarea

Question

我使用插件就地編輯器（ https://github.com/wbotelhos/inplace ）對網站的個人資料頁面進行內聯編輯。 對於個人資料頁面中的某些文本，我需要使用<textarea>而不是<input type="text">來保存詳細信息。 該插件確實可以選擇使用<textarea>而不是<input>標簽，但由於某種原因它不起作用。 插件也沒有太多文檔。 任何幫助將非常感激。

<div class="inplace-textarea">Enter your introduction</div>

jQuery('.inplace-textarea').inplace({
    fieldType: 'textarea',
    typeful: [
        'color',
        'date',
        'datetime',
        'datetime-local',
        'email',
        'hidden',
        'month',
        'number',
        'password',
        'range',
        'search',
        'tel',
        'text',
        'textarea',
        'time',
        'url',
        'week'
       ]
});

/*!
* Inplace - An inplace editor
*
* The MIT License
*
* @author:  Washington Botelho
* @doc:     wbotelhos.com/inplace
* @version: 0.1.0
*
*/

;
(function($) {
'use strict';

$.inplace = {
buttonOrder:   ['cancel', 'save'],
cancel:        true,
cancelClass:   'inplace__cancel',
cancelValue:   'Cancel',
checkable:     ['checkbox', 'radio'],
fieldClass:    'inplace__field',
fieldName:     undefined,
fieldTemplate: '{name}',
fieldType:     'text',
method:        'PATCH',
save:          true,
saveClass:     'inplace__save',
saveValue:     'Save',
selectable:    ['select-one', 'select-multiple'],

typeful: [
'color',
'date',
'datetime',
'datetime-local',
'email',
'hidden',
'month',
'number',
'password',
'range',
'search',
'tel',
'text',
'textarea',
'time',
'url',
'week'
]
}

$.fn.inplace = function(options) {
return this.each(function() {
return (new $.inplace.Inplace(this, options))._create();
});
}

$.inplace.Inplace = (function() {
var Inplace = function(element, options) {
this.el      = $(element);
this.element = element;

this.options = $.extend({}, $.inplace, options, this.el.data());
}

Inplace.prototype = {
_activate: function() {
var field = this._field();

this
.el
.off('click.inplace.el')
.addClass('inplace--active')
.html(field)
.trigger('inplace:activate', this.element);

for (var i = 0; i < this.options.buttonOrder.length; i++) {
var value = this.options.buttonOrder[i];

if (this.options[value]) {
this._build(value, 'button').appendTo(this.el);
}
}

var actived = $('.inplace--active').not(this.el);

for (var i = 0; i < actived.length; i++) {
actived.data('inplace')._deactivate();
}

field.trigger('focus');
},

_bindCancel: function() {
this.el.on('click.inplace.cancel', '[data-inplace-cancel]', 
this._deactivate.bind(this));
},

_bindClick: function() {
this.el.on('click.inplace.el', this._activate.bind(this));
},

_bindField: function() {
var typeful = [];

for (var i = 0; i < $.inplace.typeful.length; i++) {
typeful.push('[type="' + $.inplace.typeful[i] + '"]');
}

var fields = typeful.join(',');

this._bindKey('keypress.inplace.field', 13, fields, 
this._request.bind(this));
this._bindKey('keyup.inplace.field', 27, fields, 
this._deactivate.bind(this));
},

_bindKey: function(event, keycode, fields, callback) {
this.el.on(event, fields, function(evt) {
if ((evt.which || evt.keyCode) === keycode) {
callback();
}
});
},

_bindSave: function() {
this.el.on('click.inplace.save', '[data-inplace-save]', 
this._request.bind(this));
},

_build: function(kind, type) {
var options = {
'class': this.options[kind + 'Class'],
type:    type,
value:   this.options[kind + 'Value']
};


if (kind === 'field') {
var attributes = this.el.data('attributes');

if (attributes) {
options = $.extend({}, options, attributes);
}
}

options['data-inplace-' + kind] = '';

return $('<input />', options);
},

_create: function() {
this._bindClick();
this._bindField();
this._bindSave();
this._bindCancel();

this.el.data('inplace', this);

return this;
},

_deactivate: function() {
this._bindClick();

this
.el
.removeClass('inplace--active')
.html(this.element.getAttribute('data-field-value'))
.trigger('inplace:deactivate', this.element);
},

_done: function(json) {
this._deactivate();

this.options.fieldValue = json[this.options.fieldName];

this.element.setAttribute('data-field-value', this.options.fieldValue);
this.el.trigger('inplace:done', json);
},

_field: function() {
return this._build('field', this.options.fieldType);
},

_request: function() {
$.ajax(this._requestOptions()).done(this._done.bind(this));
},

_requestOptions: function() {
var data = {};
var name = this.options.fieldTemplate.replace('{name}',     
this.options.fieldName);

data[name] = this.el.find('[data-inplace-field]').val();

return { data: data, method: this.options.method, url: this.options.url };
}
};

return Inplace;
})();
})(jQuery);

Answer 1

 $(function() { $('#editable-notes').inlineEdit(); }); $.fn.inlineEdit = function() { var $wrapper = $(this), $text = $wrapper.find('.editable-text'), $input = $wrapper.find('.editable-input'); $input.val($text.text()); var setInputHeight = function() { $input.height(0); $input.height($input[0].scrollHeight); }; $text.on('click', function() { $wrapper.addClass('edit-state'); $input.val($text.text()); $input.focus(); setInputHeight(); $input[0].selectionStart = $input[0].selectionEnd = $input[0].value.length; }); $input.on('keyup', function() { setInputHeight(); }); $input.on('blur', function() { $wrapper.removeClass('edit-state'); $text.html($input.val()); }); };

 body { font-family: Arial; font-size: 14px; } .editable-text, .editable-input { font-family: Arial; font-size: 14px; } .editable-text { padding: 0.75em; } .editable-input { padding: 0.4em; } .editable-text:hover { background: #fffbe1; cursor: text; } .editable-input { display: none; } .editable-wrapper.edit-state .editable-text { display: none; } .editable-wrapper.edit-state .editable-input { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="editable-notes" class="editable-wrapper"> <pre class="editable-text"> Please edit me</pre> <textarea class="editable-input"></textarea> </div>