【實踐】簡潔大方的summernote 富文本編輯器插件的用發——導入篇

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

好吧，先說說最近的情況，忙着學校的期末作品考核，有一部分用到了富文本編輯器於是百度一下，發現了一個不錯的挺漂亮的富文本編輯器就是今天的主角： 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——實例篇