如何通过summernote字段编辑span或div中的文本答案

【问题标题】：How to edit text in a span or div through summernote field如何通过summernote字段编辑span或div中的文本
【发布时间】：2019-02-13 01:12:28
【问题描述】：

我有两个按钮，一个是编辑和保存。我有一个 div 或 span，所以点击编辑按钮我想将 span 或 div 转换为 Summernote 编辑器，点击 Save 会将数据保存到同一个 div 并删除 summernote 编辑器。

我没有从summernote网站上找到任何有用的信息，请建议正确的方法。

【问题讨论】：

标签： javascript html css summernote

【解决方案1】：

Summernote 确实提供了一个明确的示例来满足您的需求，您可以找到它here。

var edit = function() {
  $('.click2edit').summernote({focus: true});
};

var save = function() {
  var markup = $('.click2edit').summernote('code');
  $('.click2edit').summernote('destroy');
};

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->

<link href="https://summernote.org/vendors/summernote/dist/summernote.css" rel="stylesheet"> 
<script src="https://summernote.org/vendors/summernote/dist/summernote.js"></script>

<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Show Edit Mode</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Hide Edit Mode</button>
<div class="click2edit">click2edit</div>

【讨论】：

不，你不需要它，我已经从 sn-p 中删除了 codemirror 引用

【解决方案2】：

当您点击编辑按钮时，您可以隐藏您的 div/span。使用 jQuery 代码，它可以是

<div id="summernote">/div>
<button id="edit-button">Edit</button>
<div id="editor"></div>
<button id="save-button">Save</button>

//JS
$('#edit-button').click(function() {
    $('#summernote').hide();
    $('#editor').show();
});
$('#save-button').click(function() {
    $('#summernote').show();
    $('#editor').hide();
});

【讨论】：