【富文本编辑器实战】02 编写编辑器配置文件

编写编辑器配置文件

目录

前言

本篇文章主要内容是项目的配置文件的编写与讲解,包括菜单项配置、语言配置、总体配置。

项目结构分析

下图是编辑器的总体结构:

编辑器大致可以分为两个部分,菜单栏(图中的 1)和下面的编辑器(图中的 4)。其中菜单栏的内容较多,每个菜单项都包含了图标,说明文字(图中的 2)。部分菜单项还包含了下拉框(图中的 3)。所以就可以大致分析出需要对菜单栏进行配置操作,而编辑区基本可以不用管,同时,为了更加规范和多语言适配,我们可以将说明文字的配置单独取出来,形成语言配置文件,就可以配置出任何你想要的语言。

项目配置

项目的配置主要有三个:菜单项配置,语言配置,总体配置。

在上一篇教程中,我们已经使用 vue-cli 搭建好了项目的总体框架。我们的项目是实现一个富文本编辑器,我们需要为这个编辑器做一些参数上的配置。从现在开始,包括后面的编码部分,都是在 src/ 目录下进行。

首先,在 src/ 目录下新建一个 config 目录,用于存放编辑器配置文件。然后在 config 目录下,新建三个文件:index.jslang.jsmenu.js

接下来详细介绍这三个配置文件的内容和作用。

菜单项配置

menu.js是菜单的配置文件,不过不是指菜单栏,而是指每一项菜单项。每一个菜单项的配置内容包括这项的类名:className,图标:icon,它的行为:action,是否存在下拉菜单:dropList,以及是否展示状态:showStatus。这样做的原因是可以尽量只配置单项的基础属性。

showStatus 的作用是,点击了这个选项之后,该选项是否展示为 active 状态,下面两张图是例子:

第一张图中,我选中了文字,并对文字进行了加粗操作,这时加粗菜单项变为 active 的状态。而第二张图中,我选择了让文字进行居中对齐,点击了框中的菜单项,该项并未有展示为 active 的状态。所以 showStatus 的目的就是配置菜单项执行操作后,是否展示为 active 的状态。

className 的作用是配置每个菜单项的 class 名字,这样做的目的是为了让命名更加语义化

icon 的目的就比较单纯了,即每个菜单项所看到的图标,这里采用的是 fontawesome 的图标,至于如何使用,后续会做讲解。

action 是指点击这个菜单项之后会产生的动作,比如前面的加粗操作,点击加粗菜单后,所选的文字就会执行加粗操作,点击居中菜单,文字就执行居中操作。

最后还有一个 dropList 配置属性,即上图中标号为 3 的部分,某些菜单可以有下拉框属性,如果点击这个菜单项,它不会执行任何操作,而是弹出下拉框,然后继续操作。这个属性和 action 作用相反,可以说是互为对立,即有 action 属性的,就没有下拉框,如果有下拉框,代表不会执行 action 属性,也不具备 action 属性,可以不用配置。

整个 menu.js 的代码如下:

js 复制代码
let menu = {
  // 查看源码
  source: {
    className: "syl-menu-source",
    icon: "fa fa-code",
    action: "viewSource",
    showStatus: true,
  },
  // 字体名称
  fontName: {
    className: "syl-menu-fontName",
    icon: "fa fa-font",
    dropList: true,
  },
  // 字号大小
  fontSize: {
    className: "syl-menu-fontSize",
    icon: "fa fa-header",
    dropList: true,
  },
  // 文字加粗
  bold: {
    className: "syl-menu-bold",
    icon: "fa fa-bold",
    action: "bold",
    showStatus: true,
  },
  // 下划线
  underLine: {
    className: "syl-menu-underline",
    icon: "fa fa-underline",
    action: "underline",
    showStatus: true,
  },
  // 删除线
  strikeThrough: {
    className: "syl-menu-strike",
    icon: "fa fa-strikethrough",
    action: "strikeThrough",
    showStatus: true,
  },
  // 颜色
  color: {
    className: "syl-menu-color",
    icon: "fa fa-paint-brush",
    dropList: true,
  },
  // 文字左对齐
  justifyLeft: {
    className: "syl-menu-align-left",
    icon: "fa fa-align-left",
    action: "justifyLeft",
  },
  // 文字居中对齐
  justifyCenter: {
    className: "syl-menu-align-center",
    icon: "fa fa-align-center",
    action: "justifyCenter",
  },
  // 文字右对齐
  justifyRight: {
    className: "syl-menu-align-center",
    icon: "fa fa-align-right",
    action: "justifyRight",
  },
  // 插入有序列表
  insertOrderedList: {
    className: "syl-menu-ol",
    icon: "fa fa-list-ol",
    action: "insertOrderedList",
  },
  // 插入无序列表
  insertUnorderedList: {
    className: "syl-menu-ul",
    icon: "fa fa-list-ul",
    action: "insertUnorderedList",
  },
  // 添加超链接
  link: {
    className: "syl-menu-link",
    icon: "fa fa-link",
    dropList: true,
  },
  // 取消超链接
  unlink: {
    className: "syl-menu-unlink",
    icon: "fa fa-unlink",
    action: "unlink",
  },
  // 插入图片
  picture: {
    className: "syl-menu-picture",
    icon: "fa fa-picture-o",
    dropList: true,
  },
  // 插入表格
  table: {
    className: "syl-menu-table",
    icon: "fa fa-table",
    dropList: true,
  },
  // 取消格式
  removeFormat: {
    className: "syl-menu-remove-format",
    icon: "fa fa-eraser",
    action: "removeFormat",
  },
  // 重做
  redo: {
    className: "syl-menu-redo",
    icon: "fa fa-repeat",
    action: "redo",
  },
  // 撤销
  undo: {
    className: "syl-menu-undo",
    icon: "fa fa-undo",
    action: "undo",
  },
};
// 导出配置
export default {
  getMenu() {
    return menu;
  },
};

