Simple example of using Leaflet.Editable with Mapbox.js

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css">
<script src="https://rawgit.com/Leaflet/Leaflet.Editable/leaflet0.7/src/Leaflet.Editable.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.css">
<script src="http://dwilhelm89.github.io/Leaflet.StyleEditor/javascript/Leaflet.StyleEditor.min.js"></script>
<link rel="stylesheet" href="http://dwilhelm89.github.io/Leaflet.StyleEditor/css/Leaflet.StyleEditor.min.css">
<div id="map"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}

JavaScript

var map = L.map('map').setView([20, -40], 3);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    //Initialize the StyleEditor
    var styleEditor = L.control.styleEditor({
        position: "topleft"
    });
    map.addControl(styleEditor);




    //Leaflet.draw

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        draw: {
            position: 'topleft',
            polygon: {
                title: 'Draw a sexy polygon!',
                allowIntersection: false,
                drawError: {
                    color: '#b00b00',
                    timeout: 1000
                },
                shapeOptions: {
                    color: '#bada55'
                },
                showArea: true
            },
            polyline: {
                metric: false
            },
            circle: {
                shapeOptions: {
                    color: '#662d91'
                }
            }
        },
        edit: {
            featureGroup: drawnItems
        }
    });
    map.addControl(drawControl);

    map.on('draw:created', function(e) {
        var type = e.layerType,
            layer = e.layer;

        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }

        drawnItems.addLayer(layer);
    });