【富文本编辑器实战】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 的代码如下:

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配置文件代码:

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

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 的配置编写。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/336813.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯真题(Python)每日练Day2

题目 题目分析 对于本题首先确定其数据结构为优先队列&#xff0c;即邮费最小的衣服优先寄&#xff0c;算法符合贪心算法。可以直接使用queue库的PriorityQueue方法实现优先队列。关于PriorityQueue的使用方法主要有&#xff1a; import queue q queue.Queue()# 队列 pq qu…

Django随笔

关于Django的admin 1. 在url中把 from django.contrib import admin 重新解开 把path(admin/,admin.site.urls), 解开 2. 注册app&#xff0c;在配置文件中写 django.contrib.admin, 3.输入命令进行数据库迁移 Django国际化 配置文件中&#xff08;改成中文&#xff09; LA…

云轴科技ZStack位列IDC云系统软件市场教育行业TOP2

近日&#xff0c;全球IT市场研究和咨询公司IDC发布 《中国云系统软件市场跟踪报告2023H1》 ZStack作为产品化的云基础软件提供商 位居云系统软件市场第一梯队 市场份额位列独立云厂商*第一 增速最快 教育行业TOP2 在教育行业&#xff0c;云计算已成为教育行业信息化的重要基础…

十一、常用API——爬虫

目录 爬虫本地爬虫和网络爬虫贪婪爬取和非贪婪爬取正则表达式在字符串方法中的使用捕获分组和非捕获分组分组捕获分组非捕获分组 爬虫 本地爬虫和网络爬虫 有如下文本&#xff0c;请按照要求爬取数据。&#xff08;本地爬虫&#xff09; Java自从95年问世以来&#xff0c;经历…

红队渗透靶机:TOPPO: 1

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb 5、dirsearch WEB tips1 tips2 SSH登录 提权 系统信息收集 本地 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.110…

重构改善既有代码的设计-学习(一):封装

1、封装记录&#xff08;Encapsulate Record&#xff09; 一些记录性结构&#xff08;例如hash、map、hashmap、dictionary等&#xff09;&#xff0c;一条记录上持有什么字段往往不够直观。如果其使用范围比较宽&#xff0c;这个问题往往会造成许多困扰。所以&#xff0c;记录…

【LeetCode每日一题】2809. 使数组和小于等于 x 的最少时间

2024-1-19 文章目录 [2809. 使数组和小于等于 x 的最少时间](https://leetcode.cn/problems/minimum-time-to-make-array-sum-at-most-x/)思路&#xff1a; 2809. 使数组和小于等于 x 的最少时间 思路&#xff1a; 获取两个列表的长度n&#xff0c;并初始化一个二维数组f&…

深耕文档型数据库12载,SequoiaDB再开源

1月15日&#xff0c;巨杉数据库举行SequoiaDB新特性及开源项目发布活动。本次活动回顾了巨杉数据库深耕JSON文档型数据库12年的发展历程与技术演进&#xff0c;全面解读了SequoiaDB包括在高可用、安全、实时、易用性四个方向的技术特性&#xff0c;宣布了2024年面向技术社区的开…

Next-GPT: Any-to-Any Multimodal LLM

Next-GPT: Any-to-Any Multimodal LLM 最近在调研一些多模态大模型相关的论文&#xff0c;发现Arxiv上出的论文根本看不过来&#xff0c;遂决定开辟一个新坑《一页PPT说清一篇论文》。自己在读论文的过程中会用一页PPT梳理其脉络和重点信息&#xff0c;旨在帮助自己和读者快速了…

基于SpringBoot Vue养老院管理

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

使用JFLASH实现文件程序自动化合并及下载功能

主要总结下使用 SEGGER 工具集的 JFLASH 软件实现hex/bin文件合并以及程序的自动下载使用方法。 起因是最近使用到LVGL字库文件的制作&#xff0c;每次都要将分散的bin文件按既定分配的偏移作合并处理&#xff0c;刚开始使用的是二进制文件合并工具,文件少的时候还行&#xff…

【网站项目】基于jsp的199旅游景点管理系统

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

10分钟完成权限系统全流程开发

背景 首先问下chatgpt,权限系统的模型有哪些&#xff1f; 基于上述的结论&#xff0c;我们选择基于角色的访问控制(RBAC)&#xff0c;请从数据库设计、接口文档、代码实现、单元测试四个方面分别详细描述每个部份需要实现的内容。 数据库实现 针对上述的数据库设计部份&#…

【前端】WebSocket接收二进制数据转JSON并解决中文乱码问题(ArrayBuffer转json)

场景&#xff1a; WebSocket与mqtt服务器通信&#xff0c;接收二进制数据并将其转为Json使用。一般方式都会出现中文乱码问题。 解决方法&#xff1a; handleBinaryToJson(e) {let enc new TextDecoder("utf-8");let uint8_msg new Uint8Array(e);let temp en…

Python自动化实战之接口请求的实现

在前文说过&#xff0c;如果想要更好的做接口测试&#xff0c;我们要利用自己的代码基础与代码优势&#xff0c;所以该章节不会再介绍商业化的、通用的接口测试工具&#xff0c;重点介绍如何通过 python 编码来实现我们的接口测试以及通过 Pycharm 的实际应用编写一个简单接口测…

uniapp的IOS证书(.p12)和描述文件(.mobileprovision)申请 2024年最新教程

文章目录 准备环境登录 iOS Dev Center 下面我们从头开始学习一下如何申请开发证书、发布证书及相对应的描述文件。首先需要申请苹果 App ID &#xff08;App的唯一标识&#xff09;生成证书请求文件申请开发(Development)证书和描述文件申请开发(Development)证书添加调试设备…

0基础开发EtherNet/IP:协议格式,JAVA、C#、C++处理

经过一阵倒腾&#xff0c;把CIP、Ethernet/ip协议搞到手 协议的概念和理论就不提及了&#xff0c;上网随便一搜索EtherNet/IP遍地都是。 直接将协议关键点列举出来吧。 更多协议资料 www.jngbus.com 通讯软件群 30806722 这里讲解的是TCP和UDP协议的格式&#xff0c;EtherN…

Ubuntu 20.04安装yum报错:E: Unable to locate package yum

直接上解决方案&#xff01; 1、选择自己对应的版本的源地址 注意需要选择跟系统版本一致的&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ 找到Ubuntu点击小问号&#xff0c;进去选择对应的版本&#xff0c;将下面的镜像复制到Linux系统的 /etc/apt/sourc…

Elasticsearch各种高级文档操作3

本文来记录几种Elasticsearch的文档操作 文章目录 初始化文档数据聚合查询文档概述对某个字段取最大值 max 示例对某个字段取最小值 min 示例对某个字段求和 sum 示例对某个字段取平均值 avg 示例对某个字段的值进行去重之后再取总数 示例 State 聚合查询文档概述操作实例 桶聚…

Spring Boot实现统一异常处理的技术解析

引言 在软件开发过程中&#xff0c;异常处理是非常重要的一环。一个好的异常处理机制可以帮助我们更好地定位问题&#xff0c;提高代码的可维护性和稳定性。Spring Boot作为一款轻量级的Java开发框架&#xff0c;提供了一种简单而高效的方式来实现统一异常处理。本文将详细介绍…