Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
himynameistimli committed Jul 18, 2018
0 parents commit c40d12a
Show file tree
Hide file tree
Showing 26 changed files with 8,856 additions and 0 deletions.
1 change: 1 addition & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{ "presets": ["env"] }
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
*.log

.DS_Store
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
npm-debug.log
2 changes: 2 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Contributing

14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Additional Quill Toolbar buttons for custom formatting

## Installation

Install via npm:
```bash
npm install quill-contentco
```

Install via bower
```bash
bower install quill-contentco
```

23 changes: 23 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "quill-contentco",
"version": "1.0.7",
"description": "Quill extension to embed tweets",
"main": "webpack.config.js",
"authors": [
"contentco"
],
"license": "MIT",
"keywords": [
"content",
"quill",
"editor"
],
"homepage": "https://github.com/contentco/quill-contentco",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
Empty file added demo/.gitkeep
Empty file.
103 changes: 103 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../dist/quill-contentco.css">
</head>
<body>
<button id="renderPage" style="padding:10px; border-radius: 5px; background-color: #0366d6; color: white;">Update Rendered</button>
<button id="loadTwitter" style="padding:10px; border-radius: 5px; background-color: #0366d6; color: white;">Render Twwets</button>
<h2>Rendered</h2>
<div style="margin:20px 0px; padding: 20px; border: 1px solid lightgray" id="rendered_html"></div>

<div class="container" style="position:relative;">
<h2>Editor</h2>
<div id="quill-editor" style="max-height: 300px;"></div>
</div>

<div class="container">
<h2>Debug</h2>
<div style="margin:20px 0px; display:flex;">
<textarea id="output_delta"
style="width:100%; min-height:300px; border: 1px solid lightgray; flex-basis:50%;"></textarea>

<textarea id="output_html"
style="width:100%; min-height:300px; border: 1px solid lightgray; flex-basis:50%;"></textarea>
</div>

<!-- <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/itshummm?ref_src=twsrc%5Etfw">@itshummm</a> Sure, try the coupon code &quot;hacking20&quot; for %20 off :)</p>&mdash; UI8 (@ui8net) <a href="https://twitter.com/ui8net/status/511978514942529537?ref_src=twsrc%5Etfw">September 16, 2014</a></blockquote> -->


</div>

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="../node_modules/quill/dist/quill.js"></script>
<script src="../dist/quill-contentco.js"></script>
<script type="text/javascript">
var btn = document.getElementById('loadTwitter');
btn.addEventListener('click', function(e) {
renderTweets();
// twttr.widgets.load().then(function(res) {
// console.log('res', res);
// });
// console.log('clicked');
});
var btn = document.getElementById('renderPage');
btn.addEventListener('click', function(e) {
render();
});
var toolbarOptions = {
container: [
// [{'textpicker': ['headline', 'subheadline', 'subsubheadline', false, 'caption']}],
['headline', 'subheadline', 'subsubheadline'],
['bold', 'italic'],
['pullquote', 'blockquote'],
['image', 'video', 'caption', 'tweet']
],
}
var quill = new Quill('#quill-editor', {
modules: {
toolbar: toolbarOptions,
},
placeholder: 'Compose an epic...',
theme: 'snow',
});

var content = 'This is base text';
// quill.pasteHTML(content);

var contents = quill.clipboard.convert(content);
// console.log('contents', contents);
quill.setContents(contents);
quill.history.clear();

// console.log('content', content);

// setInterval( function() { document.getElementById("output_delta").value=JSON.stringify(quill.editor.getDelta()) }, 500);
// setInterval( function() { document.getElementById("output_html").value=quill.root.innerHTML }, 500);
// setInterval( function() { document.getElementById("rendered_html").innerHTML = quill.root.innerHTML }, 500);
function render() {
document.getElementById("rendered_html").innerHTML = quill.root.innerHTML;
document.getElementById("output_html").value=quill.root.innerHTML
document.getElementById("output_delta").value=JSON.stringify(quill.editor.getDelta())
}

function renderTweets() {
var tweets = document.querySelectorAll("div.ql-tweet");

for (var i = 0; i <tweets.length; i++) {
while (tweets[i].firstChild) {
tweets[i].removeChild(tweets[i].firstChild);
}
twttr.widgets.createTweet(tweets[i].dataset.id, tweets[i]);
}
}

// setInterval( function() {
// renderTweets();
// }, 500)
renderTweets();
</script>

</body>
</html>
Empty file added dist/.gitkeep
Empty file.
1 change: 1 addition & 0 deletions dist/quill-contentco.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/quill-contentco.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/quill-tweet.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.ql-tweet:hover path{fill:#0366d6}iframe.ql-tweet{position:absolute;top:0;left:0;width:100%;height:100%}
Loading

0 comments on commit c40d12a

Please sign in to comment.