亲宝软件园·资讯

展开

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

晴天有点孤单 人气:0

本文着重讲解了vue pages 多入口项目 + chainWebpack 全局引用缩写说明，值得借鉴，相信能够帮助到您。我们一起来阅读吧

结合vue+element-ui+vue-quill+editor二次封装成组件

1.图片上传

分析原因

项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，造成用户体验差。

引入element-ui

编辑editor.vue文件

<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
  import axios from '@/API/';
 import { quillEditor } from "vue-quill-editor";
 import COS from "cos-js-sdk-v5";
 import Upload from '@/components/Upload.vue';
 import { addQuillTitle } from '../utils/quill-title.js';

 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 
  export default {
    data() {
      return {
      }
    },
    methods: {
      // 上传图片前
      beforeUpload(res, file) {
       const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
     const isLt1M = file.size / 1024 / 1024 < 1
     if (!isJPG) {
       this.$message.error('支持JPG、PNG格式的图片，大小不得超过1M')
     }
     if (!isLt1M) {
       this.$message.error('文件最大不得超过1M')
     } 
     return isJPG && isLt1M
      },
      // 上传图片成功
      uploadSuccess(res, file) {},
      // 上传图片失败
      uploadError(res, file) {},
      // 上传图片处理过程
      upload(req){}
    }
  }
</script>

在editor.vue中引入vue-quill-editor

<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <quill-editor 
      class="info-editor" 
      v-model="content" 
      ref="QuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>
<script>
  import axios from '@/API/';
 import { quillEditor } from "vue-quill-editor";
 import COS from "cos-js-sdk-v5";
 import Upload from '@/components/Upload.vue';
 import { addQuillTitle } from '../utils/quill-title.js';

 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";

  // 工具栏配置
  const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],    // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],        // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],   // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],     // outdent/indent
  [{'direction': 'rtl'}],             // text direction

  [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],     // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                     // remove formatting button
 ]

  export default {
    data() {
      return {
       editorOption: {
       placeholder: '请输入编辑内容',
       theme: 'snow', //主题风格
       modules: {
        toolbar: {
        container: toolbarOptions, // 工具栏
        handlers: {
         'image': function (value) {
         if (value) {
          document.querySelector('#quill-upload input').click()
         } else {
          this.quill.format('image', false);
         }
         }
        }
        }
       }
       }, // 富文本编辑器配置
       content: '', //富文本内容
      }
    },
    methods: {
      // 上传图片前
      beforeUpload(res, file) {
       const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
     const isLt1M = file.size / 1024 / 1024 < 1
     if (!isJPG) {
       this.$message.error('支持JPG、PNG格式的图片，大小不得超过1M')
     }
     if (!isLt1M) {
       this.$message.error('文件最大不得超过1M')
     } 
     return isJPG && isLt1M
      },
      // 上传图片成功
      uploadSuccess(res, file) {
       let quill = this.$refs.QuillEditor.quill;
       let length = quill.getSelection().index;
       quill.insertEmbed(length, 'image', url);
       quill.setSelection(length+1)
      },
      // 上传图片失败
      uploadError(res, file) {
        this.$message.error('图片插入失败')
      },
      // 上传图片处理过程
      upload(req){}
    }
  }
</script>

<style scoped>
.avatar-uploader{
 display: none;
}
</style>

2.编辑器上增加title提示

在编辑器上增加一个quill-title.js的工具栏的title的配置文件

const titleConfig = {
 'ql-bold':'加粗',
 'ql-color':'字体颜色',
 'ql-font':'字体',
 'ql-code':'插入代码',
 'ql-italic':'斜体',
 'ql-link':'添加链接',
 'ql-background':'背景颜色',
 'ql-size':'字体大小',
 'ql-strike':'删除线',
 'ql-script':'上标/下标',
 'ql-underline':'下划线',
 'ql-blockquote':'引用',
 'ql-header':'标题',
 'ql-indent':'缩进',
 'ql-list':'列表',
 'ql-align':'文本对齐',
 'ql-direction':'文本方向',
 'ql-code-block':'代码块',
 'ql-formula':'公式',
 'ql-image':'图片',
 'ql-video':'视频',
 'ql-clean':'清除字体样式'
};

export function addQuillTitle(){
 const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect = oToolBar.querySelectorAll('select'),
    aSpan= oToolBar.querySelectorAll('span');
 aButton.forEach((item)=>{
  if(item.className === 'ql-script'){
   item.value === 'sub' ? item.title = '下标': item.title = '上标';
  }else if(item.className === 'ql-indent'){
   item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
  }else if(item.className === 'ql-list'){
   item.value==='ordered' ? item.title='有序列表' : item.title='无序列表'
  }else if(item.className === 'ql-header'){
   item.value === '1' ? item.title = '标题H1': item.title = '标题H2';
  }else{
   item.title = titleConfig[item.classList[0]];
  }
 });
 aSelect.forEach((item)=>{
  if(item.className!='ql-color'&&item.className!='ql-background'){
   item.parentNode.title = titleConfig[item.classList[0]];
  }
 });
 aSpan.forEach((item)=>{
  if(item.classList[0]==='ql-color'){
   item.title = titleConfig[item.classList[0]];
  }else if(item.classList[0]==='ql-background'){
   item.title = titleConfig[item.classList[0]];
  }
 });
}

