Summernote快速入门

快速入门

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于 jQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。

（1）Requires HTML5 doctype（需要HTML5文档类型）

Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <!DOCTYPE html> in the beginning of all your projects.

<!DOCTYPE html>

...

</html>

（2）Include js/css

Summernote uses the Open Source libraries jQuery and Bootstrap, if you are using the Boostrap 3 or 4 versions of Summernote, or just jQuery if you use the Lite version of Summernote. Include the Following code in the head area of your HTML page.

Don’t forget to change the file’s path if you downloaded summernote in a different folders.

You can however, and a lot of developers do these days, is include the stylesheet’s within the head are of your page, and include the Javascript at the bottom of your page, but before the closing body tag.

但是，如今，您可以这样做，并且许多开发人员都这样做，是将样式表包含在页面的顶部，并且将Javascript包含在页面的底部，但要放在body标记的前面。

Fontawesome dependancy

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 section

从v0.8.0开始，您无需再添加fontawesome即可显示Summernote的图标。但是您仍然可以将fontawesome用于自定义图标。有关更多详细信息，请访问“自定义按钮”部分

（3）Embed

Summernote can be used with or without a form.

To use without a form, we suggest using a div in the body; this element will then be used where you want the Summernote editor to be rendered within your page.

不放到表单里面，可以使用<div>标签，命名ID为 summernote

<div id="summernote">Hello Summernote</div>

To use within a form, is pretty much the same as above, but rather than a div, we recommend using a textarea element inside a form, 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 form to set the attribute method="post" 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.

放在表单里面，建议使用<textarea>

</form>

（4）Run summernote

Run the script below when document is ready!

$(document).ready(function() {

$('#summernote').summernote();

});

The $(document).ready function is particularly necessary if you include the Javascript at the end of the document

JS基础

Summernote快速入门

FileReader 对象