Tinymce-自定义icon图标、新增图标

最新推荐文章于 2025-04-08 23:14:08 发布

bin彬彬彬

最新推荐文章于 2025-04-08 23:14:08 发布

阅读量3.3k

点赞数

分类专栏： Tinymce 文章标签：前端 java html javascript es6

本文链接：https://blog.csdn.net/weixin_43402720/article/details/128939199

版权

本次自定义图标是基于"version": "6.3.1"

我们在使用Tinymce时，会遇到更换icon图标的需求，或者加入新的图标。本文主要介绍如何更换图标，已经如何新增图标。

1、更换图标

最简单的方法，适合自定义替换小部分图标

插件源码中icon.js是Tinymce用来存放svg格式图标的文件，打开这个文件可以看到

比如我这里把原来的图标注释了，更换成UI提供的svg内容。如何找到自己想要替换的图标，可以看这边文章，找到对应的图标名称

tinymce（Version: 5.0.4）内含icon对照表_月晕而风础润而雨的博客-CSDN博客_tinymce icon

那么如果要自定义全套图标的话，你可以手动替换，当然比较费时费力。Tinymce官方提供了自定义全套图标的方法：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bin彬彬彬

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

自定义修改tinymce工具栏已有图标，自定义tinymce工具栏图标

G佳伟

08-21

1250

icons_url: 'static/tinymce/js/customIcons.js', // 指向你的自定义图标JS文件icons: 'customIcons', // 使用自定义图标集icons: {

jQuery学习笔记

丑小鸭变黑天鹅的博客

03-02

1337

jQuery学习笔记一、初识jQuery1、是什么？2、为什么使用？3、如何使用二、jQuery的使用1、jQuery函数：$ / jQuery2、jQuery函数的使用1、核心函数2、核心对象3、使用jQuery核心函数1、选择器2、基本选择器3、层次选择器4、过滤选择器5、常见效果-表格隔行变色6、表单选择器4、工具方法5、常见效果-多Tab点击切换6、一、初识jQuery 1、是什么？一个JS函数库: write less, do more 封装简化DOM操作(CRUD) / Ajax 2、为什

参与评论您还未登录，请先登录后发表或查看评论

记一次tinymce自定义图标经历

qq_43520928的博客

07-12

5501

tinymce简介 tinymce是一个很强大的富文本编辑器，可自定义图标自定义工具等等，这篇文章主要讲如何自定义图标。刚开始我在中文网站上看到有自定义图标的demo但是没有讲如何做的完整步骤，有点不明白，后来发现是自己领悟太低了，接下来我就把我自定义图标的完整过程写出来。 tinymce官网英文还可以建议看英文官网更全面中文官网：http://tinymce.ax-z.cn/ 英文官网：https://www.tiny.cloud/docs/ 根据中文官网快速更换默认图标第一步：去中文

Tinymce编辑器怎么插入自定义图标

mengameng97的博客

03-14

214

icons_url: '/manage/tinymce/icon/customIcon.js', // 指向你的自定义图标JS文件。在自己代码存放的tinymce目录下新建一个目录icon/customIcon.js。icons: 'customIcons', // 使用自定义图标集。然后在自定义模块或者菜单的时候就可以使用自定义图标了。将icon换成自定义图标名字即可。

tinymce编辑器如何自定义插件（vue）

byebukesi的博客

08-02

5120

tinymce中自定义插件，包括注册菜单，更改图标，插件编写

tinymce（Version: 5.0.4）内含icon对照表

qq_34114082的博客

05-09

4976

对照表页面代码： <html> <head></head> <body> <table style="border-collapse: collapse; width: 100%; border-color: #95A5A6;" border="1" cellpadding="8"> <tbody> ...

tinyMCE:向 WordPress TinyMCE 添加自定义按钮

05-30

微小的MCE 向 WordPress TinyMCE 添加自定义按钮

vue component 文件夹_注册vue项目公共组件就是这么简单

weixin_39939303的博客

12-10

1039

