【實戰筆記】怎麼給本身的博客搭建富文本?

時間  2021-08-12
標籤 javascript css html 前端 vue java git github 數據庫 npm 欄目 JavaScript 简体版
原文   原文鏈接

博客地址

我我的博客的地址👉👉點擊進入javascript

開源項目地址

16.gif 這是我一個開源的收藏網址的項目 項目地址👉👉點擊進入，能夠直接設置爲瀏覽器主頁或者桌面快捷方式進行使用，本人在用，長期維護。css

徹底開源，你們能夠隨意研究，二次開發。固然仍是十分歡迎你們點個Star⭐⭐⭐
👉👉源碼連接(gitee)       👉👉源碼連接(github)html

怎麼給本身的博客搭建富文本編輯器?

  • 技術棧:vue2.x
  • 富文本編輯器:vue-quill-editor
  • UI框架:elementUI

由於博客是一個學習記錄的網站,因此必然會用到文本編輯器,我這裏選用了vue-quill-editor這款富文本編輯器,下面介紹一下這個編輯器的使用方法!前端

富文本編輯器vue-quill-editor的使用

1.首先安裝vue-quill-editor及其依賴vue

npm i vue-quill-editor --save
npm i quill --save
複製代碼

2.由於我這裏是把整個編輯器做爲組件,因此組件內部使用就能夠了java

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//調用富文本編輯器
import { quillEditor } from "vue-quill-editor";
複製代碼

3.掛載組件git

// 掛載文本編輯器組件
components: {
  quillEditor
},
複製代碼

4.template中使用github

<quill-editor ref="myQuillEditor" @change="" v-model="" :options="editorOption">
</quill-editor>
複製代碼

5.配置富文本編輯器的功能數據庫

data() {
  return {
    editorOption: {
      placeholder: "請在這裏輸入內容",
      modules: {
        toolbar: {
          container: [
            ["bold", "italic", "underline", "strike"], //加粗，斜體，下劃線，刪除線
            ["blockquote", "code-block"], //引用，代碼塊
            [{ header: 1 }, { header: 2 }], // 標題，鍵值對的形式；一、2表示字體大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下標
            [{ indent: "-1" }, { indent: "+1" }], // 縮進
            [{ direction: "rtl" }], // 文本方向
            // [{ size: ["small", false, "large", "huge"] }], // 字體大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級標題
            [{ color: [] }, { background: [] }], // 字體顏色，字體背景顏色
            // [{ font: [] }], //字體
            [{ align: [] }], //對齊方式
            ["clean"], //清除字體樣式
            ["link", "image"] //上傳圖片、上傳視頻 "link" 連接 "video" 視頻
          ],
        }
      }
    }
  };
},
複製代碼

6.還要在style裏添加樣式npm

.quill-editor {
  width: 1000px;
  margin: 0 auto;
  height: 150px;
}
.editor {
  line-height: normal !important;
  height: 800px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '請輸入連接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '請輸入視頻地址:';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '標題1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '標題2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '標題3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '標題4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '標題5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '標題6';
}
複製代碼

7.與通常的輸入框相同,使用v-model綁定文本內容便可,我這裏提交內容使用的是change事件,固然你也可使用任何想使用的事件類型.

到這裏就大功告成了,看一下結果!

da2624926ea469b2b90193614d31732f.png

vue-quill-editor回顯以及代碼塊高亮

既然咱們在寫文章的時候貼上了不少代碼,那麼查看的時候確定要回顯到頁面上,而且要有代碼高亮才能看,要否則白紙黑字實在是頭疼,最終咱們還要藉助插件來實現

一.vue-quill-editor回顯

咱們要在須要回顯的頁面中添加div,而後使用v-html渲染數據就能夠了,特別須要注意的是必定要添加ql-editor類名,不然不會生效

<div class="ql-editort" v-html=""></div>
複製代碼

二.代碼塊高亮

1.首先安裝prismjs及其依賴

//安裝prismjs
npm i prismjs
//安裝prismjs的編譯器插件
npm i babel-plugin-prismjs -D
複製代碼

2.在項目下找到babel.config.js

在module.exports中的plugins追加如下配置，若是本來沒有plugins能夠手動添加

plugins: [
  [
    "prismjs",
    {
      languages: ["javascript", "css", "markup"],
      plugins: ["line-numbers"], //配置顯示行號插件
      theme: "okaidia", //主題名稱
      css: true,
    },
  ],
],
複製代碼

3.在組件中引入模塊

//引入代碼美化插件
import Prism from "prismjs";
複製代碼

4.這裏有個比較難處理的是咱們經過文本編輯器生成的代碼結構是隻有pre標籤,而這個代碼高亮插件只對pre標籤嵌套code標籤起做用,有的類名必須寫在code標籤上,因此咱們在存進數據庫以前要作一個全局替換工做.類名line-numbers顯示行號language-xxx選擇編程語言，這裏咱們選擇js：language-js

