设置 wangeditor默认字号
时间: 2023-12-16 10:24:21 浏览: 165
可以通过修改配置项来设置wangeditor的默认字号。具体步骤如下:
1. 打开wangeditor.js文件,搜索"fontSizeConfigs",找到以下代码:
```
// 字号
var fontSizeConfigs = {
'x-small': '10px',
'small': '13px',
'normal': '16px',
'large': '18px',
'x-large': '24px'
};
```
2. 修改"normal"对应的字号为你想要的大小,例如修改为14px:
```
// 字号
var fontSizeConfigs = {
'x-small': '10px',
'small': '13px',
'normal': '14px',
'large': '18px',
'x-large': '24px'
};
```
3. 保存文件并重新加载页面,即可看到默认字号已经修改。
相关问题
wangeditor修改默认字号
想要修改 WangEditor 的默认字号,可以通过修改 CSS 样式表来实现。具体步骤如下:
1. 在 WangEditor 的源代码中找到 "wangeditor.min.css" 文件,并打开该文件。
2. 找到 `.w-e-text` 类,该类设置了编辑器中文本的基本样式。
3. 在该类中找到 `font-size` 属性,该属性设置了文本的默认字号。你可以修改该属性的值,以达到修改默认字号的目的。
例如,如果你想将默认字号修改为 16px,可以将 `.w-e-text` 类中的 `font-size` 属性修改为 `font-size: 16px;`。
需要注意的是,修改样式表文件可能会对编辑器的其他功能产生影响,因此建议在进行修改前备份相应的文件。
vue3wangeditor 自定义字号
要在 Vue3 WangEditor 中自定义字号,可以按照以下步骤进行操作:
1. 打开 Vue3 WangEditor 的配置文件,找到 `menus` 属性。
2. 在 `menus` 属性中找到 `fontSize` 对象,它表示字号菜单。将 `fontSize` 对象中的 `list` 属性修改为自定义的字号列表,例如:
```javascript
{
title: '字号',
type: 'dropMenu',
cssClass: 'wangeditor-menu-img-size',
// 自定义字号列表
list: [
{ value: '16px', name: '16' },
{ value: '18px', name: '18' },
{ value: '20px', name: '20' },
{ value: '24px', name: '24' },
{ value: '28px', name: '28' },
{ value: '32px', name: '32' }
]
}
```
3. 在 `menus` 属性中找到 `fontfamily` 对象,它表示字体菜单。将 `fontfamily` 对象中的 `cssClass` 属性修改为一个新的 CSS 类名,例如:
```javascript
{
title: '字体',
type: 'dropMenu',
// 修改 CSS 类名
cssClass: 'wangeditor-menu-img-font-family',
// 字体列表
list: [
{ value: '宋体', name: '宋体' },
{ value: '微软雅黑', name: '微软雅黑' },
{ value: '楷体', name: '楷体' },
{ value: '黑体', name: '黑体' },
{ value: '仿宋', name: '仿宋' },
{ value: '隶书', name: '隶书' }
]
}
```
4. 在 CSS 文件中定义新的 CSS 类名,例如:
```css
.wangeditor-menu-img-size .wangEditor-drop-menu li {
font-size: 14px;
cursor: pointer;
}
.wangeditor-menu-img-size .wangEditor-drop-menu li.selected {
background-color: #f0f0f0;
}
.wangeditor-menu-img-font-family .wangEditor-drop-menu li {
font-family: 'Microsoft YaHei',sans-serif;
cursor: pointer;
}
.wangeditor-menu-img-font-family .wangEditor-drop-menu li.selected {
background-color: #f0f0f0;
}
```
5. 保存文件并重新加载 Vue3 WangEditor,就可以看到自定义的字号和字体菜单了。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)