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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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