ブログプロジェクト-2-4:主な開発-WYSIWIG編集Summernote

13589 ワード
テキストリンク

1. Summernote


1.なに?


Summernoteは、Bootstrap 4に基づくWeigeWeek編集である.WeigeWeek編集とは、編集中の様子にHTMLタグを付けて結果とする編集です.

2.なぜ使うのですか。


Input Textareaタグでタイトル-文章を提供する方法もありますが、WeigeWeek編集でより多彩な文章を提供するのに適しています.また,通常のinput Textareaタグのみを用いると,画像を挿入することは事実上不可能な難題となる.これにより、ビジビック編集が適用されます.

3.使用方法


アプリケーション
  • CDN
    Bootstrap 4用CDNとSummernote用CDNが適用されます.Summernoteの設計CSSはBootstrap 4に依存する.
    • postWrite.ejsのhead部分
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>summernote</title>
    <!-- CDN 추가 시작 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
    <!-- CDN 추가 부분 끝 -->
</head>
...
  • Summernoteエディタに適用される部分にtextarea入力ラベルを設定します.id要素を設定する必要があります.
    • postWrite.ejsのBody部分
    <body>
<form method="post" action="/insertPost">
    <textarea id="summernote" name="editordata"></textarea>
    <button type="submit">등록</button>
</form>
</body>
  • Scriptタグ内部でJQueryにより初期化されます.注意このとき適用されるtextareaのid値.
    また、画像をアップロードするために、画像をアップロードする際のonImageUpload操作を指定することもできます.(sendFile())
    • postWrite.ejsのスクリプト部分(1)
    <script>
// summernote init
$(function(){
  $('#summernote').summernote({ 
    placeholder: '내용',
    tabsize: 2,
    focus: true,
    callbacks:{
      // onImageUpload를 통해 이미지 업로드시 동작 개조 가능
      // 개조하지 않으면 Base64로 이미지가 전환돼서 img태그로 바뀐뒤 본문에 추가된다.
      onImageUpload: function(files){ // 이미지 업로드시
        sendFile(files[0], this); // sendFile함수 동작
      }
    }
  });
});
...
  • JQueryのajaxを使用して関数を作成し、AWS 3イメージストレージに画像を保存し、Editorにコンテンツを挿入します.上記のコードセクションのonImageUploadセクションを参照してください.
    ajaxを使用するのは、ajaxを使用するときにWebページをリフレッシュする必要がないため、エディタの内容(!)はリフレッシュされません.本文の内容に画像を挿入できます.
    • postWrite.ejsのスクリプト部分(2)
    function sendFile(file, editor){
  data = new FormData()
  data.append("img", file)
  $.ajax({ // ajax사용시 웹 페이지를 갱신하지 않고도 request가 가능하다.
    data: data,
    type: "POST",
    url: "/api/insertImage", // 이미지 업로드를 위한 api url
    cache: false,
    contentType: false,
    enctype: "multipart/form-data",
    processData: false,
    success: function (response) { // 성공시 img태그 생성
      var imgurl = $('<img>').attr({
        'src': response,
        'crossorigin': 'anonymous',
        'class': 'img-fluid',
    });
      $("#summernote").summernote("insertNode", imgurl[0]); // editor 내용에 삽입
    },
  })
}
  • ajaxを使用して呼び出すapiを作成します.
    • routes/api.js
    ...
const upload = require('../lib/multer');
const router = express.Router();
router.post('/insertImage', upload.single('img'), insertImage);
...
    apiController.js
    // @post
// /api/insertImage
const insertImage = async(req, res) => {
    imgurl = '';
    if(req.file !== undefined) {
        var imgurl = req.file.location; // router에서 붙인 multer가 반환한 url (aws s3 object url)
    }
    res.json(imgurl);
}
    アップロード画像の詳細については、前の文章を参照してください.
  • は
    • に適用されます.
    これはビギビック編集が成功して適用された光景です.

    WeigeWeekが編集した記事がブログ記事の中にそのままプリントアウトされている様子です.
    メール送信プログラム
    HttpWebRequestツールクラス