pedit-cms
v0.6.0
Published
Make website easy to edit using a chrome extension
Downloads
7
Maintainers
pranaygpReadme
pedit 
An easy way to make your websites editable!
pedit helps you make the text on your site easily editable with the help of a chrome extension. This could be helpful when you're making a website for a client who wants to keep their site updated, or if you just wanna easily edit the content on your own site without messing with html or pushing updates.
pedit works by dynamically loading all pedit enabled text from Firebase.
It's as easy as 1, 2, 3...
- You use the
data-peditattribute in your html code on elements that you/your client might want to edit in the future. - When viewing the site on chrome with the extension, you'll see the pedit logo in your address bar. Hit it!
- Your website magically becomes editable (after authenticating you, ofcourse). All changes made are saved (as a hidden bonus, changes are live and updates are pushed to everyone viewing your page in realtime)!
Installation
NPM installation
Run this command to fetch required scripts
$ npm install pedit-cmsThen, include the following code in your website
<script src="node_modules/pedit-cms/dist/pedit.js"></script>Bower installation
Run this command to fetch required scripts
$ bower install pedit-cmsThen, include the following code in your website
<script src="bower_components/pedit/dist/pedit.js"></script>Source install
pedit
Download the latest release and extract it into your site's source directory.
Then, include the following code in your website
<script src="pedit/dist/pedit.js"></script>Usage
After installing the required js scripts and ensuring that you included the js files for every page where you want to enable pedit,
Add the data-pedit attribute to any html element that you want to make editable. It's value should be an ID that you want to associate with that element.
data-pedit values should be unique accross all pages in the same domain, unless you want elements to share content
Using the same
data-peditvalue on multiple elements will give them the same text data. This can be useful for common elements across pages like footer description.
Example:
<body>
...
<h1 data-pedit="title">Title</h1>
<p data-pedit="paragraph">Lorem ipsum dolor sit amet</p>
<p data-pedit="paragraph-2"></p>
...
</body>Example 2 (Notice how using the same data-pedit value is useful here):
index.html
<body>
...
<footer>
<p data-pedit="copyright-line">pedit. All rights reserved</p>
</footer>
...
</body>about.html
<body>
...
<footer>
<p data-pedit="copyright-line">pedit. All rights reserved</p>
</footer>
...
</body>When the site's deployed, visit the url using chrome. With the chrome extension installed, you'll see the pedit logo in the action bar. Click it to start editing content.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Credits
Pranay Prakash - Personal Site, LinkedIn, Github