前言：什么是vue公共组件？vue公共组件指的是将组件注册于全局，使只能够在整个项目中通过关键词中便可直接输出，不需要在组件中重复注册，减少代码量，同时也可以使整个项目更加简洁美观，特别在需要在项目中需要重复使用的组件这是非常有必要的，如富文本编辑器，通过全局注册你可以在需要的地方进行使用即可，简单方便。如在EuiAdmin项目中在组件中需要的地方写入代码便可显示tinymce富文本编辑器，然后通...

tinymce 使用报错 icons.js Unexpected token ‘＜‘

m0_48557659的博客

10-12

1804

使用 tinymce 报错 icons.js Unexpected token '

Tinymce 编辑器添加自定义图片管理插件

weixin_30533797的博客

09-30

1305

在使用Tinymce的过程中需要用到图片上传功能，而提供的上传插件在上传文件后是给了一个连接地址，就想用户需要什么图片，不能用最直观的方式表现出来么！虽然官网上也有一个文件管理的插件moxiemanager，可奈何他是收费的！https://www.tiny.cloud/docs/plugins/moxiemanager/ 然后就打算自己弄一个，其实实现效果起来很简单，就只是做了一个类型相册...

TinyMCE自定义上传图片

12-04

tinyMCE编辑器，包含自定义上传图片插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示

解决tinymce图标不显示和notfound问题

guochengabcd的博客

08-05

3503

import 'tinymce/icons/default/icons.min.js' 添加上面这段话即可解决

tinymce-vue——在Vue项目中应用及实现自定义功能（插入自定义卡片、修改元素支持属性等）

a19802007852的博客

05-19

8146

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统，wangEditor3做为其中的富文本编辑器需求：在富文本中插入自定义样式的卡片最终效果：接下来开始了解我是如何实现这个功能的吧~ step1：安装与引用（参考①） npm install @tinymce/tinymce-vue -S npm install tinymce -S 在editor.vue中使用 <template> <div class="editor-wrapper">

vue中使用Tinymce升级使用，图标库的使用，多图片上传，图片格式，大小的判断

热门推荐

fruge365的博客

04-12

2万+

【vue】 vue2 中使用 Tinymce 富文本编辑器

在vue项目中使用tinymce并实现自定义的图片上传

qq_45772772的博客

07-02

3109

在vue项目中使用tinymce并实现自定义的图片上传

tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器

chendongdong1的博客

06-08

1万+

博客（coder的自我修养）原文链接：http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。 TinyMCE的优势：开源可商用，基于LGPL2.1 插件丰富，自带插件基本涵盖日常所需功能接口丰富，可扩展性强，有能力可以无限拓展功能界面好看，符合现代审美提供经典、内联、沉浸无干

@tinymce/tinymce-vue自定义

12-28

### 使用 `@tinymce/tinymce-vue` 组件库自定义配置和样式的指南 #### 安装依赖包为了确保安装的是兼容 Vue 3 版本的 TinyMCE 插件，需执行如下命令来安装指定版本的插件[^2]: ```bash npm install --save "@tinymce/tinymce-vue@^4" ``` #### 配置 Tinymce 编辑器选项 TinyMCE 提供了丰富的编辑器配置项，允许开发者根据需求调整功能特性。这些配置可以通过 props 属性传递给 `<editor>` 组件。 ```javascript import { defineComponent } from 'vue'; import Editor from '@tinymce/tinymce-vue'; export default defineComponent({ components: { Editor, }, data() { return { editorConfig: { height: 500, // 设置高度 menubar: false, // 是否显示菜单栏 plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help' } }; } }); ``` #### 添加自定义样式对于样式定制方面，可以利用 CSS 或 SCSS 文件引入全局或局部样式规则。如果希望仅针对特定实例应用特殊样式，则可以在模板内通过类名控制： ```html <template> <div class="custom-editor"> <Editor :init="editorConfig"/> </div> </template> <style scoped lang="scss"> .custom-editor .tox-tinymce{ border-radius:8px; } /* 更多个性化样式 */ </style> ``` 此外，还可以修改主题颜色等更深层次的设计元素，这通常涉及到覆盖默认的主题文件或是编写额外的 LESS/SASS 变量重写逻辑[^1]。