0

I have the following 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>

installed using: http://nicedit.com/

I am trying to use a function like so:

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");
}

To attempt to not only hide the panel editing but also make the text readonly. Not sure how to go about this. The functions above I also tried using the id of textarea "createJob" but no luck. Any suggestions?

I tried referencing how to set nicedit uneditable but didn't work for any examples either

Community
  • 1
  • 1
narue1992
  • 1,143
  • 1
  • 14
  • 40

2 Answers2

1

I show you, how I did it.

If I will edit a text, I use dblclick but you can use any other action. The objid is a special attribut that I set, you can use the div ID or name.

My 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')); 
});

The editcontent function. I use different div's for viewing and editing.

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();
     });
},

I use sticky_panelContainer to have nicedit panel at the top of the page if I have a long text and must scroll.

And here the save and close functions. I use the nicedit buttons and function calls.

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');
},

I hope it will bring you on the right way.

nevtag
  • 314
  • 1
  • 6
0

I hope you need to make niceEdit to be readonly. Put a div and add a style pointer-events: none. on button click, you can enable disable pointer events.

in Page load you need to add this: 

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

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

    </div>
Mohan
  • 43
  • 5