首先在這里吐槽一下，網上不少教程實在太坑人，錯誤的代碼也敢發上來真的是誤人子弟，這篇文章是我踩了無數個坑寫上來的，可能也會有不足之處所以自己以后可能也會進行更正。

好吧，先說說最近的情況，忙著學校的期末作品考核，有一部分用到了富文本編輯器于是百度一下，發現了一個不錯的挺漂亮的富文本編輯器就是今天的主角： summernote！

源代碼下載在這里：http://summernote.org/

好了說說自己的經歷：

下載回來的文件夾是這樣的：

?

?

?插件的核心文件放在 dist 這個文件夾里面，文件夾內有三個起著重要作用的文件

font文件夾： 將它放在你項目的css 文件的文件夾內否則會加載不出富文本編輯器上面的功能圖標

?

?

另外還有一個語言的文件需要我們導入一下：

?

這個文件夾里面有18個國家的語言文件 其中 zh-CN 就是中文的語言文件

?

?

然后是導入這個插件：

css： 直接在html 頁面頭部導入即可注意依賴性：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/summernote.css"><link rel="stylesheet" type="text/css" href="css/normal.css"><link rel="stylesheet" type="text/css" href="css/personalPage.css?date=20170529-2"> <!--normal.css 是自己的css 文件不是規定內的文件-->

?

js：本人用的是模塊化管理插件 require.js 所以在導入js 文件方面有點特殊

（如果按照往常在頁面里面導入js 文件也要主義依賴性）

代碼如下：

//jquery 1.9.1模塊不符合 AMD 格式所以需要自定義 require.config({shim:{'jquery.min':{exports: '$'},'bootstrap.min':{deps: ['jquery.min']},'summernote.min': {deps: ['jquery.min','bootstrap.min']},'summernote-zh-CN.min': {deps: ['summernote.min']}}})

?關于require.js 這里不作太多介紹，本人之前寫過一篇日志 可以去看一下

?

導入完核心文件后就可以初始化了！詳情請看下一節~

summernote——實例篇

?

轉載于:https://www.cnblogs.com/stitchgogo/p/6921107.html

總結

以上是生活随笔為你收集整理的【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。