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

如何在同一页面上有两个不同配置的TinyMCE编辑器

在同一页面上拥有两个不同配置的TinyMCE编辑器,可以通过以下步骤实现:

  1. 引入TinyMCE库:在页面的头部引入TinyMCE的JavaScript库文件。
代码语言:html
复制
<script src="https://cdn.tiny.cloud/1/{API_KEY}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

请将{API_KEY}替换为您自己的TinyMCE API密钥。

  1. 创建两个textarea元素:在页面中创建两个textarea元素,分别用于容纳两个不同配置的TinyMCE编辑器。
代码语言:html
复制
<textarea id="editor1"></textarea>
<textarea id="editor2"></textarea>
  1. 初始化TinyMCE编辑器:使用JavaScript代码初始化两个TinyMCE编辑器,并分别指定不同的配置。
代码语言:javascript
复制
tinymce.init({
  selector: '#editor1',
  // 配置1
  plugins: 'advlist autolink lists link image charmap print preview anchor',
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
});

tinymce.init({
  selector: '#editor2',
  // 配置2
  plugins: 'code table emoticons',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code | table | emoticons'
});

在上述代码中,selector属性指定了要将TinyMCE应用于哪个textarea元素,plugins属性指定了要加载的插件,toolbar属性指定了要显示的工具栏按钮。

  1. 自定义配置:根据您的需求,可以根据TinyMCE的文档自定义更多的配置选项,例如自定义按钮、样式、事件等。

这样,您就可以在同一页面上拥有两个不同配置的TinyMCE编辑器了。根据您的具体需求,可以根据TinyMCE的文档进一步了解和使用更多功能和配置选项。

请注意,以上答案中没有提及具体的腾讯云产品,因为TinyMCE是一个开源的富文本编辑器,与云计算厂商无关。

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

相关·内容

tinymce 如何实现动态国际化

