Question

我正在尝试在页面加载时设置多个文本编辑器的内容。我对TinyMCE不太熟悉并且在某种程度上继承了代码。以下是我如何初始化编辑器 -

tinyMCE.init({
            // General options            
            mode: "exact",
            elements: "txtContent1,txtContent2,txtContent3,txtContent4,txtContent5,txtContentRight1,txtContentRight2,txtContentRight3,txtContentRight4,txtContentRight5",
            theme: "advanced",
            plugins: "layer,table,save,advhr,advimage,advlink,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",            
            // Theme options
            theme_advanced_buttons1: "bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,format,selectcut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,help,code,",
            theme_advanced_buttons2: "ComparativeFiguresTableButton",
            //theme_advanced_buttons3: "ComparativeFiguresTableButton,tablecontrols,|,hr,|,sub,sup,|,print,|,ltr,rtl,|,fullscreen",
            //theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            relative_urls: false,
            document_base_url : "example.com",
            remove_script_host: false,
            setup: function(ed) {
                // Add a custom button
            ed.addButton('ComparativeFiguresTableButton', {
                title: 'Comparative Figures Table',
                image: 'images/icons/cumulativefiguresBtn.gif',
                    onclick: function() {
                        // Add you own code to execute something on click
                        ed.focus();
                        ed.selection.setContent('<p><strong>Comparative Figures</strong></p><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font-size:12px; line-height:1.5em; font-family:Verdana, Arial, Helvetica, sans-serif;"><tbody><tr><td>&nbsp;</td><td><strong>Offered</strong></td><td><strong>Sold</strong></td><td><strong>Aggregate (€)</strong></td><td><strong>Average (€)</strong></td><td><strong>Median (€)</strong></td></tr><tr><td><strong>2009</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr><tr><td><strong>2010</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr></tbody></table><br clear="all" />');
                    }
                });
            }

有人可以建议在页面加载时为每个编辑器设置不同的html内容的最佳方法吗？

谢谢，特里斯坦

Answer 1

在您的配置中，您的网页上有很多TinyMCE实例。在每个中，您都有一个按钮，允许最终用户插入一些预定义的内容（“比较图表”）

当您说“在页面加载时为每个编辑器设置不同的html内容”时，我认为您的意思是希望每个TinyMCE实例都加载适当的内容（默认情况下或您从存储库中检索到的内容。）

如果是这种情况，那么，如 @russjman 所述，元素配置项中的每个ID都指向页面上的TextArea / DIV。您需要做的就是将适当的内容放在这些元素中。重要的是，请记住对HTML进行编码。

例如

<textarea id="txtContent1">
    <?php echo htmlentities("<p>This is the content from the first text area.</p>");?></textarea>
<textarea id="txtContent2">
    <?php echo htmlentities("<p>This is the content from the second text area.</p><p><strong>Note</strong> This needed to be encoded using htmlentities in PHP</p>");?></textarea>

另一种阅读问题的方法是，您希望 ComparativeFiguresTableButton 在编辑器的每个实例中执行不同的操作。在这种情况下，您将需要为每个元素使用不同的配置，每个元素在 ed.selection.setContent（）方法中具有不同的值

正如 @Thariama 所述，最好的方法是创建一个简单的插件，添加一个按钮并具有一个配置参数，该参数是您在按下时要插入的内容。

最后，如果您只想插入HTML片段，那么可能需要查看template插件。

Answer 2

尝试创建own plugin (it is pretty easy):

ed.onInit.add(function(ed){
  ed.setContent('<p>my new content</p>');
}

由于每个tinymce实例都使用相同的代码进行初始化 - 它们都获得相同的内容（在编辑器实例加载后）。

Alernative 1：我不确定以下初始设置是否有效，但您可以尝试一下：

setup : function(ed) {
 ed.setContent('<p>my new content</p>');
}

Alernative 2：在tinymce.init被调用之前，将每个textarea的内容设置为一个tinymce编辑器实例。

Answer 3

我假设你想在同一页面上为多个textareas设置TinyMCE。 'elements'变量应该按照你的要求进行，只要它们对应一个带有id的textarea。

<textarea id="txtContent1" ></textarea>
<textarea id="txtContent2" ></textarea>

TinyMCE SetContent用于多个实例

3 个答案: