使用按钮隐藏/显示nicEdit

Question

我有以下nicEdit:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <script type="text/javascript" src="../nicEdit.js"></script>
    <script type="text/javascript">
        bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
    </script>
    <h4 style="text-align:center;">Generate Job Overview</h4>
    <p>
        Within this overview, please make note of all necessary information, conditions, expectations and etc to
        better assist Freelancer review. 
    </p>
    <textarea id="createJob" name="area3" class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="width: 100%; height: 50%;">
    HTML <b>content</b> <i>default</i> in textarea
    </textarea>
    <button type="submit" class="btn btn-primary" onclick="editTextEditor()" style="background-color:#006dcc;">Edit</button>
    <button type="submit" class="btn btn-primary" onclick="submitTextEditor()" style="background-color:#006dcc;">Submit</button>
</div>

安装使用:http://nicedit.com/

我正在尝试使用这样的函数:

function submitTextEditor() {
document.getElementById(".nicEdit-panelContain").style.color = "red";
 $(".nicEdit-panelContain").css("display", "none");
}   
function editTextEditor() {
document.getElementById(".nicEdit-panelContain").style.color = "red";
 $(".nicEdit-panelContain").css("display", "block");
}   

不仅试图隐藏面板编辑，而且使文本只读。不知道该怎么做。上面的函数我也尝试使用文本区域"createJob"的id，但没有运气。有什么建议吗?

我尝试参考如何设置nicedit不可编辑，但没有为任何例子工作

Answer 1

我告诉你，我是怎么做到的。

如果我要编辑文本，我使用dblclick，但你可以使用任何其他操作。objid是我设置的一个特殊属性，您可以使用div ID或名称。

我niceditconfig

。

NicEditconfig:
{
   onClose: function(content, id, instance){
        $('div.nicEdit-pane').hide();
        instance.ne.removeInstance(id);
        instance.ne.removePanel();
        $('#'+id).html($('#'+id).data('oldcontent'));
        $(id).attr('contentEditable','false');
        var container = 'wiki_content_edit-'+$('input#contentid').val();
        $('#'+container).hide();
        $('#wiki_content_viewbox').show().click();
   },
   onSave : function(content, id, instance) {
        $('div.nicEdit-pane').hide();
        wiki_save_content(content);
        var container = 'wiki_content_edit-'+$('input#contentid').val();
        $('#'+container).hide();
        $('#wiki_content_viewbox').show().click();
        instance.ne.removeInstance(id);
        instance.ne.removePanel();
        $(id).attr('contentEditable','false');
   },
   iconsPath : '/img/nicEditorIcons.gif',
   buttonList : ['close','save','fontFormat','bold','italic','underline','ol','ul','link','unlink','image','fileupload','indent','outdent','xhtml','code']
},
$(document).on('dblclick','#wiki_content_view',function(){
       mywiki.editContent('wiki_content_edit_body',$(this).attr('objid')); 
});

editcontent函数。我使用不同的div来查看和编辑。

editContent: function(elm,objid)
{
    var oc = $('#'+elm).html();
    var container = 'wiki_content_edit-'+objid;
    $('#'+elm).data('oldcontent',oc); // backup the old content
    $('#'+elm).attr('contentEditable','true'); // make div editable
    $('div[id^=check]').buttonset();
    $('#wiki_content_viewbox').hide();
    $('#'+container).show();
    createUploader('file-uploader');
    var wikiNicEditor = new nicEditor(mywiki.NicEditconfig);
    wikiNicEditor.panelInstance(elm);
    $('#'+elm).focus();
    var sticky_panelContain_offset_top = $('div.nicEdit-panelContain').offset().top;
    var sticky_panelContainer = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_panelContain_offset_top) { 
        $('div.nicEdit-panelContain').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('div.nicEdit-panelContain').css({ 'position': 'relative' }); 
        }
    };
    sticky_panelContainer();
    $(window).scroll(function() {
     sticky_panelContainer();
     });
},

我使用sticky_panelContainer有一个漂亮的面板在页面的顶部，如果我有一个很长的文本，必须滚动。

这里是保存和关闭函数。我使用nicedit按钮和函数调用。

saveEditContent: function(elm)
{
  $('#'+elm).focus();
  var wikiNicEditor = nicEditors.findNicEditor(elm);
  var inst = wikiNicEditor.instanceById(elm);
  var bsave = inst.ne.nicPanel.findButton('save');
  bsave.mouseClick();
},
closeEditContent: function(elm)
{
  $('#'+elm).focus();
  var wikiNicEditor = nicEditors.findNicEditor(elm);
  var inst = wikiNicEditor.instanceById(elm);
  var bclose = inst.ne.nicPanel.findButton('close');
  bclose.mouseClick();
  $(window).off('scroll');
},

我希望它能引导你走上正确的道路。

Answer 2

我希望您需要将niceEdit设置为只读。放置一个div并添加样式pointer-events: none。在按钮上点击，您可以启用禁用指针事件。

在页面加载你需要添加这个:

 $('.nicEdit-main')[0].removeAttribute('contentEditable');
   <div style="pointer-events:none">                     
     <nice edit text area>
    </div>