vue TinyMCE编辑器增加字体

最新推荐文章于 2025-11-29 11:34:28 发布
原创 最新推荐文章于 2025-11-29 11:34:28 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #编辑器

本文介绍如何在基于Element-Admin的项目中为富文本编辑器tinymce添加自定义字体选项。通过修改toolbar.js文件并配置index.vue中的初始化代码实现多种中英文字体的选择。
部署运行你感兴趣的模型镜像

1.首先在toolbar.js中加入fontselect

2.在index.vue （使用了element-admin）在window.tinymce.init中加入以下代码：

    font_formats: "Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n;宋体=宋体;黑体=黑体;仿宋=仿宋;微软雅黑=微软雅黑;楷体-GB2312=楷体-GB2312",

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

Tinymce 富文本
weixin_60172238的博客
05-29 614
宋体=\'宋体\';黑体=\'黑体\';language_url: "tinymce/langs/zh_CN.js", //引入汉化包。
vue 中tinymce的使用及配置
weixin_45915243的博客
01-19 1644
安装tinymce
TinyMCE富文本更改默认文字颜色、字号、字体
热门推荐
王红珠的博客
05-09 1万+
TinyMCE富文本更改默认文字颜色、字号、字体 一、content_style（直接为编辑区编写css） 在此选项内编写的css将直接注入到编辑器创建的iframe内部（在head内创建style），其创建的样式不会与内容一起被提交，可以放心使用。 tinymce.init({ selector: '#textarea1', content_style: "div {font-size:24px; color: #843FA1; font-famliy: impact,chicago;}"
不为人知的tinyMCE增加字体方法
追
09-29 6909
 前几天将字体写入editor_template.js后，发现不起作用。对此，网上并未有明确解释，因为涉及到汉字编码的utf8转换。今天查找出了问题原因：例如：黑体转换为utf8后成为黑体，包含分号，而js函数从字体字符串中取字体时，以“;”为分隔符，导致出错。修改分隔符为“|”，并且修改var fonts = tinyMCE.getParam("theme_advan
零基础玩转TinyMCE中文版：第一个富文本编辑器
最新发布
OnyxPanther23的博客
11-29 849
TinyMCE默认工具栏很丰富，但新手可能只需要基础功能。保留常用功能如加粗、斜体添加图片上传按钮配置字体和段落样式记得为每个功能按钮添加tooltip提示，这样用户才知道每个图标的作用。
Vue Tinymce富文本组件添加自定义字体项
gdgztt的专栏
12-31 1929
Vue Tinymce富文本组件添加自定义字体项
vue项目使用tinymce添加新字体，后端配置及前端相关样式设置
qq_36611673的博客
12-04 1473
后台配置： 1.首先在toolbar.js中加入fontselect 2.在index.vue （使用了element-admin）在window.tinymce.init中加入以下代码： font_formats: "Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n;宋体=宋体;黑体=黑体;仿宋=仿宋;微软雅黑=微软雅黑;楷体-GB2..
Tinymce 增加字体字号设置
且听风吟的博客
03-24 6945
toolbar字段增加 fontsizeselect 和 fontselect 。
Vue3中使用TinyMce编辑器
qq_46083602的博客
03-12 1364
在打包过程中遇到了TinyMce样式未打包进去，线上部署后加载不出来，后面将样式文件放入public目录下载，页面重新引入，最后打包成功。
vue使用tinymce文本编辑器导入导出word
QwQ621的博客
08-07 1714
为了实现类似word编辑，看了很多文章最后选择了tinymce文本编辑器
VUE2框架下TINYMCE编辑器实现Word图片自动上传并保留样式的技术指南
2501_90646777的博客
02-18 1313
要求：开源，免费，技术支持编辑器：TinyMCE需求：复制粘贴word内容图片,图文混排,图片转存前端：vue,vue2-cli,vue3-cli后端：java,jsp,springboot,asp.net,php,asp,.net core,.net mvc,.net form平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
tinymce编辑器组件
07-04
Tinymce编辑器组件是一款强大的富文本编辑工具，广泛应用于网页内容编辑、CMS系统以及各种Web应用程序中。它提供了丰富的功能，使用户能够像在桌面环境下一样编辑文本，创建复杂的HTML内容。下面我们将深入探讨...
vue中引入TinyMCE实现富文本编辑器
小球的博客
02-28 3982
vue tinymce 富文本编辑器
tinyMCE新增下载的字体
前端程序猿的博客
02-27 2635
三、在tinyMCE配置里找到font_formats后将你的新字体放入'新罗马字体=TimeNewRoman;注意每个字体用分号隔开。
tinymce添加新的字体文件使用
speechless fish 的博客
07-13 2611
一、找到以下三个css文件,这三个css文件是创建富文本的时候引入的css 1、public/tinymce/skins/lightgray/content.min.css 2、public/tinymce/skins/content/default/content.min.css 3、public/tinymce/skins/lightgray/skin.min.css 在里面像html一样引入字体文件即可 @font-face { font-family: FangSongGB2312
tinymce增加字号设置
hong836717428的博客
11-16 3812
toolbar1字段增加fontsizeselect 如增加前： toolbar1: " newnote print preview | undo redo ", 增加后: toolbar1: " newnote print preview | undo redo | fontsizeselect", 然后添加fontsize_formats属性： fontsize_formats: "8...
百度editor编辑器添加新字体
weixin_34343689的博客
10-26 2460
Ueditor本身自带11种字体，添加如下： 1、找到文件 ueditor/lang/zh-cn/zh-cn.js ，添加字体 'fontfamily': { 'songti': '宋体', 'NSimSun':'新宋体', 'SimSun': '仿宋', 'FangSong_GB2312': '仿宋_GB2312',...
tinymce vue富文本编辑器 行高、字间距、字体设置
jia2799897415的博客
07-14 9421
tinymce vue富文本编辑器 行高、字间距、字体设置
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 1080
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue项目中集成Tinymce编辑器的实践指南
使用这个组件包，开发者可以轻松地在Vue项目中添加和管理TinyMCE编辑器实例。 - **快速集成：**允许Vue开发者快速在项目中引入TinyMCE编辑器。 - **双向数据绑定：**在Vue环境中提供了更紧密的集成方式，支持Vue的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值