vue-quill-editor编辑器修改默认字体大小

作者: 梧桐芊雨 | 来源:发表于2020-02-03 12:06 被阅读0次

vue-quill-editor字体数量特别少，所以根本不能满足。

image.png

在对应的组件中使用
···
import "../../assets/styles/fontstyle/size-set.css";
import { quillEditor, Quill } from "vue-quill-editor";
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px','18px','20px', '22px','24px', '26px', '28px','30px','32px', '36px','38px', '40px','45px', '50px', false];
Quill.register(fontSizeStyle, true);
···
在editor的配置中配置size字体大小
····
editorOption: {
placeholder: "请编辑文本内容",
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
["blockquote", "code-block"], //引用，代码块

          [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
          [{ list: "ordered" }, { list: "bullet" }], //列表
          [{ script: "sub" }, { script: "super" }], // 上下标
          [{ indent: "-1" }, { indent: "+1" }], // 缩进
          [{ direction: "rtl" }], // 文本方向
          [{ size: fontSizeStyle.whitelist}], // 字体大小  ["small", false, "large", "huge"]
          //[{ size:['10px', false, '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '33px', '36px', '40px']}],
          [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

          [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
           [{ font: fonts }], //字体
          [{ align: [] }], //对齐方式
          ["image"],["clean"] //上传图片、上传视频 //清除字体样式
        ],
        handlers: {
          image: function(value) {
            if (value) {
              document.querySelector("#quill-upload input").click();
              console.log(
                "图片显示",
                document.querySelector("#quill-upload input")
              );
            } else {

              this.quill.format("image", false);
            }
          }
        }
      }
    },
    theme: "snow"
  }

···

新建size-set.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='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
  content: '18px';
}
.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='22px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {
  content: '22px';
}
.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='26px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {
  content: '26px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
  content: '28px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {
  content: '30px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
  content: '32px';
}
.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';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='38px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='38px']::before {
  content: '38px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='40px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='40px']::before {
  content: '40px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
  content: '45px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='50px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='50px']::before {
  content: '50px';
}
/**设置默认字体显示
**/
.ql-container {
    font-size:16px;
}



<template>
  <div class="Editor">
    <!--百度编辑器显示 https://juejin.im/post/5c931fe8f265da60f771c2cd
    https://juejin.im/post/5a782c946fb9a063475f5e16
    https://www.cnblogs.com/zr123/p/11101429.html
    https://www.jianshu.com/p/2c2c54acf1b9配置上传地址
    -->
    <!-- bidirectional data binding（双向数据绑定）v-if="!isEdit" -->

    <div class="editType">
      <el-upload
        id="quill-upload"
        class="avatar-uploader"
        :action="actionUrl"
        name="img"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :before-upload="beforeUpload"
      ></el-upload>
      <quill-editor
        style="height:300px"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
        @ready="onEditorReady($event)"
      ></quill-editor>
    </div>

    <!-- <div class="editType" v-if="isEdit">
      <vue-ueditor-wrap
        v-model="content"
        :config="myUeditConfig"
        @blur="editorTxt()"
        :destroy="true"
      ></vue-ueditor-wrap>
    </div>-->

    <!-- <div class="editType">
      <el-input
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20}"
        placeholder="请输入内容"
        v-model="content"
      >   </el-input>
    </div>
    -->
  </div>
</template>
<script>
import { base_url, img_url } from "../../util/url";
import "../../assets/styles/fontstyle/font.css";
import "../../assets/styles/fontstyle/size-set.css";

import { quillEditor, Quill } from "vue-quill-editor";

let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px','18px','20px', '22px','24px', '26px', '28px','30px','32px', '36px','38px', '40px','45px', '50px', false];
Quill.register(fontSizeStyle, true);

//自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

export default {
  name: "Editor",

  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    txtcontent: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      quillUpdateImg: false,
      headerToken: { "X-Auth-Token": localStorage.getItem("accessToken") },
      actionUrl: img_url,
      content: "",
      myUeditConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: "100%",
        // 初始容器宽度
        initialFrameWidth: "86%",
        // serverUrl: "http://192.168.9.190:8001/b/upload/uploadImages",
        serverUrl: img_url,
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/static/UEditor/"
      },
      editorOption: {
        placeholder: "请编辑文本内容",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块

              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: fontSizeStyle.whitelist}], // 字体大小  ["small", false, "large", "huge"]
              //[{ size:['10px', false, '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '33px', '36px', '40px']}],
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
               [{ font: fonts }], //字体
              [{ align: [] }], //对齐方式
              ["image"],["clean"] //上传图片、上传视频 //清除字体样式
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector("#quill-upload input").click();
                  console.log(
                    "图片显示",
                    document.querySelector("#quill-upload input")
                  );
                } else {

                  this.quill.format("image", false);
                }
              }
            }
          }
        },
        theme: "snow"
      }
    };
  },
  methods: {
    //vue-quill-editor
    onEditorBlur(quill) {
      // console.log("editor blur!", quill, this.content);
      this.$emit("editorBlur", this.content);
    },
    onEditorFocus(quill) {
      this.$emit("editorBlur", this.content);
      // console.log("editor focus!", quill, this.content);
    },
    onEditorReady(quill) {
      // console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      // console.log("editor change!", quill, html, text);
      this.content = html;
    },
    onEditorChange(quill) {
      // console.log("编辑内容改变!", quill, this.content);
      this.$emit("editorBlur", this.content);
    },

    /**
     * 图片上传
     */
    // 上传图片前
    beforeUpload(res, file) {
      this.quillUpdateImg = true;
    },
    // 上传图片成功
    uploadSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.ret == "OK") {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        const img = "<img width='80%' style='2px solid red;' src='" + res.content.img_url + "'/>";
        quill.insertEmbed(length, "image", res.content.img_url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        console.log("插入失败");
      }
      // loading动画消失
      this.quillUpdateImg = false;
    },
    // 上传图片失败
    uploadError(res, file) {
      // loading动画消失
      this.quillUpdateImg = false;
      console.log("插入失败", res, file);
    }

    //vue

    // editorTxt() {
    //   // console.log("百度插件不行吗", this.content);
    // }
  },
  watch: {
    txtcontent(value, oldValue) {
      this.content = value;
    }
  },

  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  mounted() {
    //  console.log("this is current quill instance object", this.editor);
  },
  activated() {},
  //keep-alive停用时掉用
  deactivated() {}
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/fontstyle/font_cn.css";
.Editor {
  min-height: 305px;
  height: 100%;
}
.quill-editor {
  height: 300px;
}
</style>

vue-quill-editor编辑器修改默认字体大小

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读