Skip to content

Commit 842dd1d

Browse files
stefangrunertstefangrunert
committed
added "hello-world" example plugin
1 parent 2399f46 commit 842dd1d

File tree

6 files changed

+3300
-9
lines changed

6 files changed

+3300
-9
lines changed

‎examples/hello-world-plugin/helloworld.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
* global PluginAPI
3+
*/
4+
5+
function initPlugin() {
6+
// fetch article id after the article has been loaded
7+
fetchArticleIdDynamically();
8+
PluginAPI.on('afterSave', function() {
9+
afterArticleSave();
10+
});
11+
}
12+
13+
function fetchArticleIdDynamically() {
14+
PluginAPI.Article.getId(function(id) {
15+
console.log('stef:fetchedartid', id);
16+
$('#fetchArticleId-result').val(id);
17+
});
18+
}
19+
20+
// insert HTML code into the active text editor, at cursor position
21+
function insertHelloWorld() {
22+
console.log('stef:', PluginAPI);
23+
PluginAPI.Editor.insertString('<h3>Hello World</h3>');
24+
}
25+
26+
// fetch all content from all text editors
27+
function readContent() {
28+
PluginAPI.Editor.getHTMLBySelector('*', function (data) {
29+
$('#readContent-result').val(data);
30+
});
31+
}
32+
33+
// get article id
34+
function getId() {
35+
PluginAPI.Article.getId(function (id) {
36+
$('#getId-result').val(id);
37+
});
38+
}
39+
40+
// get article tags
41+
function getTags() {
42+
PluginAPI.Article.getTags(function (tags) {
43+
$('#getTags-result').val(tags.length > 0 ? JSON.stringify(tags) : 'article has no tags');
44+
});
45+
}
46+
47+
48+
// get article metadata
49+
function getCustomMeta() {
50+
PluginAPI.Article.getCustomMeta($('#getCustomMeta-input').val(), function (customMeta) {
51+
$('#getCustomMeta-result').val(JSON.stringify(customMeta));
52+
});
53+
}
54+
55+
56+
// set article metadata
57+
function setCustomMeta() {
58+
PluginAPI.Article.setCustomMeta($('#setCustomMeta-name-input').val(), $('#setCustomMeta-value-input').val(), function (data) {
59+
$('#setCustomMeta-result').val(JSON.stringify(data));
60+
});
61+
}
62+
63+
64+
65+
// ----------------------------------------
66+
67+
initPlugin();
68+
69+
70+

‎examples/hello-world-plugin/index.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link>
5+
<meta charset="UTF-8">
6+
<title>Hello World DrPublish Plugin</title>
7+
<link type="text/css" rel="stylesheet" href="styles.css"/>
8+
<script type="application/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
9+
<script type="application/javascript"
10+
src="node_modules/@aptoma/drpublish-plugin-api/dist/jquery.postmessage.js"></script>
11+
<script type="application/javascript" src="node_modules/@aptoma/drpublish-plugin-api/dist/bundle.js"></script>
12+
<script type="application/javascript" src="https://localhost/plugin-api/dist/bundle.js"></script>
13+
<script type="application/javascript" src="helloworld.js"></script>
14+
</head>
15+
<body>
16+
17+
18+
<h1>Demo plugin</h1>
19+
<h3>Fetch article id dynamically, each time a new article is loaded in the editor</h3>
20+
<input id="fetchArticleId-result" />
21+
<code>
22+
function initPlugin() {
23+
PluginAPI.setPluginName('helloworld');
24+
// fetch article id after the article has been loaded
25+
fetchArticleIdDynamically();
26+
}
27+
function fetchArticleIdDynamically() {
28+
PluginAPI.Article.getId(function(id) {
29+
console.log('stef:fetchedartid', id);
30+
$('#fetchArticleId-result').val(id);
31+
});
32+
}
33+
34+
</code>
35+
<hr/>
36+
37+
<h3>Inject HTML text string at cursor position</h3>
38+
<button onclick="insertHelloWorld()">say hello</button>
39+
<code>PluginAPI.Editor.insertString('&lt;h3&gt;Hello World&lt;/h3&gt;');</code>
40+
<hr/>
41+
42+
<h3>Read article content</h3>
43+
<button onclick="readContent()">do it</button>
44+
<textarea id="readContent-result"></textarea>
45+
<code>PluginAPI.Editor.getHTMLBySelector('*', function (data) {
46+
$('#result-preview-txt').val(data);
47+
});</code>
48+
<hr/>
49+
50+
<h3>Get article id</h3>
51+
<button onclick="getId()">do it</button>
52+
<input id="getId-result" />
53+
<code>
54+
PluginAPI.Article.getId(function (id) {
55+
$('#getId-result').val(id);
56+
});</code>
57+
<hr/>
58+
59+
60+
<h3>Get tags</h3>
61+
<button onclick="getTags()">do it</button>
62+
<textarea id="getTags-result" ></textarea>
63+
<code>
64+
PluginAPI.Article.getTags(function (tags) {
65+
$('#getTags-result').val(tags.length > 0 ? JSON.stringify(tags) : 'article has no tags');
66+
});</code>
67+
<hr/>
68+
69+
<h3>Get custom metadata (aka. "article property")</h3>
70+
<input placeholder="property name*" id="getCustomMeta-input" /><button onclick="getCustomMeta()">do it</button>
71+
<textarea id="getCustomMeta-result" ></textarea>
72+
<div class="hint">* If no value is provided, all available custom metadata are fetched</div>
73+
<code>
74+
PluginAPI.Article.getTags(function (tags) {
75+
$('#getTags-result').val(tags.length > 0 ? JSON.stringify(tags) : 'article has no tags');
76+
});</code>
77+
<hr/>
78+
79+
<h3>Set custom metadata (aka. "article property")</h3>
80+
<input placeholder="property name" id="setCustomMeta-name-input" />
81+
<input placeholder="property value" id="setCustomMeta-value-input" />
82+
<button onclick="setCustomMeta()">do it</button>
83+
<textarea id="setCustomMeta-result" ></textarea>
84+
85+
<code>
86+
PluginAPI.Article.getTags(function (tags) {
87+
$('#getTags-result').val(tags.length > 0 ? JSON.stringify(tags) : 'article has no tags');
88+
});</code>
89+
<hr/>
90+
91+
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)