tinymce 如何实现动态国际化 tinymce 是一个非常强大富文本编辑器tinymce是支持开启通过配置 language 来决定 tinymce 语言版本 例如 下面配置 日文 英文...中文 且在同一页面 tinymce.init({ selector: 'textarea.tinymce', plugins: `code image imagetools media...否则只能得到 最后一个实例语言版本 但是问题来了 因为 tinymce 菜单面板 是动态生成 , tinymce 官方 这一块逻辑并没有考虑到 不同语言实例在 同一页面,【具体,可以近似看成...原型链问题 】,所以菜单面板语言就会出现 生成是最后一个语言配置, 如下图 英文实例 菜单 生成 结果为中文 那么这个问题该 如何解决 解决方案就是 当鼠标 在每个tinymce 实列上方,立即进行一次语言重置...你可以通过下载tinymce-plugin, 并配置 tp_i18n 为 true 来实现 优雅同时渲染多语言版本, 实现代码如下: tinymce.init({ language: 'zh_CN

1.3K30

Django Admin后台管理

Django通过简单配置就可以实现数据模型后台管理。一般管理界面是给系统管理员使用,以完成数据CURD。 1.本地化 将语言和时区本地化,修改settings.py文件。...登陆后就会看到我们注册模型类,点进去后就可以实现对数据库CURD了。 4.自定义管理页面 Django提供了自定义管理页面的功能,是通过自定义模型管理类来实现。...5.其他 富文本编辑器 后台管理员如果需要在后台编辑带样式文字,编辑对商品详细信息描述,就需要使用富文本编辑器。这里以tinymce为例在Django Admin后台中如何使用富文本编辑器。...', # 富文本编辑器 ) 在项目的settings.py最后位置添加tinymce配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced',...)), ..., url(r'^tinymce/', include('tinymce.urls')), # 富文本编辑器 随后就可在模型类中使用该字段,在应用models.py中添加如下内容

2.8K10
  • 最好用 6 款 Vue 3 富文本编辑器

    富文本编辑器作为直接与用户交互内容输入生产工具,对大家项目来说非常重要。选不好,配置不好,直接影响产品质感和用户体验,所以说在选择编辑器方面花点时间是值得。...TinyMCE - 富文本编辑器 Word ,功能想不到丰富 TinyMCE 是富文本编辑器领域头部玩家之一,主流富文本编辑器,功能非常全,你需要大多数功能它都支持。...但它比其他编辑器更棒地方在于多人在线实时编辑。类似于谷歌文档那种效果,所有使用者在同一页面彼此能看到对方光标位置和名字,大家同时在线协同编辑。...CKEditor 5 有详细文档,从入门到自定义编辑器,再到如何与不同框架集成,写非常详细。 四....Froala - 插件丰富,UI友好,编辑器苹果 Froala 被喜欢它用户称之为史上最牛富文本编辑器,干净 UI 和简洁设计,极其丰富插件,可自定义配置,功能非常强大,API 和文档非常全面

    14.1K10

    Django 第三方引用富文本编辑器6.1

    借助富文本编辑器,管理员能够编辑出来一个包含html页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员 此处以tinymce为例,其它富文本编辑器使用可以自行学习 使用编辑器显示效果为...: 下载安装 在网站pypi网站搜索并下载"django-tinymce-2.4.0" 解压 tar zxvf django-tinymce-2.4.0.tar.gz 进入解压后目录,工作在虚拟环境...'tinymce', ) 在settings.py中添加编辑配置TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600..., 'height': 400, } 在根urls.py中配置 urlpatterns = [ ......url(r'^tinymce/', include('tinymce.urls')), ] 在应用中定义模型属性 from django.db import models from tinymce.models

    40130

    vue2 renrne 引入tinymce

    tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下 结构 : static tinymce skins zh_CN.js 在页面中引入以下文件 import tinymce.../Editor> 编辑器需要一个 skin 才能正常工作,所以要设置一个 skin_url 指向之前复制出来 skin 文件 editorInit: { language_url: '/static...height: 300, // 编辑器高度 branding: false, // 是否禁用“Powered by TinyMCE” menubar: true, // 顶部菜单栏显示...而解决这个问题,需要把工具栏下拉框层级提高, 找到static/tinymce/skins/ui/oxide/skin.min.css文件 把class名为tox-tinymce-aux第一个...z-index属性变大即可 tinymce 提供了 images_upload_url 等 api 让用户配置上传图片相关参数 但为了在不麻烦后端前提下适配自家项目,还是得用 images_upload_handler

    1.4K20

    Django之富文本(获取内容,设置内容方式)

    2、tinymce插件 安装插件 pip install django-tinymce 配置插件 使用 后台管理中 HTMLField 页面中使用 textarea 3、在后台管理中使用 配置settings.py...# 注册富文本应用 'tinymce', ] 添加默认配置 # 以字典形式配置富文本框架tinymce # 作用于管理后台中富文本编辑器 TINYMCE_DEFAULT_CONFIG =...import HTMLField class Blog(models.Model): sBlog = HTMLField() 注册模型 admin.site.register 4、在普通页面使用...5、利用js获取富文本内容和设置内容给富文本 //editorId是富文本id function SetTinyMceContent(editorId, content) { //给富文本编辑器设置内容...tinyMCE.getInstanceById(editorId).getBody().innerHTML = content; //获取富文本编辑器内容 var con = tinyMCE.getInstanceById

    4.1K30

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

    由于该编辑器升级到了5.0版本,会导致下文中某些文件找不到情况,但是封装思路是相同,如需继续使用请使用下面的版本再次尝试 “@tinymce/tinymce-vue”: “^1.1.0” “tinymce...”: “^4.8.5” vue cli 3 + tinymce5.0版本整合参考:点击前往 最近再弄一个后台管理系统,挑选了不少编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置...,直接通过组件配置api-key直接使用,像我这种懒注册或者购买直接下载tinymce,自力更生 安装tinymce-vue npm install @tinymce/tinymce-vue -S...,//顶部菜单栏显示 } 扩展插件 默认编辑器只有基本功能,如果还需要上传图片,插入表格之类功能就需要添加插件 添加上传图片和插入表格插件 import 'tinymce/plugins/image...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.8K10

    三种插件开发模式,带你玩废tinymce

    该图标仅适用于为其配置编辑器实例 addMenuButton() 注册一个新菜单按钮。添加单击时打开菜单工具栏按钮。...配置就好了 custom_elements 这个配置目的在于可以在tinymce编辑器中指定非 HTML 元素,换一话说 就是可以自定义标签(自定义节点,这个节点 与 Web Components...因为是自定义标签,并且是在 tinymce 编辑器中,所以出了这个编辑器,客户端浏览器可是识别不了, 所以需要想个办法 转换一下。...哪该如何转化,还得再了解认识一下 tinymce tinymce 富文本中编辑数据 会抽象为 ASTNode (可以直接看成tinymce官方自制简易版DOM树),打印出来如下图 既然有转换...通过在两个过滤器中 ,针对自定义节点 加入对应转换逻辑,实现无论是在编辑器环境中 还是客服浏览器中都能完美的渲染出来 Parser : 即 API 中 tinymce.html.DomParser

    5K30

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

    best-practices/core-apis/ 官方开发文档:https://developer.wordpress.org/themes/basics/theme-functions/ 主题相关 1.如何为不同分类页面显示不同模板...文章页面默认调用是single.php,可以在single.php里判断不同分类,include不同模板文件。...align-wide:配置编辑器宽对齐。 dark-editor-style:配置暗风格块编辑器。 disable-custom-colors:禁用快编辑器自定义颜色。...editor-font-sizes:配置编辑器字体大小。 editor-styles:配置编辑器样式。 wp-block-styles:启用默认块编辑器样式。...3.tinymce.Editor,编辑器核心API 官方文档:https://www.tiny.cloud/docs-4x/api/tinymce/tinymce.editor selection,代表编辑器内被选中内容对象

    10.6K40

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

    使用 TinyMCE 编辑器中文语言配置过程 ---- TinyMCE是一款易用、且功能强大所见即所得富文本编辑器。...TinyMCE优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能 接口丰富,可扩展性强,有能力可以无限拓展功能 界面好看,符合现代审美 提供经典、内联、沉浸无干扰三种模式...对标准支持优秀(自v5开始) 多语言支持,官网可下载几十种语言 默认情况下,TinyMCE是使用英文,而且我们下载TinyMCE软件包默认也是不带中文语言包,因此我们要单独操作一下。.../langs/zh_CN.js 将语言包解压,将js文件放入tinymce根目录下langs文件夹中(如不存在就自己新建一个),最后路径形如:XXX/tinymce/langs/zh_CN.js 在TinyMCE...实例配置参数中指定语言: tinymce.init({ selector: '#tinydemo', language:'zh_CN',//注意大小写 }); 然后刷新页面即可使用中文。

    3.4K10

    Vue项目中使用Tinymce

    配置项 接下来就是添加配置项, 让TinyMCE编辑器功能丰富起来 基础配置 关于基础配置, 我就不一一介绍,文档中都有详细说明,如果英语和我一样弱鸡,可以借助chrome翻译,大概能看明白。...下面是封装组件script内容, 关于一些配置直接在代码中说明: import plugins from '@/components/Tinymce/plugins' import toolbar...图片处理就告一段落~ 关于预览 TinyMCE配置了预览插件preview, 前面在plugin.js中也加入了, 但是我们需求是实现手机模式下预览, 所以还需要设置一下预览内容宽度以及高度 plugin_preview_width...对于135编辑器 135编辑器支持拷贝是html代码,通过直接粘贴在code中即可保持排版样式不变,对于图片地址处理思路如下: 为自己服务器设置一个白名单, 将页面中非白名单内图片链接地址传给后台...,这里对于TinyMce编辑器使用就告一段落了,谢谢你认真阅读,希望对你有所帮助,后期有新功能添加或是新内容我会再更新

    4.7K20

    vue富文本编辑器插件推荐_elementui富文本编辑器

    富文本编辑器官网 http://tinymce.ax-z.cn 安装 npm install tinymce -S npm install @tinymce/tinymce-vue -S 下载语言包...'tinymce/themes/silver/theme'//编辑器主题 import 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标 // 引入编辑器插件...$emit('onClick', e, tinymce) }, //可以添加一些自己自定义事件,清空内容 clear() { this.myValue = '' } } } ...注:当遇到报错信息 Uncaught SyntaxError: Unexpected token ‘<‘ 时,检查引入 语言包 和 编辑器主题 路径是否正确 原文 版权声明:本文内容由互联网用户自发贡献...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.3K20

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

    富文本编辑器 博客(coder自我修养)原文链接:http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大所见即所得富文本编辑器...跟其他富文本编辑器相比,有着丰富插件,支持多种语言,能够满足日常业务需求并且免费。...这两个组件安装完之后,在public目录下新建文件夹static/tinymce,目录建好后(如果没有public文件,就在index.html同级static中创建tinymce文件),找到node_modules...文件夹下tinymce/skins目录,将skins目录复制到我们创建static/tinymce文件夹内,如下图所示 2、配置中文语言 到官网下载中文语言包 zh_CN.js 在刚才创建static...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    3.4K20

    Tinymce plugins

    tinymce-plugins This is tinymce plugins 前言 因为项目需要用到富文本编辑器众多富文本编辑器中,选择了 Tinymce,根据项目需要对Tinymce 进行扩展和增强插件...简述 This is tinymce plugins 该项目主要为 tinymce 富文本编译器扩展插件,或增强优化插件 目前整理完成插件列表如下: imagetools [增强优化]: 图片编辑工具插件...(选配) : 提供 导入word 插件 预处理函数 importword_handler 配置参数【Function类型】传入3个参数 editor : editor 编辑器实列【object】 files...配置参数 attachment_max_size: 附件大小限制 默认 209715200 (200M)【number】 attachment_style: 附件样式,主要为保存数据后可以直接在其他页面展示...力求创建一个 提供 强大、好用、丰富 tinymce 富文本编辑器 插件、扩展 和 技术 技术社区,方便 交流讨论,分享经验 。

    2.7K10

    如何发布npm包(vue组件)

    图片如何在NPM上发布自己第一个vue组件库,是每一名vue前端开发人员必经进阶之路,本文将结合作者实践项目,为各位读者详细讲解所有的操作步骤,相信你在阅读本文后,就能立马动手。...1.创建项目打开cmd在项目中输入一下命令初始化一个vue项目,名称自定义vue create app在src同级目录下新建一个名称为myComponents组件库,如图所示图片2.配置自己项目...以tinyMce/src/tinymce.vue为例子,你们可以依照自己组件名称进行对应修改,代码如下:import tinymce from '....true,要改成false,否则发布不出去 "description": "tinymce富文本编辑器插入文本图片等接口集成", //包描述 "main": "lib/landscape-components.umd.min.js...可以按照我配置配置如下# 忽略目录srcmyComponentsnode_modulespublicutils# 忽略指定文件vue.config.jsbabel.config.js*.mapjsconfig.json6

    4K105

    Vue2使用富文本编译器

    可以先看看我之前一篇文章,属于基础吧 在页面使用富文本编译器_超*博客-CSDN博客 至于为什么还是用TinyMCE,不用ElementUI自带富文本编译器,因为技穷/(ㄒoㄒ)/~~ 同样参考一篇文章...@tinymce/tinymce-vue@3.0.1 2、 开始 这里说一下,按照原博主步骤是将node_module文件下tinymce文件,拷贝一份到静态资源目录中。...numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat", //放置头部一些配置...,并将其作为成功结果传递给编辑器 } }, content:'' } }, components:{"tinymce":Editor} } </.../zh_CN.js,将下载zh_CN.js文件复制到node_modules/tinymce目录下就行。 扩展菜单、工具栏可以看看原博主下总结表格!!!

    31520
    领券