开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

验证多个TinyMCE编辑器

首先，确保您已经正确安装了 TinyMCE 插件，并激活了富文本编辑器功能。接下来，您需要按照以下步骤对多个 TinyMCE 编辑器进行验证：

安装和配置 TinyMCE
- 前往 TinyMCE 官网 (https://www.tinymce.com/) 下载插件。
- 将插件上传到 WordPress 插件目录。
- 在 WordPress 后台激活 TinyMCE 插件。
- 配置插件，例如设置媒体库 URL、允许使用的 HTML 标签等。
创建多个编辑器实例
- 使用 JavaScript 创建多个 TinyMCE 编辑器实例。例如：

var editors = [];

editors.push(new TinyMCE({

   selector: '#editor1',

   theme: 'modern',

   plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media table contextmenu paste', 'save table textcolor colorpicker textpattern'],

   toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | print preview media | forecolor backcolor emoticons',

}));

editors.push(new TinyMCE({

   selector: '#editor2',

   theme: 'modern',

   plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media table contextmenu paste', 'save table textcolor colorpicker textpattern'],

   toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | print preview media | forecolor backcolor emoticons',

}));

设置全局样式和插件
- 在 WordPress 主题的 CSS 文件中添加全局样式。例如：

body {

   font-family: Arial, sans-serif;

}

#editor1, #editor2 {

   width: 100%;

   height: 200px;

   padding: 10px;

   box-sizing: border-box;

}

如有必要，可以添加自定义样式。

在 WordPress 内容编辑器中添加 TinyMCE 编辑器
- 打开 WordPress 文章或页面编辑器（例如：Gutenberg），在您想要添加编辑器的地方，点击 "添加区块"，然后选择 "TinyMCE 高级编辑器"。
- 拖放 TinyMCE 编辑器到您想要的位置。

现在，您已经成功在 WordPress 中添加了多个 TinyMCE 编辑器。您可以根据需要进一步定制它们，使用 CSS 调整样式，添加更多插件等。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue富文本编辑器tinymce

一、概述 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。...它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。...官方链接：https://panjiachen.github.io/vue-element-admin-site/zh/ 我尝试直接使用tinymce模块使用会有各种问题，打开页面无法加载出富文本编辑器或者出现其他问题...注意：vue-element-admin已经集成好了tinymce，接来下我会如何介绍将tinymce移植到一个新的vue项目中。...安装tinymce npm install @tinymce/tinymce-vue -S npm install tinymce -S 安装sass npm install node-sass@4.14.1

2.5K5 0

在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片

近日我在百度文库上发现有人搬运我这篇文章去盈利，接下来我改成vip文章了，我自己免费分享，别个赚钱，十分不爽 1.安装 # npm install tinymce -S 2.把node_modules...\tinymce里面的文件包括tinymce文件夹全部复制到static文件夹下面，如下图 3.在mian.js中引入tinymce（也可以在组件中引入）发布者：全栈程序员栈长，转载请注明出处

1.4K2 0

使用 TinyMCE 编辑器中文语言配置过程

使用 TinyMCE 编辑器中文语言配置过程 ---- TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。...TinyMCE的优势：开源可商用，基于LGPL2.1 插件丰富，自带插件基本涵盖日常所需功能接口丰富，可扩展性强，有能力可以无限拓展功能界面好看，符合现代审美提供经典、内联、沉浸无干扰三种模式...对标准支持优秀（自v5开始）多语言支持，官网可下载几十种语言默认的情况下，TinyMCE是使用英文，而且我们下载的TinyMCE软件包默认也是不带中文语言包的，因此我们要单独操作一下。...官方下载地址：https://www.tiny.cloud/get-tiny/language-packages/ 中文网站下载地址：http://tinymce.ax-z.cn/static/tiny.../langs/zh_CN.js 将语言包解压，将js文件放入tinymce根目录下的langs文件夹中（如不存在就自己新建一个），最后路径形如：XXX/tinymce/langs/zh_CN.js 在TinyMCE

2.8K1 0

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

