问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

多个 tinymce 文本区域

社区维基
1
新手上路，请多包涵

我将 tinymce 用于动态生成至少 5 个文本的网页。

不幸的是，我使用的配置仅适用于第一个 textarea 。

 tinyMCE.init({
    height : "300",
    mode : "exact",
    elements : "content",
    theme : "simple",
    editor_selector : "mceEditor",
    ...

<textarea class="mceEditor" name="content" rows="15" cols="40">content</textarea>

在 所有 textarea 中启用 tinymce 编辑的配置是什么。

原文由 Udo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmltinymce
阅读 858
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果您使用“精确”模式，则需要指定要转换为编辑器的元素的 ID。

 function initMCEexact(e){
  tinyMCE.init({
    mode : "exact",
    elements : e,
    ...
  });
}
// add textarea element with id="content" to document
initMCEexact("content");
// add textarea element with id="content2" to document
initMCEexact("content2");
// add textarea element with id="content3" to document
initMCEexact("content3");

或者，您可以使用“文本区域”模式，该模式不加区别地将编辑器应用于所有文本区域。

 function initMCEall(){
  tinyMCE.init({
    mode : "textareas",
    ...
  });
}
// add all textarea elements to document
initMCEall();

请记住，如果您动态创建文本区域，则需要在创建元素 后 调用 tinyMCE.init()，因为它们需要存在，tinyMCE 才能转换它们。

这是关于模式的文档。

原文由 DustyWall 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

对于 TinyMCE 4.0，您必须使用选择器或为每个所需配置定义 tinymce.init 对象/方法（ https://www.tinymce.com/docs/get-started/multiple-editors/ ）。

例如，这是一个有 3 个编辑器的页面：

 <!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditable-h1',
    toolbar: 'undo redo'
  });
  tinymce.init({
    selector: '.standard-editor'
  });
  </script>
</head>

<body>
  <form method="post">
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
  </form>

  <form method="post">
    <div id="myeditable-div1" class="standard-editor">
      <p>This section1 of content can be edited...</p>
    </div>

    <div id="myeditable-div2" class="standard-editor">
      <p>This section2 of content can be edited...</p>
    </div>

  </form>
</body>
</html>

原文由 Alex Vazhev 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题