5

如果可能的话，我想使用 TinyMCE（所见即所得编辑器）来允许用户创建项目符号列表和仅项目符号列表。有人知道方法吗？

谢谢，

保罗

4

2 回答 2

5

在使用高级主题时，TinyMCE 有两个选项会有所帮助。第一个是theme_advanced_buttons<n>，它决定了在编辑器中显示哪些按钮。由于默认情况下高级主题将按钮定义为三行，因此您需要重新定义每一个。

第二个是valid_elements，它可以让 TinyMCE 删除任何未列出的标签。它还可以将一个标签转换为另一个标签；例如，您可能希望将编号列表切换为项目符号列表。但是请注意，这并不是真正的安全性。您仍然需要执行服务器端检查以阻止来自恶意或不正当用户的无效输入。

如果您真的想阻止除项目符号列表之外的所有标签，您的 init 调用可能需要以下选项：

tinyMCE.init({
    // Select the advanced theme
    theme : "advanced",

    // Choose which buttons to show
    theme_advanced_buttons1 : "bullist",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",

    // Which html tags to allow
    valid_elements : "-ul/-ol,-li",

    // Other options, including what to make editable
    mode : ...
});

另一方面，如果您只想阻止编号列表，您的配置可能看起来更像：

tinyMCE.init({
    // Select the advanced theme
    theme : "advanced",

    // Choose which buttons to show
    theme_advanced_buttons1 : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
    theme_advanced_buttons2 : "bullist,separator,outdent,indent,separator,undo,redo,separator",
    theme_advanced_buttons3 : "hr,removeformat,visualaid,separator,sub,sup,separator,charmap",

    // Which html tags to allow
    valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|" +
        "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|" +
        "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|" +
        "name|href|target|title|class|onfocus|onblur],strong/b,em/i,strike,u," +
        "#p[align],-ul[type|compact]/-ol[type|compact],-li,br,img[longdesc|usemap|" +
        "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup," +
        "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|" +
        "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|" +
        "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot," +
        "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor" +
        "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div," +
        "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face" +
        "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite]," +
        "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width" +
        "|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo," +
        "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|" +
        "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method]," +
        "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value]," +
        "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value]," +
        "q[cite],samp,select[disabled|multiple|name|size],small," +
        "textarea[cols|rows|disabled|name|readonly],tt,var,big",


    // Other options, including what to make editable
    mode : ...
});
于 2009-06-29T21:37:28.987 回答
1

在您的 tinyMCE.init 中，将 theme-advanced-buttons1 设置为只有“bullist”。 您还需要将 theme-advanced-buttons2、3 和 4 设置为空。 这是一个完整的例子：

<html>
<head>
    <title>Application Name</title>
    <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            // General options
            mode : "exact",
            elements: "description_edit_box",
            theme : "advanced",
            plugins : "safari,pagebreak,inlinepopups,paste,searchreplace",

            // Theme options
            theme_advanced_buttons1 : "bullist",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

            // Drop lists for link/image/media/template dialogs
            external_link_list_url : "lists/link_list.js"
        });
    </script>
</head>

<body>
<textarea id="description_edit_box" rows="5" ></textarea>
</body>
</html>
于 2009-05-28T20:16:25.013 回答