0
私はこれをやろうとしています。外部要素をサマータイムエディタにカスタムスタイリングでドラッグ＆ドロップする
私が持っているどのような
- 私は
- 編集可能summernoteインスタンスを持つ別のdiv（特定#IDで）リソースのリストとページ上のdivを持って
何I作成したい
- リソースをリストからSummernoteエディタにドラッグできます（jquery UIを使用してそれはきわめてかわいいですか？）
- リソースをエディタに入れたら、自動的に特定の/カスタムのスタイルでスタイルされます（例：
- 要素がエディタに入ると、その要素からテキストを編集することはできません（リソースのタイトルを変更することはできません）。代わりに、その要素のテキストを編集することはできません。エディタ内の他の場所に要素全体をドラッグします（イメージの場合と同じように）。
ここではすべての基本的なコードを必要と基本的なフィドルだ：私はどのpossibleIが本当に
ベスト、これで任意の助けをいただければ幸いGoogleで検索しようとした
// when edit
$('.edit').on('click', function() {
var target = $(this).attr('target');
$(this).parent().find('.save').show();
$(this).parent().find('.edit').hide();
$('#module_descr').summernote({
height: 300,
toolbar: [
['img', ['picture']],
['style', ['style', 'addclass', 'clear']],
['fontstyle', ['bold', 'italic', 'ul', 'ol', 'link', 'paragraph']],
['fontstyleextra', ['strikethrough', 'underline', 'hr', 'color', 'superscript', 'subscript']]
]
});
});
// when saving title or description
$('.save').on('click', function() {
$('#module_descr').summernote('destroy');
$(this).parent().find('.save').hide();
$(this).parent().find('.edit').show();
});.save {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Ressources</div>
<div class="panel-body" style="max-height:200px;overflow:auto;">
<div class="list-group modules" id="ressourcesList">
<a href="#" class="list-group-item" id="1"> Resource 1
\t \t \t \t \t </a>
<a href="#" class="list-group-item" id="2"> Resource 2
\t \t \t \t \t </a>
<a href="#" class="list-group-item" id="3"> Another Resource
\t \t \t \t \t </a>
</div>
</div>
</div>
<div class="row" id="module_info">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-md-9 title_descr"></div>
<div class="col-md-3 text-right">
<button type="button" class="btn btn-info btn-sm edit" target="module_descr">Edit</button>
<button type="button" class="btn btn-success btn-sm save" target="module_descr" style="display:none">Save</button>
</div>
</div>
</div>
<div class="panel-body" id="module_descr" module_id="">
</div>
</div>
</div>は、よろしくおねがいします。
Xogno