【实战笔记】怎么给本身的博客搭建富文本?

博客地址

我我的博客的地址👉👉点击进入

开源项目地址

这是我一个开源的收藏网址的项目 项目地址👉👉点击进入，能够直接设置为浏览器主页或者桌面快捷方式进行使用，本人在用，长期维护。

彻底开源，你们能够随意研究，二次开发。固然仍是十分欢迎你们点个Star⭐⭐⭐
👉👉源码连接(gitee)       👉👉源码连接(github)

怎么给本身的博客搭建富文本编辑器?

• 技术栈:vue2.x
• 富文本编辑器:vue-quill-editor
• UI框架:elementUI

由于博客是一个学习记录的网站,因此必然会用到文本编辑器,我这里选用了vue-quill-editor这款富文本编辑器,下面介绍一下这个编辑器的使用方法!

富文本编辑器vue-quill-editor的使用

1.首先安装vue-quill-editor及其依赖

npm i vue-quill-editor --save
npm i quill --save
复制代码

2.由于我这里是把整个编辑器做为组件,因此组件内部使用就能够了

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.挂载组件

// 挂载文本编辑器组件
components: {
  quillEditor
},
复制代码

4.template中使用

<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里添加样式

.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事件,固然你也可使用任何想使用的事件类型.

到这里就大功告成了,看一下结果!

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>
复制代码

到这里就大功告成了 看下效果

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
},
复制代码

到这就大功告成了,上传一张图片试试看

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧

连接整合

🔊项目预览地址(GitHub Pages):👉👉alanhzw.github.io

🔊项目预览备用地址(本身的服务器):👉👉warbler.duwanyu.com

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

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

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