2016-11-17 7 views
0

У меня есть следующий nicEdit:Скрыть/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"); 
} 

попытаться не только скрыть редактирование панели, но и сделать текст только для чтения. Не знаете, как это сделать. Вышеупомянутые функции также пытались использовать идентификатор textarea «createJob», но не повезло. Какие-либо предложения?

я попытался ссылки how to set nicedit uneditable но не работал ни примеров ни

ответ

0

я покажу вам, как я это сделал.

Если я отредактирую текст, я использую dblclick, но вы можете использовать любое другое действие. Objid - это особый атрибут, который я установил, вы можете использовать идентификатор или имя div.

Мой 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 панель в верхней части страницы, если у меня есть длинный текст и прокрутить.

И вот функции сохранения и закрытия. Я использую кнопки 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'); 
}, 

Надеюсь, это принесет вам правильный путь.

Смежные вопросы