首页
学习
活动
专区
工具
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是一个开源的富文本编辑器,与云计算厂商无关。

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

相关·内容

领券