博客（coder的自我修养）原文链接：http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器...跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。...TinyMCE中文文档地址：http://tinymce.ax-z.cn/ vue项目集成TinyMCE编辑器 1、安装 vue-cli版本：4.4.0 安装tinymce npm install tinymce...-S tinymce版本：5.3.1 安装tinymce-vue npm install @tinymce/tinymce-vue -S tinymce-vue是tinymce官方提供的一个vue组件...3、组件编写新建一个组件，在此我把它命名为imcoder-tinymce.vue 在组件中我们引入tinymce import tinymce from "tinymce/tinymce"; import

24.6K11 3

vue-tinymce增加135编辑器支持

一、引入@tinymce/tinymce-vue import TinymceVue from '@tinymce/tinymce-vue'; 二、实例化tinymce并调用135编辑器注意里面的external_plugins...表示引入自定义的135编辑器插件。...<tinymce-vue api-key="申请一个tinymce的key" v-model="content" :init="{ external_plugins...: { 'editor135': 'https://cdn.jsdelivr.net/gh/starideas/xyfront/libs/tinymce/plugins/editor135/plugin.js...> 三、测试点击工具栏的135如果没问题的化会弹窗一个窗口，窗口里就是135编辑器，在135里完成编辑后点击右侧橙色的完成编辑，会自动将内容同步到tinymce里。

4301 0

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

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。...因为其功能相对简单，所以很多人都想着用给它扩展一下，那就扩展一下吧~ 更改编辑器默认视图为HTML/文本 WordPress默认的是，在后台新建文章后，编辑器就自动跳转到“可视化”视图，对于一些经常要插入代码或者...（编辑器内可见）新建文章后编辑器里的内容默认是空的，有些朋友做的是WordPress主题站、插件站或单纯的下载站，一些标准的格式化的文章每次都会输入“主题名称”、“主题作者”、“下载地址”等内容，添加默认内容之后...', 'insertPreContent'); 添加更多的HTML标签（慎用）此功能请慎用，因为WordPress自带的TinyMCE编辑器会默认过滤掉不符合XHTML 1.0中的html标签，不排除某些情况下也可能会用到这些标签...WordPress自带TinyMCE编辑器默认对英文拼写进行检查，怎么样才能让其支持中文拼写检查呢？

2.8K5 0

富文本编辑器 tinymce 的使用

一款简洁表格功能齐全的富文本编辑器，表格编辑有比较强大的功能，支持获取html,设置只读功能 1、安装 tinymce npm install tinymce --save 2、安装 @packy-tang.../vue-tinymce npm install @packy-tang/vue-tinymce 3、复制 node_modules/tinymce目录下所有文件至public/static目录下...4、public里面的index.html文件引入新建tinymce.vue...-- App --> </...plugins: "link image media table lists fullscreen quickbars", language_url: "/static/tinymce

1.6K2 0

Django 2.1.7 使用富文本编辑器 tinymce

