-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathselect-text-wrap-html-with-custom-style-and-classname.html
105 lines (84 loc) · 4.44 KB
/
select-text-wrap-html-with-custom-style-and-classname.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easy editor - Select a text and wrap it HTML tag with custom style and class</title>
<link rel="stylesheet" href="style.css">
<!-- easy editor stylesheet -->
<link rel="stylesheet" href="src/easyeditor.css">
</head>
<body>
<div class="container">
<h1>Easy editor <span>Select a text and wrap it HTML tag with custom style and class</span></h1>
<!-- easy editor wil apply in this div -->
<div id="editor" placeholder="Type here ... ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, officiis, ipsam. Nostrum neque id quaerat, iste. Nostrum incidunt hic minus impedit voluptatibus explicabo, quo modi fugit doloribus odit provident labore. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime, recusandae, esse eum aliquid natus, repellat ea, temporibus eaque voluptates tempora beatae. Alias laboriosam, vero necessitatibus? Fugiat modi, voluptatum at?</div>
<p class="p">You can change the entire look and feel, can able to add button / event / can do anything with it. Read <a href="./documentation.html">documentation here</a> or <a href="./examples.html">more example here</a></p>
<p class="p">HTML:</p>
<pre class="code"><div id="editor" placeholder="Type here ... "></div></pre>
<p class="p">CSS:</p>
<pre class="code"><link rel="stylesheet" href="path_to/easyeditor.css"></pre>
<p class="p">JS:</p>
<pre class="code"><script src="path_to/jquery.min.js"></script>
<script src="path_to/jquery.easyeditor.js"></script>
<script>
EasyEditor.prototype.aside = function(){
var _this = this;
var settings = {
buttonIdentifier: 'aside',
buttonHtml: 'Wrap selected text with &lt;aside&gt; tag with a class and custom style',
clickHandler: function(){
// keepHtml true, means it will not strip HTML tag in selected text
_this.wrapSelectionWithNodeName({ nodeName: 'aside', style: 'color: #ff0000', class: 'your-custom-class', keepHtml: true });
}
};
_this.injectButton(settings);
};
jQuery(document).ready(function($) {
new EasyEditor('#editor', {
buttons: ['bold', 'italic', 'link', 'aside']
});
});
</script></pre>
<footer>
EasyEditor is completely free and open source for educational and commercial purpose. Do whatever you want, i don't give a F!
<br>Github URL - <a href="https://github.com/im4aLL/easyeditor" target="_blank">https://github.com/im4aLL/easyeditor</a> Made with ❤ by <a href="http://habibhadi.com" target="_blank">Habib Hadi</a>
<br>Hadi: I'm not that good in JS, please improve it as the way you want. As it requires hard work & time to accomplish that so i expect a thanks at least :)
</footer>
<!-- comment starts -->
<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
href: window.location,
width: '960',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>
<!-- comment starts -->
</div>
<!-- dependancy js -->
<script src="vendor/jquery.min.js"></script>
<!-- easy editor core js -->
<script src="src/jquery.easyeditor.js"></script>
<script>
EasyEditor.prototype.aside = function(){
var _this = this;
var settings = {
buttonIdentifier: 'aside',
buttonHtml: 'Wrap selected text with <aside> tag with a class and custom style',
clickHandler: function(){
// keepHtml: true means it will not strip HTML tag in selected text
_this.wrapSelectionWithNodeName({ nodeName: 'aside', style: 'color: #ff0000', class: 'your-custom-class', keepHtml: true });
}
};
_this.injectButton(settings);
};
jQuery(document).ready(function($) {
new EasyEditor('#editor', {
buttons: ['bold', 'italic', 'link', 'aside']
});
});
</script>
</body>
</html>