首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在tinymce编辑器中添加新字体

在 tinymce 编辑器中添加新字体可以通过以下步骤实现:

  1. 获取所需字体文件:首先,需要获取所需字体的相关文件,通常包括字体文件(.ttf、.otf 等格式)和字体样式表(.css 文件)。
  2. 将字体文件上传至服务器:将字体文件上传至服务器,确保可以通过 URL 访问到这些文件。
  3. 自定义 tinymce 样式表:在 tinymce 的配置中,可以通过 content_css 参数指定自定义的样式表文件。在该样式表文件中,可以使用 @font-face 规则引入字体文件,并为相应的 CSS 类或标签指定字体。
  4. 例如,假设字体文件为 myfont.ttf,样式表文件为 myfont.css,可以在 myfont.css 中添加以下代码:
  5. 例如,假设字体文件为 myfont.ttf,样式表文件为 myfont.css,可以在 myfont.css 中添加以下代码:
  6. 配置 tinymce 编辑器:在 tinymce 的配置中,可以通过 content_css 参数指定自定义的样式表文件,例如:
  7. 配置 tinymce 编辑器:在 tinymce 的配置中,可以通过 content_css 参数指定自定义的样式表文件,例如:
  8. 使用自定义字体:在需要使用自定义字体的地方,可以通过添加相应的 CSS 类或标签来应用该字体。以 CSS 类为例,可以在编辑器的内容中添加以下代码:
  9. 使用自定义字体:在需要使用自定义字体的地方,可以通过添加相应的 CSS 类或标签来应用该字体。以 CSS 类为例,可以在编辑器的内容中添加以下代码:
  10. 这样,编辑器中的文本就会应用自定义字体。

