使用按钮隐藏/显示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");
}   

尝试不仅隐藏面板编辑，而且将文本设为只读。不知道该怎么做。在上面的函数中，我也尝试过使用文本区域id "createJob“，但是没有成功。有什么建议吗？

我尝试引用how to set nicedit uneditable，但也不适用于任何示例

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面板。

这里有save和close函数。我使用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并添加一个样式指针-events: none。单击按钮时，您可以启用禁用指针事件。

在页面加载中，您需要添加以下内容：

 $('.nicEdit-main')[0].removeAttribute('contentEditable');

   <div style="pointer-events:none">                     
     <nice edit text area>

    </div>