Get started with jinplace CDN

MIT licensed

Jinplace: library for in-place HTML editing, keeping users on the page.

Tags:
  • jquery-plugin
  • inline
  • edit
  • form

Stable version

Copied!

How to start using jinplace CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jinplace CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.cdnhub.io/jinplace/1.2.1/jinplace.min.css">
    <style>
        .jp-editable { border: 1px solid #ccc; padding: 5px; width: 150px;}
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">Jinplace Example</h1>
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <textarea id="editableTextarea" class="form-control jp-editable" rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum odio, quis mollis sapien nibh et justo. Nullam id felis et ipsum bibendum ultrices.</textarea>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.cdnhub.io/jinplace/1.2.1/jinplace.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.jp-editable').jinplace();
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions