Skip to content

Commit d53a7f6

Browse files
hackerwinshackerwins
committed
Refactor footer and index.html
- Refactor the footer.html file to improve readability and maintainability. - Update the index.html file to enhance the UI and fix formatting issues.
1 parent e6dae2c commit d53a7f6

File tree

7 files changed

+640
-495
lines changed

7 files changed

+640
-495
lines changed

‎00-getting-started.md

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ The fastest way to get Summernote is to download the precompiled and minified ve
1616
<a href="{{ site.repository }}/releases/download/v{{ site.version }}/summernote-{{ site.version }}-dist.zip" class="btn-important ">Download compiled</a>
1717

1818
### Download source code
19+
1920
Get the latest Summernote LESS and Javascript source code by downloading it directly from GitHub.
2021
[Download]({{ site.repository }}/archive/master.zip)
2122

2223
### Clone or Fork via Github
24+
2325
Visit us on GitHub to clone or fork the Summernote project.
2426
[project]({{ site.repository }})
2527

@@ -30,6 +32,7 @@ Visit us on GitHub to clone or fork the Summernote project.
3032
Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <code>&lt;!DOCTYPE html&gt;</code> in the beginning of all your projects.
3133

3234
{% highlight html %}
35+
3336
<!DOCTYPE html>
3437
<html lang="en">
3538
...
@@ -42,6 +45,7 @@ Summernote uses the Open Source libraries jQuery and Bootstrap, if you are using
4245
Include the Following code in the <code>head</code> area of your HTML page.
4346

4447
{% highlight html %}
48+
4549
<!-- include libraries(jQuery, bootstrap) -->
4650
<link href="{{ site.bootstrap_css }}" rel="stylesheet">
4751
<script src="{{ site.jquery_js }}"></script>
@@ -57,6 +61,7 @@ Don't forget to change the file's path if you downloaded summernote in a differe
5761
You can however, and a lot of developers do these days, is include the stylesheet's within the <code>head</code> are of your page, and include the Javascript at the bottom of your page, but before the closing <code>body</code> tag.
5862

5963
> ##### Fontawesome dependency
64+
>
6065
> After v0.8.0, You don't have to include fontawesome for displaying Summernote's icons. But You can still use fontawesome for your custom icons. For more details, please visit [custom buttons](/deep-dive/#custom-button) section.
6166
> After v0.8.18, You have the possibility to override summernote icons with your custom ones. For more details, please visit [custom icons](/deep-dive/#custom-icons) section.
6267
@@ -67,23 +72,26 @@ Summernote can be used with or without a <code>form</code>.
6772
To use without a <code>form</code>, we suggest using a <code>div</code> in the <code>body</code>; this element will then be used where you want the Summernote editor to be rendered within your page.
6873

6974
{% highlight html %}
75+
7076
<div id="summernote">Hello Summernote</div>
7177
{% endhighlight %}
7278

7379
To use within a <code>form</code>, is pretty much the same as above, but rather than a <code>div</code>, we recommend using a <code>textarea</code> element inside a <code>form</code>, which should include a name attribute so when the form is submitted you can use that name to process the editors data on your backend. Also, if using Summernote inside a <code>form</code> to set the attribute <code>method="post"</code> to allow larger sized editor content to parse to the backend, if you don't your data either may not parse, or will be truncated.
7480

7581
{% highlight html %}
82+
7683
<form method="post">
7784
<textarea id="summernote" name="editordata"></textarea>
7885
</form>
7986
{% endhighlight %}
8087

8188
### Run summernote
89+
8290
Run the script below when document is ready!
8391

8492
{% highlight javascript %}
8593
$(document).ready(function() {
86-
$('#summernote').summernote();
94+
$('#summernote').summernote();
8795
});
8896
{% endhighlight %}
8997

@@ -94,6 +102,7 @@ The <code>$(document).ready</code> function is particularly necessary if you inc
94102
You can also test running example. Save below code as `index.html` and open it with your browser.
95103

96104
{% highlight html %}
105+
97106
<!DOCTYPE html>
98107
<html lang="en">
99108
<head>
@@ -180,14 +189,15 @@ $('#summernote').summernote();
180189
Initialize Summernote with options
181190

182191
### Height and Focus
192+
183193
If you set focus option, cursor will focus editable area after initialize Summernote.
184194

185195
{% highlight javascript %}
186196
$('#summernote').summernote({
187-
height: 300, // set editor height
188-
minHeight: null, // set minimum height of editor
189-
maxHeight: null, // set maximum height of editor
190-
focus: true // set focus to editable area after initializing summernote
197+
height: 300, // set editor height
198+
minHeight: null, // set minimum height of editor
199+
maxHeight: null, // set maximum height of editor
200+
focus: true // set focus to editable area after initializing summernote
191201
});
192202
{% endhighlight %}
193203

@@ -241,6 +251,7 @@ $('#summernote').summernote('code', markupStr);
241251
for more detail api: [deep dive with api](/deep-dive/#api)
242252

243253
> ##### destroy and code
254+
>
244255
> After v0.7.0, direct jquery methods, `destroy` and `code` were removed for avoiding conflict with other jquery libraries. You can call this methods with summernote api.
245256
246257
{% include ad-doc.html %}
@@ -252,6 +263,7 @@ for more detail api: [deep dive with api](/deep-dive/#api)
252263
Include libraries with lang file. eg) <code>summernote-ko-KR.js</code>.
253264

254265
{% highlight html %}
266+
255267
<link href="{{ site.bootstrap_css }}" rel="stylesheet">
256268
<script src="{{ site.jquery_js }}"></script>
257269
<script src="{{ site.bootstrap_js }}"></script>
@@ -261,15 +273,16 @@ Include libraries with lang file. eg) <code>summernote-ko-KR.js</code>.
261273

262274
<!-- include summernote-ko-KR -->
263275
<script src="lang/summernote-ko-KR.js"></script>
276+
264277
{% endhighlight %}
265278

266279
Run the script with locale option.
267280

268281
{% highlight javascript %}
269282
$(document).ready(function() {
270-
$('#summernote').summernote({
271-
lang: 'ko-KR' // default: 'en-US'
272-
});
283+
$('#summernote').summernote({
284+
lang: 'ko-KR' // default: 'en-US'
285+
});
273286
});
274287
{% endhighlight %}
275288

@@ -283,45 +296,53 @@ $(document).ready(function() {
283296
});
284297
</script>
285298

286-
More Summernote languages: [languages]({{ site.repository }}/tree/master/lang)
299+
More Summernote languages: [languages]({{ site.repository }}/tree/main/src/lang)
287300

288301
## Integration
302+
289303
3rd parties available in django, rails, angular and so on.
290304

291305
### Django
306+
292307
Handy update for your django admin page.
293308

294-
* [django-summernote](https://github.com/summernote/django-summernote){:target="_blank"}
295-
* [summernote plugin for Django](https://pypi.python.org/pypi/django-summernote){:target="_blank"}
309+
- [django-summernote](https://github.com/summernote/django-summernote){:target="\_blank"}
310+
- [summernote plugin for Django](https://pypi.python.org/pypi/django-summernote){:target="\_blank"}
296311

297312
### Ruby On Rails
313+
298314
This gem was built to gemify the assets used in Summernote.
299315

300-
* [summernote-rails](https://github.com/summernote/summernote-rails){:target="_blank"}
301-
* [how to use summernote on rails](https://www.youtube.com/watch?v=A3vDRdfEyKs&feature=youtu.be&t=75){:target="_blank"}
316+
- [summernote-rails](https://github.com/summernote/summernote-rails){:target="\_blank"}
317+
- [how to use summernote on rails](https://www.youtube.com/watch?v=A3vDRdfEyKs&feature=youtu.be&t=75){:target="\_blank"}
302318

303319
### AngularJS
320+
304321
AngularJS directive to Summernote.
305322

306-
* [angular-summernote](https://github.com/summernote/angular-summernote)
323+
- [angular-summernote](https://github.com/summernote/angular-summernote)
307324

308325
### Apache Wicket
326+
309327
Summernote widget for Wicket Bootstrap.
310328

311-
* [demo](http://wb-mgrigorov.rhcloud.com/summernote){:target="_blank"}
312-
* [source code](https://github.com/l0rdn1kk0n/wicket-bootstrap/tree/4f97ca783f7279ca43f9e2ee790703161f59fa40/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/editor){:target="_blank"}
329+
- [demo](http://wb-mgrigorov.rhcloud.com/summernote){:target="\_blank"}
330+
- [source code](https://github.com/l0rdn1kk0n/wicket-bootstrap/tree/4f97ca783f7279ca43f9e2ee790703161f59fa40/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/editor){:target="\_blank"}
313331

314332
### Webpack
333+
315334
Example about using summernote with webpack.
316335

317-
* [summernote-webpack-example](https://github.com/hackerwins/summernote-webpack-example){:target="_blank"}
336+
- [summernote-webpack-example](https://github.com/hackerwins/summernote-webpack-example){:target="\_blank"}
318337

319338
### Meteor
339+
320340
Example about using summernote with meteor.
321341

322-
* [summernote-meteor-example](https://github.com/hackerwins/summernote-meteor-example){:target="_blank"}
342+
- [summernote-meteor-example](https://github.com/hackerwins/summernote-meteor-example){:target="\_blank"}
323343

324344
### PHP
345+
325346
Example for using Summernote with elFinder which uses a PHP Backend.
326347

327-
* [summernote-elfinder-example](https://github.com/Studio-42/elFinder/wiki/Integration-with-Multiple-Summernote-%28fixed-functions%29){:target="_blank"}
348+
- [summernote-elfinder-example](https://github.com/Studio-42/elFinder/wiki/Integration-with-Multiple-Summernote-%28fixed-functions%29){:target="\_blank"}

0 commit comments

Comments
 (0)