からのリダクター WYSIWYG: https://github.com/dybskiy/redactor-js
JQuery バージョン: jquery-1.10.1.min.js (デモにバンドルされている 1.9.0 も試しました)
非常に単純で、編集アイコンがコンテンツの右上に表示され、クリックするとコンテンツが WYSIWYG エディターに変更され、アイコンが X に変更されてキャンセルされます
オンクリック X、エディターを破棄、WYSIWYG エディターを元のテキストに戻す
このページからのヒントに従ってください: http://imperavi.com/redactor/examples/click-to-edit/ 違いは、2 つの関数が必要ないことです。クラスに応じて、1 つの関数に結合しています。 editContainer が持っている場合、どの if-else が実行されるかによって異なります
問題: .redactor('destroy'); 動作しません
<style>
#editContainer {
position: absolute;
right: 5px;
top: 5px;
width: 16px;
height: 16px;
}
#editContainer.edit {
background: url("../img/icon-edit-16.png") no-repeat 0 0;
z-index: 999;
cursor: pointer;
}
#editContainer.cancel {
background: url("../img/icon-error.png") no-repeat 0 0;
z-index: 999;
cursor: pointer;
}
</style>
<div id='headerRightContent'>
xxx
</div>
<div id='editContainer' class='edit' onclick=cmsEdit();></div>
<script type='text/javascript'>
function cmsEdit() {
if ( $('#editContainer').hasClass('edit') ) {
$('#headerRightContent').redactor({ focus: true });
$('#editContainer').removeClass('edit').addClass('cancel');
}else if ( $('#editContainer').hasClass('cancel') ) {
var html = $('#headerRightContent').redactor('get');
$('#headerRightContent').redactor('destroy');
$('#editContainer').removeClass('cancel').addClass('edit');
}
}
</script>