多个tinymce文本区域

问题描述 投票:0回答:6

我使用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>

all

textarea
's中启用tinymce编辑的配置是什么。

html tinymce
6个回答
24
投票

如果您使用“精确”模式,您需要指定要转换为编辑器的元素的 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");

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

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

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

这里是有关模式的文档


3
投票
对于 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>
    

2
投票
您应该在配置中使用不同的模式。例如模式:“specified_textareas”适用于具有在 editor_selector 参数中指定的给定类的所有文本区域。

为了使用 mceEditor 类处理所有文本区域,您可以使用以下命令:

tinyMCE.init({ mode : "specific_textareas", editor_selector : "mceEditor", .....
    

2
投票
在选择器中使用类 我有两个或多个文本区域,我想初始化那些具有微小 int 的文本区域,所以

<textarea class="mytextarea"></textarea> <textarea class="mytextarea"></textarea> . . .

在初始化tinyint代码中:

tinymce.init({ selector: 'textarea.mytextarea', plugins : 'advlist autolink link lists preview table code pagebreak', . . .
    

1
投票

tinymce.init()

 函数中,只需将第二个选择器(以逗号分隔)添加到 
selector:
 键即可:

selector: 'textarea#editor1, #editor-the-seconde'
我们可以像上面一样添加多个tinyMCE文本区域


-1
投票
根据

tinymce.com/wiki.php/Configuration:selector,选择器是选择可编辑元素的推荐方法。

对于所有文本区域元素,根据要求:

selector: "textarea",

或者更优雅地,仅那些具有特定 CSS 标签的元素:

selector: "textarea.editme", <textarea class="editme">
    
© www.soinside.com 2019 - 2024. All rights reserved.