javascript - 用于多个实例的 TinyMCE SetContent

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插件。