//因爲富文本編輯器生成的代碼塊只有pre標籤,沒有code標籤,而前端的回顯須要code標籤,因此須要作處理
let newContent = blogEditerContent.replace(
  /<pre class="ql-syntax" spellcheck="false">/g,
  '<pre class="ql-syntax line-numbers language-js" spellcheck="false"><code class="language-js">'
);
newContent = newContent.replace(/<\/pre>/g, "</code></pre>");
複製代碼

5.網上有部分文章說在mounted中添加 Prism.highlightAll(); 但我親測並非很好用,因此我就用了另一種方法,自定義插件

//引入代碼美化插件
import Prism from "prismjs";
let Highlight = {};
// 自定義插件
Highlight.install = function(Vue) {
  // 自定義指令 v-highlight
  Vue.directive("highlight", {
    // 指令所在組件的 VNode 及其子 VNode 所有更新後調用
    componentUpdated: function() {
      //代碼美化
      Prism.highlightAll();
    },
  });
};
export default Highlight;
複製代碼

6.在main.js中引用自定義插件

//引入代碼塊高亮插件
import Highlight from "./assets/js/Highlight";
Vue.use(Highlight);
複製代碼

7.而後在第一步的div中添加命令v-highlight

<div class="ql-editor" v-html="" v-highlight></div>
複製代碼

到這裏就大功告成了 看下效果

f6337ff0170fd26ba91e29873a8d7155.png

vue-quill-editor結合elementUI實現圖片上傳

寫文章避免不了要上傳圖片的,可是這個編輯器默認是用base64編碼方式存儲的,這樣的缺點就是當圖片比較大時，提交後臺時參數過長，可能會致使提交失敗,而且數據量多起來的話,會對數據庫形成很大壓力,因此咱們就結合elementUI的圖片上傳組件,將圖片上傳到咱們本身的圖片空間,而且返回URL存到數據庫中.

1.在template中添加upload組件 action填寫的是咱們上傳服務器的接口地址

<!-- elementUI上傳圖片組件 -->
<el-upload class="avatar-uploader" :action="serverUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload"> </el-upload>
複製代碼

2.在toolbar中添加劇寫上傳圖片方法

data() {
  return {
    editorOption: {
      modules: {
        toolbar: {
          //重寫圖片上傳事件
          handlers: {
            'image': function (value) {
              if (value) {
                // 觸發input框選擇圖片文件
                document.querySelector('.avatar-uploader input').click()
              } else {
                this.quill.format('image', false);
              }
            }
          }
        }
      }
    }
  };
},
複製代碼

3.在upload組件的上傳成功鉤子函數中進行驗證與插入

//圖片上傳成功鉤子函數
handleAvatarSuccess(res) {
  // res爲圖片服務器返回的數據
  // 獲取富文本組件實例
  let quill = this.$refs.myQuillEditor.quill
  // 若是上傳成功
  if (res.sinaPath !== null) {
    // 獲取光標所在位置
    let length = quill.selection.savedRange.index;
    // 插入圖片 res.info爲服務器返回的圖片地址
    quill.insertEmbed(length, 'image', res.sinaPath)
    // 調整光標到最後
    quill.setSelection(length + 1)
  } else {
    this.$message.error('圖片插入失敗')
  }
},
複製代碼

4.爲了提升交互體驗,在圖片上傳過程當中添加了loading組件

//使用el-row包裹quill-editor
<el-row v-loading="quillUpdateImg">
  <quill-editor ref="myQuillEditor" @change="submitBlogEditerContent" v-model="blogEditerContent" :options="editorOption"> </quill-editor>
</el-row>

複製代碼

5.在圖片上傳前的鉤子函數中添加loading 圖片上傳結果返回後(不管成功仍是失敗)移除loading

//圖片上傳前鉤子函數
beforeAvatarUpload(file) {
  // 顯示loading動畫
  this.quillUpdateImg = true
},
//圖片上傳失敗鉤子函數
handleAvatarError() {
  // loading動畫消失
  this.quillUpdateImg = false
  this.$message.error('圖片插入失敗')
}
//圖片上傳成功鉤子函數
handleAvatarSuccess(res) {
  // loading動畫消失
  this.quillUpdateImg = false
},
複製代碼

到這就大功告成了,上傳一張圖片試試看

74a570002d5bfc0ad0dcf6a8805710d4.png

最後感謝各位的耐心觀看，既然都到這了，點個 👍贊再走吧

連接整合

🔊項目預覽地址(GitHub Pages):👉👉alanhzw.github.io

🔊項目預覽備用地址(本身的服務器):👉👉warbler.duwanyu.com

🔊源碼地址(gitee):👉👉gitee.com/hzw_0174/wa…

🔊源碼地址(github):👉👉github.com/alanhzw/War…

🔊個人博客:👉👉www.duwanyu.com

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程