此处以tinymce为例，其它富文本编辑器的使用也是类似的。在虚拟环境中安装包。...安装tinymce应用 1）在项目/settings.py中为INSTALLED_APPS添加编辑器应用。...INSTALLED_APPS = ( 'tinymce', # 富文本编辑器 .... ) 2）在项目/settings.py中添加编辑器配置。...# 富文本编辑器配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, }.../', include('tinymce.urls')), # 导入tinymce应用的urls.py .... ] 到这里已经配置好了tinymce库的注册使用了，下面在Admin后台使用。

1.6K1 0

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

现在大家都开始使用古腾堡编辑器了，特别是 WordPress 最新几个版本的发行，大部分更新都围绕古腾堡编辑器，不过在一些地方还是有用到经典编辑器的，比如我们花生小店的商品编辑，就用不到古腾堡那么高级的编辑器...经典编辑器基本够用，但是有些格式化工具缺失，还是挺烦人，所以我们为了商家在花生小店的时候方便编辑商品，我们做了一个 WordPress 经典编辑器增强插件，为了方便就叫做 WPJAM TinyMCE。...添加编辑器按钮 WPJAM TinyMCE 这个插件首先增加几个样式按钮：下划线，背景颜色，两端对齐等，增加了常用的 WordPress 内容分页按钮，还支持设置字体和大小，最后还把按钮布局调整了一下，...安装 WPJAM TinyMCE 之前的编辑器：安装 WPJAM TinyMCE 之后的编辑器：新增插入表格功能我增加了 TinyMCE 的表格插件，让大家在编辑器就能够直接插入表格：还支持表格的行...，列增删改等各种操作：总之让在编辑器内编辑表格变成了一件非常简单的事情。

7501 0

TinyMCE 富文本编辑器的使用实例指导

【TinyMCE 官网及文档】【TinyMCE 中文手册】 html 核心源码 ... js 源码： tinymce.init({ selector: '#mz-tinymce', language:'zh_CN', //调用放在langs文件夹内的语言包

1.8K3 0

Django实战-番外篇-tinymce富文本编辑器

富文本编辑器在 web应用中使用广泛，比如 markdown、ueditor 等，像这些编辑器都有集成在 python 和 django 的第三方包。...① 安装 tinymce 环境：ubuntu 16.04 + django 2.0 + python 3.5 python 3 sudo pip install django-tinymce ② 配置...tinymce 在 django 项目的 settings.py 文件的 INSTALLED_APPS 以本次电商项目为例： INSTALLED_APPS = [ 'django.contrib.admin...③ 作为 admin 中的应用配置参数 # tinymce配置参数 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600...③ tinymce 主路由配置需要在项目的主路由中配置 tinymce 的 url import tinymce.urls url(r'^tinymce/', include(tinymce.urls

8572 0

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

从WordPress 3.9版本后，WordPress 默认的编辑器 TinyMCE 随之升级到了版本4，带来的问题以前在默认编辑器上的增强开发的效果可能失效。...这篇文章旨在破旧立新，通过几个例子给大家带来几个TinyMCE4 编辑器的增强开发技巧。...还原字体种类及大小选择按钮默认的话，字体种类及大小这两个按钮没有添加到TinyMCE 编辑器中，通过下面的函数，就可以实现有下拉形式的字体种类及大小这两个按钮。...str_replace( ',', '%2C', $font_url ) ); } } add_action( 'init', 'wpex_mce_google_fonts_styles' ); 增加编辑器的下拉菜单功能...function() { editor.insertContent('[flv][/flv]\n'); } } ] }); }); })(); 增加编辑器的弹出窗口功能

9426 0

停用TinyMCE，改用xhEditor在线可视化HTML编辑器

