jollyKuma
5/6/2017 - 8:50 AM

Summernote Implementation

Summernote Implementation

summernote
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <label class="radio-inline"><input type="radio" id="install" value="install" name="optradio" checked>Install</label>
                <label class="radio-inline"><input type="radio" id="do_not_install" value="do_not_install" name="optradio">Do Not Install</label>   
                <label class="radio-inline"><input type="radio" id="external_link" value="external_link" name="optradio">External link</label>        
            </div>
        </div>
        <div class="row">
           <div class="form-inline">
                <select name="external_link" id="select_link" class="form-control" disabled>
                    <option value="none" disabled selected id="selectedOpt" ></option>
                    <option value="http" id="http" >http://</option>
                    <option value="https">https://</option>
                </select>
                <input type="text" name="address" id="address" class="form-control" disabled>
            </div> 
        </div>
        
        <div class="row">
            <textarea name="content" id="summernote" cols="30" rows="10"></textarea>                       
        </div>

        <button id="save">Save</button>
    </div>
  <script>
    $(document).ready(function() {

        $('#summernote').summernote({
            height: 350, 
            airMode:false
        });

        function handleClick(e) {
            e.preventDefault();
            console.log('@@@ e', e.target.id);

            console.log('code ', $('#summernote').summernote('code'));
        }

        $('#save').on('click', handleClick);

        $('input:radio[name="optradio"]').on('change', function(e){
            e.preventDefault();
            if(e.target.id == "external_link"){    
                console.log('context', $(this))
                $('#select_link').val('https')
                $('#select_link').removeAttr('disabled');
                $('#address').removeAttr('disabled'); 
            } else {
                $('#select_link').val('none')
                $('#select_link').attr('disabled', true);
                $('#address').attr('disabled', true);
            }
        });
    });
  </script>
</body>
</html>