JavaScript Replacing Ace editor with summernote editor - 'Save' button

[SamTanna]

Greetings,
I'm working with an unsupported PHP/MySQL CMS that for some reason uses the Ace editor for adding/editing page content, and I'm trying to convert this over to use the summernote WYSIWYG editor.
I've successfully replaced the editor, but unable to get the "Save" button to work because the button code seems to be tied to the inner contents of the Ace editor.
Need some help sorting this out.

The original code -

Editor placement:

<div class="form-group">
    <div id="content-editor" style="min-height: 400px;">{{ $row['note'] }}</div>
    <div  style="display: none">
    <textarea name='note' style="min-height: 200px;" rows='25' id='note' class='form-control editors'>{{ $row['note'] }}</textarea>
    </div>
    </div>                           
</div>

Save Button:

<div class="form-group">
    <button type="button" id="saveBtn" class="btn btn-success " name="apply">  Save Change(s) </button>
    <a href="{{ url('cms/pages')}}" class="btn btn-info"> Close </a>
</div>
</div>
    <input type="hidden" name="action_task" value="save" />
</div>     
    {!! Form::close() !!}
</div>

Script:

<script type="text/javascript">
    $(document).ready(function() {
        var editor = ace.edit("content-editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/html");
        editor.resize()
        $('#saveBtn').click(function(){
            $('#note').val(editor.getValue());
            $('#pageForm').submit();
        })
    });
</script>

My revised code (so far) -

Editor placement:

<div class="form-group  " >
    <div id="content-editor" style="min-height: 400px;">
    <textarea name='summernote' style="min-height: 200px;" rows='25' id='summernote' class='form-control editors'  >{{ $row['note'] }}</textarea>
    </div>
</div>

Save Button (no changes):

<div class="form-group">
    <button type="button" id="saveBtn" class="btn btn-success " name="apply">  Save Change(s) </button>
    <a href="{{ url('cms/pages')}}" class="btn btn-info"> Close </a>
</div>
</div>
    <input type="hidden" name="action_task" value="save" />
</div>     
    {!! Form::close() !!}
</div>

Script:

<script>
    $(document).ready(function() {
        $('#summernote').summernote();
        
        var editor = summernote.editor("content-editor");
        $('#saveBtn').click(function(){
        $('#note').val(editor.getValue());
        $('#pageForm').submit();
     })
    });
</script>

As I said before, the summernote editor renders and works, but the Save button doesn't do anything.

Thanks

 

[Deleted member 2829]

Is your click function being called at all ? Does it help if you remove class="btn btn-success" from your button definition ?