在editor.vue中引入quill-title.js

<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <quill-editor 
      class="info-editor" 
      v-model="content" 
      ref="QuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>
<script>
  import axios from '@/API/';
 import { quillEditor } from "vue-quill-editor";
 import COS from "cos-js-sdk-v5";
 import Upload from '@/components/Upload.vue';
 import { addQuillTitle } from '../utils/quill-title.js';

 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";

  // 工具栏配置
  const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],    // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],        // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],   // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],     // outdent/indent
  [{'direction': 'rtl'}],             // text direction

  [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],     // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                     // remove formatting button
 ]

  export default {
    data() {
      return {
       editorOption: {
       placeholder: '请输入编辑内容',
       theme: 'snow', //主题风格
       modules: {
        toolbar: {
        container: toolbarOptions, // 工具栏
        handlers: {
         'image': function (value) {
         if (value) {
          document.querySelector('#quill-upload input').click()
         } else {
          this.quill.format('image', false);
         }
         }
        }
        }
       }
       }, // 富文本编辑器配置
       content: '', //富文本内容
      }
    },
    mounted(){
     addQuillTitle();
   },
    methods: {
      // 上传图片前
      beforeUpload(res, file) {
       const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
     const isLt1M = file.size / 1024 / 1024 < 1
     if (!isJPG) {
       this.$message.error('支持JPG、PNG格式的图片，大小不得超过1M')
     }
     if (!isLt1M) {
       this.$message.error('文件最大不得超过1M')
     } 
     return isJPG && isLt1M
      },
      // 上传图片成功
      uploadSuccess(res, file) {
       let quill = this.$refs.QuillEditor.quill;
       let length = quill.getSelection().index;
       quill.insertEmbed(length, 'image', url);
       quill.setSelection(length+1)
      },
      // 上传图片失败
      uploadError(res, file) {
        this.$message.error('图片插入失败')
      },
      // 上传图片处理过程
      upload(req){}
    }
  }
</script>

<style scoped>
.avatar-uploader{
 display: none;
}
</style>

补充知识：vue-quill-editor的使用及个性化定制

最近在用vue + element ui写一个小应用要用到富文本编辑器，以前做项目都一直都用ueditor，但是看了一下它与vue的兼容性并不好，又对比了几个后，选择了vue-quill-editor。

vue-quill-editor基于Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用，正是我想要的☻。这里只介绍基本的安装和部分简单的定制。我翻了很多别人写的东西对我的项目都无效，最后自己折腾出来在这记录备忘。

一、安装

1.安装模块

npm install vue-quill-editor –save

2.vue组件

<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
 
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor';
 
  export default {
    name: "addJournal",
    components: {
      quillEditor
    },
    data() {
      return {
        content: ``,
        editorOption: {},
      };
    },
    methods: {
      onEditorReady(editor) {}, // 准备编辑器
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      onEditorChange(){}, // 内容改变事件
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
  }
</script>

至此，vue-quill-editor就安装完成了，效果图如下：

二、定(zhe)制(teng)

这里只简单介绍两类操作: 样式修改和自定义工具栏。

1.样式修改

a) 修改vue-quill-editor编辑框高度

这个其实很简单了，只要在vue组件的<style>标签里增加一个样式即可

.quill-editor{
  height: 400px;
}

在调整了编辑框的高度后，如果编辑内容的高度超过了编辑框的高度，编辑框会出现滚动条（不手动调整此高度话会一直往下扩展）。

b) 修改工具栏对齐方式

这里需要注意，使用webstorm创建的vue组件中，styte标签的默认会加上scoped属性, 也就是说，只对当前模块的元素有效，而工具栏是从外部引入的，因此下面的样式要写在无scoped属性的style标签里才会有效。

.ql-toolbar.ql-snow{
  text-align: left;
}

修改完后的样式如下

2.定制工具栏按钮

以字体大小调节为例，这是默认的调节按钮，我们想改成多个像素大小的下拉选框。

step1: 在vue组件中引入quill模块，修改whitelist, 并注册样式

import * as Quill from 'quill';
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];//false表示默认值
Quill.register(fontSizeStyle, true);

step2: 修改quill-editor的option属性值

editorOption: {
  modules: {
    toolbar: [["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{header: 1}, {header: 2}], [{list: "ordered"}, {list: "bullet"}], [{script: "sub"}, {script: "super"}], [{indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}],
      [{size: fontSizeStyle.whitelist}], [{header: [1, 2, 3, 4, 5, 6, !1]}], [{color: []}, {background: []}], [{font: []}], [{align: []}], ["clean"], ["link", "image", "video"]],
  },
}

这个modules里面的值是参照vue-quill-editor模块里的vue-quill-editor.js里的modules值设置的，只需要将你要修改的工具栏按钮的值替换成step1里设置的whitelist值即可。

step3: 增加定制选项的css样式

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
 content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
 content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
 content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
 content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
 content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
 content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
 content: '36px';
}

此样式的选择器可以从quill.snow.css.js中找到，我们要做的只是修改它的data-value值。

修改后的工具栏：

以上这篇vue pages 多入口项目 + chainWebpack 全局引用缩写说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

加载全部内容
相关教程
猜你喜欢
用户评论