以上就是我们全部的菜单功能项。className 的值可以随意设置,icon 的值代表图标的样式,你也可以在 fontawesome 网站上去找其他图标替换, action 的值不能随意修改,否则不能执行相关操作,action 的值还有很多,与浏览器的支持相关,后面会提到更多的 action 操作。

语言配置

即在前面图中标出的第二部分,当鼠标在菜单项悬停一会儿,就会出现说明性文字,这是利用了标签的 title 属性,当我们不清楚这个菜单项是什么功能时,可以将鼠标放到菜单上,下方就会出现该菜单项的功能说明。这里使用的是中文文字,如果我们想要将文字改为英文,如果不使用配置文件,挨个去标签中修改,那将是巨大的工作量,所以需要一个语言配置文件,这个文件中,你想要如何翻译都可以,如果想要修改,直接改配置文件就可以。以下是语言配置文件的配置详情:

lang.js配置文件代码:

js 复制代码
export default {
  source: {
    title: "源码",
    // 可继续添加其他语言 title: 'sourceCode',下同
  },
  fontName: {
    title: "字体",
  },
  fontSize: {
    title: "字号",
  },
  bold: {
    title: "加粗",
  },
  underLine: {
    title: "下划线",
  },
  strikeThrough: {
    title: "删除线",
  },
  color: {
    title: "颜色",
  },
  justifyLeft: {
    title: "左对齐",
  },
  justifyCenter: {
    title: "居中",
  },
  justifyRight: {
    title: "右对齐",
  },
  insertOrderedList: {
    title: "有序列表",
  },
  insertUnorderedList: {
    title: "无序列表",
  },
  link: {
    title: "链接",
  },
  unlink: {
    title: "取消链接",
  },
  picture: {
    title: "图片",
  },
  table: {
    title: "表格",
  },
  removeFormat: {
    title: "清除格式",
  },
  redo: {
    title: "重做",
  },
  undo: {
    title: "撤销",
  },
};

这里的每一项,都和之前的 menu.js 中的菜单项保持一致,每项菜单都可添加多种语言,可以很方便地使用和修改。

总体配置

index.js ,这个配置文件可以看作是整个编辑器的总体配置。主要包括对各个菜单项的可见性配置,控制菜单栏可以显示哪些菜单;对部分下拉框数据的配置,比如字体,字号,和数据的颜色;对编辑区设定预设文字。以下为配置示例:

js 复制代码
let config = {
  // 控制哪些菜单项可以展示(这里全部展示)
  viewMenu: [
    "source",
    "fontName",
    "fontSize",
    "bold",
    "underLine",
    "strikeThrough",
    "color",
    "justifyLeft",
    "justifyCenter",
    "justifyRight",
    "insertOrderedList",
    "insertUnorderedList",
    "link",
    "unlink",
    "picture",
    "table",
    "removeFormat",
    "redo",
    "undo",
  ],
  // 配置字体名
  fontName: [
    "微软雅黑",
    "宋体",
    "arial black",
    "times new roman",
    "Courier New",
  ],
  // 配置字号
  fontSize: ["h1", "h2", "h3", "h4", "h5", "h6"],
  // 配置颜色
  colors: [
    "#000000",
    "#424242",
    "#636363",
    "#9C9C94",
    "#CEC6CE",
    "#EFEFEF",
    "#F7F7F7",
    "#FFFFFF",
    "#FF0000",
    "#FF9C00",
    "#FFFF00",
    "#00FF00",
    "#00FFFF",
    "#0000FF",
    "#9C00FF",
    "#FF00FF",
    "#F7C6CE",
    "#FFE7CE",
    "#FFEFC6",
    "#D6EFD6",
    "#CEDEE7",
    "#CEE7F7",
    "#D6D6E7",
    "#E7D6DE",
    "#E79C9C",
    "#FFC69C",
    "#FFE79C",
    "#B5D6A5",
    "#A5C6CE",
    "#9CC6EF",
    "#B5A5D6",
    "#D6A5BD",
    "#E76363",
    "#F7AD6B",
    "#FFD663",
    "#94BD7B",
    "#73A5AD",
    "#6BADDE",
    "#8C7BC6",
    "#C67BA5",
    "#CE0000",
    "#E79439",
    "#EFC631",
    "#6BA54A",
    "#4A7B8C",
    "#3984C6",
    "#634AA5",
    "#A54A7B",
    "#9C0000",
    "#B56308",
    "#BD9400",
    "#397B21",
    "#104A5A",
    "#085294",
    "#311873",
    "#731842",
    "#630000",
    "#7B3900",
    "#846300",
    "#295218",
    "#083139",
    "#003163",
    "#21104A",
    "#4A1031",
  ],
  // 配置编辑区预设内容
  container: {
    content: "<p><br></p>",
  },
};

// 导出配置
export default {
  // 获取某项配置
  getConfig(name) {
    return config[name] ? config[name] : config;
  },
  // 设置全部配置项
  setConfig(data) {
    if (data) {
      config = data;
    }
  },
};

总结

到这里,我们就完成了对编辑器的相关属性和参数的配置了。在下一篇文章中,我们将开始 Vuex 的配置编写。

相关推荐
酷酷的阿云4 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea