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

最新推荐文章于 2023-08-02 16:24:44 发布
最新推荐文章于 2023-08-02 16:24:44 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： Tinymce 文章标签： 前端 java html javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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元/天 解锁文章
bin彬彬彬
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图标添加--icon 添加
weixin_54721820的博客
04-16 166
1.效果展示 2.源代码展示 ①vue模块 <view class="container" style="padding: 32rpx 0;margin-bottom: 24rpx;"> <view class="overbold" style="padding: 0 32rpx;">常用服务</view> <view class="func-list"> <template v
TinyMCE自定义上传图片
12-04
tinyMCE编辑器，包含自定义上传图片插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示
tinyMCE:向 WordPress TinyMCE 添加自定义按钮
05-30
微小的MCE 向 WordPress TinyMCE 添加自定义按钮
vue中引用tinymce图标不显示解决方法
一片天空
07-29 4426
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客，按照上面步骤可以实现tinymce富文本编辑器的封装和使用。https://www.cnblogs.com/zhongchao666/p/11142537.html在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面（vue） 在node_modules里面找到tinymce,将skins目录复制到static/tinymce里面（nuxt） 由于公司需要使用nuxt.js，再次使.
记一次tinymce自定义图标经历
qq_43520928的博客
07-12 4691
tinymce简介 tinymce是一个很强大的富文本编辑器，可自定义图标自定义工具等等，这篇文章主要讲如何自定义图标。刚开始我在中文网站上看到有自定义图标的demo但是没有讲如何做的完整步骤，有点不明白，后来发现是自己领悟太低了，接下来我就把我自定义图标的完整过程写出来。 tinymce官网 英文还可以建议看英文官网更全面 中文官网：http://tinymce.ax-z.cn/ 英文官网：https://www.tiny.cloud/docs/ 根据中文官网快速更换默认图标 第一步：去中文
tinymce（Version: 5.0.4）内含icon对照表
qq_34114082的博客
05-09 4572
对照表页面代码： <html> <head></head> <body> <table style="border-collapse: collapse; width: 100%; border-color: #95A5A6;" border="1" cellpadding="8"> <tbody> ...
tinymce编辑器如何自定义插件（vue）
byebukesi的博客
08-02 3302
tinymce中自定义插件，包括注册菜单，更改图标，插件编写
解决tinymce图标不显示和notfound问题
guochengabcd的博客
08-05 3271
import 'tinymce/icons/default/icons.min.js' 添加上面这段话即可解决
tinymce-vue——在Vue项目中应用及实现自定义功能（插入自定义卡片、修改元素支持属性等）
a19802007852的博客
05-19 7645
背景：vue-cli3 + ant-design-vue 搭建的后台管理系统，wangEditor3做为其中的富文本编辑器 需求：在富文本中插入自定义样式的卡片 最终效果 ： 接下来开始了解我是如何实现这个功能的吧~ step1：安装与引用（参考①） npm install @tinymce/tinymce-vue -S npm install tinymce -S 在editor.vue中使用 <template> <div class="editor-wrapper">
tinymce-custom-class:TinyMCE 自定义类插件
05-29
在我们的例子中，这个文件可能命名为`tinymce-custom-class.js`。在这个文件中，我们需要注册插件，定义其命令和UI元素。例如： ```javascript tinymce.PluginManager.add('custom_class', function(editor, url) {...
tinymce-react：官方TinyMCE React组件
02-06
TinyMCE React官方组件 关于 这个包是的薄包装，可以更轻松地在React应用程序中使用。...您是否发现了tinymce-react问题或有功能要求？ 打开一个，让我们知道或提交。 注意：有关TinyMCE的问题，请访问。
tinymce-formatpainter-skwang:适用于tinymce的免费formatpainter插件
03-04
tinymce-formatpainter-skwang 描述 适用于tinymce的免费formatpainter（格式刷）插件 用法 tinymce . init ( { selector : '#tinymce' , plugins : [ 'formatpainter' ] , toolbar : "formatpainter" , } ) ;
tinyMCE-mention:用于 tinyMCE 所见即所得编辑器的 MentionAutocomplete 插件
08-04
bower install tinymce-mention 或者将插件的源代码复制到你的 tinyMCE 安装的 plugins 目录中。 将提及插件添加到您的 tinyMCE 配置中。 plugins : "advlink, paste, mention" , 为提及插件添加配置选项。 ...
tinymce-highcharts-editor
06-23
【tinymce-highcharts-editor】是一个将流行的富文本编辑器TinyMCE与强大的数据可视化库Highcharts相结合的项目。这个项目的主要目标是使用户能够在TinyMCE编辑器内部创建和编辑Highcharts图表，从而提供一种直观且...
html中编辑器制作goole图标,TinyMCE 编辑器添加 FontAwesome 自定义图标按钮
weixin_39735005的博客
06-04 405
一为博客后台一直使用传统编辑器，就是 TinyMCE 编辑器，那个古腾堡用不惯 然后想到主题编辑器添加一些段代码的按钮，而默认的 TinyMCE 编辑器图标就只有几个，完全不满足我折腾的心，就谷歌了一下有没有方法，还真有，这里记录改进分享一下 。比如添加一个“插入音乐播放器”的按钮，TinyMCE 编辑器图标库没有音乐图标，我们就可以使用其他的图标库，这里我使用 FontAwesome 图...
tinymce 使用 报错 icons.js Unexpected token ‘＜‘
m0_48557659的博客
10-12 1540
使用 tinymce 报错 icons.js Unexpected token '
自定义tinymce富文本编辑器列表
李大人的博客
05-16 1424
自定义inymce富文本编辑器列表，可以通过以下几个步骤实现： 1、配置中，加入lists和advlist插件，toolbar加入有序列表numlist或者无序列表bullist。 plugins: 'lists, advlist', toolbar: 'bullist numlist' 2、自定义列表的样式，在配置对象中，有序列表设置advlist_number_styles属性，无序列表设置advlist_bullet_styles属性。 advlist_bullet_styles: 'd
tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
热门推荐
chendongdong1的博客
06-08 1万+
博客（coder的自我修养）原文链接：http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。 TinyMCE的优势： 开源可商用，基于LGPL2.1 插件丰富，自带插件基本涵盖日常所需功能 接口丰富，可扩展性强，有能力可以无限拓展功能 界面好看，符合现代审美 提供经典、内联、沉浸无干
vue3 + ts + tinymce 简单使用~
weixin_59167537的博客
11-04 1412
vue使用tinymce
@tinymce/tinymce-vue
最新发布
09-14
@tinymce/tinymce-vue 是一个用于集成 TinyMCE 编辑器到 Vue.js 应用程序中的官方包。它提供了一个 TinyMCEVue 组件，可以方便地将 TinyMCE 编辑器添加到 Vue 组件中。 通过使用 @tinymce/tinymce-vue，可以轻松地在 Vue.js 应用程序中实现富文本编辑功能。它提供了许多配置选项和事件处理器，以便根据需求自定义编辑器的行为。 要使用 @tinymce/tinymce-vue，首先需要安装它作为依赖项。可以使用 npm 或 yarn 进行安装： ``` npm install @tinymce/tinymce-vue ``` 然后，可以在 Vue 组件中引入并使用 TinyMCEVue 组件： ```javascript import { Editor } from '@tinymce/tinymce-vue'; export default { components: { 'tinymce-editor': Editor }, // ... } ``` 在模板中，可以像使用任何其他组件一样使用 TinyMCEVue 组件： ```html <tinymce-editor v-model="content" :init="{ height: 500, plugins: 'link image code', toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help' }" ></tinymce-editor> ``` 这只是一个简单的示例，你可以根据实际需求进行更多的配置和自定义。 希望这个回答对你有帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值