推荐的腾讯云相关产品:腾讯云字体库(Tencent Cloud Font)是腾讯云提供的一项字体服务,提供了丰富的中英文开源字体供开发者使用。您可以通过访问腾讯云字体库官网(https://cloud.tencent.com/product/font)了解更多信息和使用方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在系统添加字体(添加字体到系统)

笔者最近在使用win10自带的OneNote笔记本记笔记的时候,发现笔者电脑中没有华文魏这个字体,最开始以为是OneNote不带有这个字体,经过一段时间的收集资料后发现,是笔者电脑win10系统不带有这个字体...,现将有关概念和字体安装方法做一下记录。...字体是win10系统自己带有的,其他的软件自能从win10系统中用调用,而不是说字体是某些软件自带的,比如如果office的PPT中含有华文魏这个字体,那么OneNote中就必然也含有华文魏这个字体...,并不会存在一个软件有这个字体而另一个软件不含有这个字体的情况。...字体安装方法: 第一步,去百度上搜索字体并下载,如下图所示,搜索的时候就搜索xx字体即可,然后自行选择一个网站并下载: 要注意下载的文件后缀名为ttf格式,如图所示: 第二步,双击打开下载的文件

3.9K30

何在React Native添加自定义字体

在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用添加自定义字体的方法。...向 React Native CLI 项目添加自定义字体 对于我们的项目,我们将研究如何通过构建使用Google字体的基础应用程序,将自定义字体添加到React Native CLI项目中。...让我们看看输出: 在Expo中使用自定义字体的React Native 在这一部分,我们将学习如何在Expo中使用自定义字体。...性能影响:在React Native应用程序添加自定义字体时,请注意它们的文件大小(以kb/mb为单位)。大型字体文件可能会显著增加应用程序的加载时间,特别是在加载自定义字体时。...总结 本文所探讨的,将自定义字体集成到React Native应用程序不仅仅是技术上的提升,更是一种改善用户体验的策略性方法。

49910
  • 何在keras添加自己的优化器(adam等)

    Anaconda3\envs\tensorflow-gpu\Lib\site-packages\tensorflow\python\keras 3、找到keras目录下的optimizers.py文件并添加自己的优化器...找到optimizers.py的adam等优化器类并在后面添加自己的优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...Adamsss, self).get_config() return dict(list(base_config.items()) + list(config.items())) 然后修改之后的优化器调用类添加我自己的优化器...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己的优化器...(adam等)就是小编分享给大家的全部内容了,希望能给大家一个参考。

    45K30

    【专业技术】如何在Linux添加的系统调用

    Linux操作系统作为自由软件的代表,它优良的性能使得它的应用日益广泛,不仅得到专业人士的肯定,而且商业化的应用也是如火荼。...在Linux,大 部分的系统调用包含在Linux的libc库,通过标准的C函数调用方法可以调用这些系统调用。那么,对Linux的发烧友来说,如何在Linux增 加的系统调用呢? ?...2 添加的系统调用   如果用户在Linux添加的系统调用,应该遵循几个步骤才能添加成功,下面几个步骤详细说明了添加系统调用的相关内容。   ...(1) 添加源代码   第一个任务是编写加到内核的源程序,即将要加到一个内核文件中去的一个函数,该函数的名称应该是的系统调用名称前面加上sys_标志。...假设加的系统调用为mycall(int number),在/usr/src/linux/kernel/sys.c文件添加源代码,如下所示: asmlinkage int sys_mycall(int

    2.3K40

    WordPress 3.9+的 TinyMCE 4 编辑器增强开发

    从WordPress 3.9版本后,WordPress 默认的编辑器 TinyMCE 随之升级到了版本4,带来的问题以前在默认编辑器上的增强开发的效果可能失效。...这篇文章旨在破旧立新,通过几个例子给大家带来几个TinyMCE4 编辑器的增强开发技巧。...还原字体种类及大小选择按钮 默认的话,字体种类及大小这两个按钮没有添加TinyMCE 编辑器,通过下面的函数,就可以实现有下拉形式的字体种类及大小这两个按钮。...除了默认的字体,根据个人需求你可能需要添加其他字体,比如说Google font(不过在天朝嘛目前貌似有点难连接这个)上的字体,那么你可以用下面的代码注册一个自定义字体。...str_replace( ',', '%2C', $font_url ) ); } } add_action( 'init', 'wpex_mce_google_fonts_styles' ); 增加编辑器的下拉菜单功能

    99660

    WordPress自带TinyMCE编辑器相关功能增强

    WordPress 默认的那个编辑器叫做TinyMCETinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。...";')); 添加编辑器默认内容(编辑器内可见) 新建文章后编辑器里的内容默认是空的,有些朋友做的是WordPress主题站、插件站或单纯的下载站,一些标准的格式化的文章每次都会输入“主题名称”、“主题作者...'); 添加更多的HTML标签(慎用) 此功能请慎用,因为WordPress自带的TinyMCE编辑器会默认过滤掉不符合XHTML 1.0的html标签,不排除某些情况下也可能会用到这些标签,所以把方法放出来供大家参考吧...)、上标(sub)、下标(sup)、字体颜色(forecolor)、字体背景色(backcolor)、特殊符号(charmap)、隐藏按钮显示开关(wp_adv)、隐藏按钮区起始部分(wp_adv_start..."); //添加到工具栏的第三行 让编辑器支持中文拼写检查 WordPress自带TinyMCE编辑器默认对英文拼写进行检查,怎么样才能让其支持中文拼写检查呢?

    2.8K50

    WPJAM TinyMCE:一键增强 WordPress 经典编辑器

    现在大家都开始使用古腾堡编辑器了,特别是 WordPress 最新几个版本的发行,大部分更新都围绕古腾堡编辑器,不过在一些地方还是有用到经典编辑器的,比如我们花生小店的商品编辑,就用不到古腾堡那么高级的编辑器...经典编辑器基本够用,但是有些格式化工具缺失,还是挺烦人,所以我们为了商家在花生小店的时候方便编辑商品,我们做了一个 WordPress 经典编辑器增强插件,为了方便就叫做 WPJAM TinyMCE。...添加编辑器按钮 WPJAM TinyMCE 这个插件首先增加几个样式按钮:下划线,背景颜色,两端对齐等,增加了常用的 WordPress 内容分页按钮,还支持设置字体和大小,最后还把按钮布局调整了一下,...安装 WPJAM TinyMCE 之前的编辑器: 安装 WPJAM TinyMCE 之后的编辑器: 新增插入表格功能 我增加了 TinyMCE 的表格插件,让大家在编辑器就能够直接插入表格: 还支持表格的行...现在在屏幕截图之后,只需要按快捷键就能粘贴到编辑器里面,然后文章保存的时候自动把图片上传到媒体库。非常方便快捷。

    81510

    发现一个超好用的文本编辑器!!!

    前言: 之前用的文本编辑器是mavonEditor,总是觉得看着md格式的内容怪怪的,于是乎发现了这么一款超好用的文本编辑器——TinyMCE 如何使用:(vue项目中引入TinyMCE) 一、下载依赖...中找到 tinymce/skins 文件夹拷贝出来放到我们的项目中,vue-cli3以上的版本放到public(2版本放到static文件夹里) 截图中的zh_CN.js是所需要汉化包 代码点此下载...-- * @File: index * @Author: PHY * @Date: 2022/1/6 18:03 * @Description: tinymce富文本编辑器 --> <template...skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作,所以要设置一个skin_url指向之前复制出来的skin...隐藏最上方menu fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小

    92120

    淘宝发布开源编辑器:KISSY Editor

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor...目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件,目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件...来自淘宝的开源编辑器:KISSY Editor KISSY Editor 的基本功能有: 含有编辑器的基本功能,字体,颜色,大小,粗细,下划线,插入图片,链接等 该编辑器的最大特点是小巧精简,仅依赖...后不超过 50k,gzip 压缩后不超过 20k 支持所有 A 级浏览器 KISSY Editor 是基于 MIT 协议发布的开源项目,所以无论是个人开发还是商业应用,都可以免费使用,集成到自己开发的程序

    62920

    WordPress怎么自定义默认电子邮件名称和地址?

    wordpress编辑器怎么增加中文字体?...WordPress自带的TinyMCE编辑器,对于一般的文字编辑已足够了,但还是有童鞋希望它功能更多,所以诞生了各种编辑器增强插件,其实不用插件也可以为默认编辑器增加各种功能,下面的方法可以为编辑器增加选择中文字体功能...1、将如下代码加到当前主题的 functions.php 模板文件: function custum_fontfamily($initArray){ $initArray['font_formats...幼圆';"; return $initArray;}add_filter('tiny_mce_before_init', 'custum_fontfamily'); 2、WordPress默认TinyMCE...编辑器并没有选择字体功能,所以还需要把下面代码也一同加到 functions.php 模板文件: function enable_more_buttons($buttons) {$buttons[]

    66600

    解决新版wordpress打开速度超级慢的问题

    第一、取消谷歌Open sans字体加载(wp更新不受影响) 1、添加代码法 通过禁用谷歌字体,把主题中的function.php文件用ftp下载文件下载到本地;同时,建议将服务器上function.php...文件改名为function.php.backup 作为备份,使用你常用的文本编辑器,比如 EverEdit 编辑器,打开 function.php文件,添加下面代码,保存,用ftp上传覆盖即可 function...Fonts 服务:wp-includes/script-loader.phpwp-includes/js/tinymce/themes/advanced/skins/wp_theme/dialog.csswp-content.../js/tinymce/plugins/compat3x/css/dialog.csswp-content/themes/twentytwelve/functions.phpwp-content/themes...很显然,如果我们开启这项功能,当 WordPress 发布的维护更新的时候(比如 WordPress 3.9.2),会自动覆盖掉我们所做的修改。这是我们不希望发生的事情。

    5.6K30

    vuetify富文本编辑器_vue富文本编辑器的使用

    由于该编辑器升级到了5.0版本,会导致下文中的某些文件找不到的情况,但是封装思路是相同的,如需继续使用请使用下面的版本再次尝试 “@tinymce/tinymce-vue”: “^1.1.0” “tinymce...”: “^4.8.5” vue cli 3 + tinymce5.0版本整合参考:点击前往 最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置...,//顶部菜单栏显示 } 扩展插件 默认的编辑器只有基本功能,如果还需要上传图片,插入表格之类的功能就需要添加插件 添加上传图片和插入表格的插件 import 'tinymce/plugins/image...$emit('onClick', e, tinymce) }, //可以添加一些自己的自定义事件,清空内容 clear() { this.myValue = '' } }, watch: {...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.8K10

    WordPress 4.6 发布:原生字体和更新更简洁

    原生字体 WordPress 4.6 弃用了 Open Sans 字体,采用原生的字体,现在后台使用应该更加快速了,特别是国内用户来说,应该不会再有打不开后台的情况发生了。...编辑器改机 内链检查 现在 WordPress 会在你写文章的时候检查你输入的链接是否存在。...更强健的HTTP请求API:WordPress 改进了 HTTP 标准支持,添加了不区分大小写的 headers,支持并行 HTTP 请求,以及支持国际化域名。...WP_Term_Query 和 WP_Post_Type:的 WP_Term_Query 类库可以更加方便去查询 term 信息,的 WP_Post_Type 对象可以更加简洁操作 post type...Meta 注册 API:现在可以支持 types,描述,并且可直接用在 REST API 。 语言包:只要社区上有翻译了,WordPress 就会安装和使用主题或者插件的最新语言包。

    45910

    WordPress主题开发,从入门到精通。

    disable-custom-font-sizes:禁用快编辑器自定义字体大小。 editor-color-pallete:配置块编辑器调色板。...editor-font-sizes:配置块编辑器字体大小。 editor-styles:配置块编辑器样式。 wp-block-styles:启用默认块编辑器样式。...3.tinymce.Editor,编辑器核心API 官方文档:https://www.tiny.cloud/docs-4x/api/tinymce/tinymce.editor selection,代表编辑器内被选中的内容的对象...(),设置被选中对象的内容 windowManager,可打开一个的窗口或者对话框;https://www.tiny.cloud/docs-4x/api/tinymce/tinymce.windowmanager...capabilities ); //例子 add_role( 'document_uploader', 'Document Uploader', array( 'organize_document' ) ); 添加了一个的角色叫做

    10.6K40

    Vue富文本编辑器_前端富文本编辑器插件

    富文本编辑器 博客(coder的自我修养)原文链接:http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器...这两个组件安装完之后,在public目录下新建文件夹static/tinymce,目录建好后(如果没有public文件,就在index.html同级的static创建tinymce文件),找到node_modules.../tinymce文件夹内再新建langs文件夹,用来存放我们下载的中文语言包,如下图所示 3、组件编写 新建一个组件,在此我把它命名为imcoder-tinymce.vue 在组件我们引入tinymce...({ }); // 这里传个空对象就可以了 }, 如果出现以下报错,则可能是路径配置错误,仔细检查路径是否写错 如果出现这种状况,则是因为没有引入字体图标组件 手动引入就好 import "tinymce...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    3.3K20

    Django Admin后台管理

    但在模型类为字段方法设置第一个参数verbose_name可以实现自定义标题,ame = models.CharField(verbose_name='学校名', max_length=20)。...5.其他 富文本编辑器 后台管理员如果需要在后台编辑带样式的文字,编辑对商品的详细信息描述,就需要使用富文本编辑器。这里以tinymce为例在Django Admin后台中如何使用富文本编辑器。...安装tinymce pip install django-tinymce==2.6.0 在项目的settings.pyINSTALLED_APPS元组中加入’tinymce’ INSTALLED_APPS...', # 富文本编辑器 ) 在项目的settings.py最后位置添加tinymce的配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced',...)), ..., url(r'^tinymce/', include('tinymce.urls')), # 富文本编辑器 随后就可在模型类中使用该字段,在应用的models.py添加如下内容

    2.8K10
    领券