首页
学习
活动
专区
工具
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.4K30

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 和文档非常全面

    16.9K10

    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

    40730

    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

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

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

    5.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

    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.7K40

    使用 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.6K10

    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.8K20

    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.8K10

    2024年Vue富文本编辑器推荐:十款必备富文本组件详解之Vue中有哪些富文本组件?

    本文汇总了十款高效、流行的富文本编辑器组件,详细解析它们的安装、配置、用法及适用场景,帮助你快速上手并选择最佳解决方案。 正文 1....TinyMCE TinyMCE 是一款企业级富文本编辑器,拥有丰富的功能和插件。...配置与用法: 借助 ProseMirror 的模块化特性,你可以创建属于自己的文档编辑器,从基础文本编辑到复杂的Markdown支持。...安装与用法: 需要通过社区适配器(如 vue-slate)来实现对Vue的支持: npm install slate vue-slate 然后根据需求构建自定义的文本编辑器: import { createEditor...内容输入和格式化需求简单的CMS平台。 总结 本文详细介绍了Vue生态下的十款富文本编辑器,包括Quill、TinyMCE、CKEditor等,从安装、配置到适用场景都进行了深入分析。

    45810

    如何发布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文件复制到node_modules/tinymce目录下就行。 扩展菜单、工具栏可以看看原博主下总结的表格!!!

    33920

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

    博客(coder的自我修养)原文链接:http://www.imcoder.fun/archives/1591583350241 TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器...跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费。...这两个组件安装完之后,在public目录下新建文件夹static/tinymce,目录建好后,找到node_modules文件夹下的tinymce/skins目录,将skins目录复制到我们创建的static...2、配置中文语言 到官网下载中文语言包 zh_CN.js ​ ? 在刚才创建的static/tinymce文件夹内再新建langs文件夹,用来存放我们下载的中文语言包,如下图所示 ​ ? ​​...的配置项 //初始化配置       init: {         language_url: "/static/tinymce/langs/zh_CN.js", // 中文语言包路径

    27.1K113
    领券