我的网页开发生涯中，一直离不开跟各种各样的在线Html编辑器（所见即所得）打交道，从最初的简易UBB编辑器，到购买正版的[URL=http://www.ewebeditor.net/]eWebEditor...[/URL]，再到免费版的[URL=http://www.tinymce.com/]TinyMCE[/URL]，在综合比较了一些类似的编辑器之后，终于走到今天，准备启用[URL=http://www.xheditor.com...]xhEditor[/URL] 附上一些知名Html所见即所得在线编辑器 [URL=http://www.kindsoft.net/]KindEditor[/URL] [URL=http://www.e512...http://www.freetextbox.com/]Freetextbox[/URL] xhEditor简介 xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器...使用简单：简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。

3.1K3 0

Django 2.1.7 使用富文本编辑器 tinymce

富文本编辑器 借助富文本编辑器，网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例，其它富文本编辑器的使用也是类似的。在虚拟环境中安装包。...安装tinymce应用 1）在项目/settings.py中为INSTALLED_APPS添加编辑器应用。...INSTALLED_APPS = ( 'tinymce', # 富文本编辑器 .... ) 2）在项目/settings.py中添加编辑器配置。...# 富文本编辑器配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, }.../', include('tinymce.urls')), # 导入tinymce应用的urls.py .... ] 到这里已经配置好了tinymce库的注册使用了，下面在Admin后台使用。

9542 0

vue中使用wangeditor_vue富文本编辑器tinymce

富文本编辑器要求必填，否则alert(‘内容不能为空’)，假设字段 { { content }} 当编辑器输入内容时，如果是字符，content = 字符XXXX 如果是图片...this.content) 但是上述判断忽略了输入的是空格或回车键时，content也会有length，也会有内容所以要写一个正则，判断当输入的内容为空空字符空格回车时，都是判空 // 判断富文本编辑器输入是否为空或回车...就是当content只插入一张图片时，img是单标签，被replace成''，那么明明只输入图片不输入其他字符的情况下，也会被alert('内容不能为空') 经修改： // 判断富文本编辑器输入是否为空或回车...re.test(str) }, // 举例 let text = getText(content) console.log(isNull(text)) // true表示判空 false表示不为空再遇到富文本编辑器必填判断的清空...，用上述方法就好了最后注：replace不会改变content的值，只是在script中做逻辑判断时将输入的空格换行等成分替换成了''再去判断，在富文本编辑器中输入的是什么样就还是什么样，并不会因为我

1.2K1 0

vue富文本编辑器tinymce_vue移动端富文本编辑器

主流富文本编辑器对比前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。...wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。...补充：Tinymce也是一款不错的富文本编辑器，种植，各有优势和劣势，关键是选择一款最适合的就好。因为笔者在开发vue，所以直接使用vue-quill-editor较为方便些。具体看情况使用。...点击quill-editor的图片上传时，实际点击了自定义的图片上传，而后在返回网络路径后将图片插入富文本编辑器即可。...import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; export default { props: { /*编辑器的内容

3.5K2 0

vue富文本编辑器tinymce_idea代码高亮设置

1.查找IntelliJ IDEA是否已经安装vue.js 注:之前有写过关于使用cmd命令搭建vue项目的全部过程，详情在此打开IDEA编辑器，快捷键Ctrl+Alt+S打开Settings(设置...运行结果如下图： 7.在IDEA中新建.vue格式的文件开发的时候IDEA编辑器中是没有.vue格式文件的，所以需要在编辑器中设置。

5552 0

Typecho安装TinyMCE美化版富文本编辑器取代Markdown

我们很多朋友在使用Typecho CMS的时候，最为感觉到的就是他的编辑器不好用。...我们还是比较习惯富文本编辑器模式。...这几天老蒋在整理Typecho相关常用的插件的时候，看到这款来自网友分享的Typecho TinyMCE 美化版富文本编辑器插件，采用的是TinyMCE + Prettify 富文本编辑器，支持语法高亮等功能.../qirishuzhai.com/usr/uploads/2020/03/2287149370.zip 备用地址：http://tools.laobuluo.com/typecho/plugins/TinyMCE.zip...我们可以看到富文本编辑器是不是比之前MD编辑器感觉好很多？如果有需要更换Typecho编辑器的话可以试试这个。

1.2K2 0

tinymce实现导入word功能

tpImportword tpImportword 插件用于 tinymce 富文本编辑器 实现导入word功能, 并且最大可能保存布局样式与颜色等欢迎提供好的建议或者反馈bug 注意目前及支持...yarn add tinymce-plugin -D 项目中使用 import "tinymce-plugin/plugins/tpImportword/plugin.js"; tinymce.init...下载 @tinymce-plugin/tp-importword npm i @tinymce-plugin/tp-importword yarn add @tinymce-plugin/tp-importword...---- 欢迎来到 Tinymce-plugin 这是一个专注提供强大、好用、丰富的 tinymce 富文本编辑器 插件、扩展和技术的技术社区，方便交流讨论，分享经验。...本社区有多个不错的插件或者项目，欢迎 Star ⭐ 关注~ ✨Tinymce-plugin ---- Tinymce-plugin 社区所有稳定插件将收录在 tinymce-plugin 和 @

2.1K5 0

vue2 renrne 引入tinymce

/Editor> 编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件 editorInit: { language_url: '/static...height: 300, // 编辑器高度 branding: false, // 是否禁用“Powered by TinyMCE” menubar: true, // 顶部菜单栏显示...article/details/79880806 https://blog.csdn.net/zjiang1994/article/details/79856058 完成了上面的初始化之后，就已经能正常运行编辑器了...// 编辑器高度 branding: false, // 是否禁用“Powered by TinyMCE” menubar: true, // 顶部菜单栏显示...content_css: "/static/tinymce/skins/content/default/content.css", height: 300, // 编辑器高度

1.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