编写编辑器配置文件
目录
前言
本篇文章主要内容是项目的配置文件的编写与讲解,包括菜单项配置、语言配置、总体配置。
项目结构分析
下图是编辑器的总体结构:
编辑器大致可以分为两个部分,菜单栏(图中的 1)和下面的编辑器(图中的 4)。其中菜单栏的内容较多,每个菜单项都包含了图标,说明文字(图中的 2)。部分菜单项还包含了下拉框(图中的 3)。所以就可以大致分析出需要对菜单栏进行配置操作,而编辑区基本可以不用管,同时,为了更加规范和多语言适配,我们可以将说明文字的配置单独取出来,形成语言配置文件,就可以配置出任何你想要的语言。
项目配置
项目的配置主要有三个:菜单项配置,语言配置,总体配置。
在上一篇教程中,我们已经使用 vue-cli
搭建好了项目的总体框架。我们的项目是实现一个富文本编辑器,我们需要为这个编辑器做一些参数上的配置。从现在开始,包括后面的编码部分,都是在 src/
目录下进行。
首先,在 src/
目录下新建一个 config
目录,用于存放编辑器配置文件。然后在 config
目录下,新建三个文件:index.js
、lang.js
、 menu.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 的配置编写。