TinyMCE: Ist es möglich, nur Aufzählungszeichen zuzulassen?

Question

Ich möchte, wenn möglich, TinyMCE (WYSIWYG-Editor) verwenden, damit die Benutzer Aufzählungslisten erstellen können und nur Aufzählungslisten. Kennt jemand eine Möglichkeit?

Merci,

Paul

Answer 1

TinyMCE hat zwei Optionen, die bei der Verwendung des erweiterten Themas hilfreich sind. Die erste ist theme_advanced_buttons<n> die bestimmt, welche Schaltflächen mit dem Editor angezeigt werden. Da das erweiterte Thema standardmäßig Schaltflächen in drei Reihen definiert, müssen Sie jede einzelne neu definieren.

Die zweite ist valid_elements , wodurch TinyMCE alle nicht aufgelisteten Tags entfernen kann. Es kann auch ein Tag in ein anderes umwandeln; zum Beispiel könnten Sie nummerierte Listen in Aufzählungslisten umwandeln wollen. Beachten Sie jedoch, dass dies keine wirkliche Sicherheit darstellt; Sie müssen immer noch serverseitige Prüfungen durchführen, um ungültige Eingaben von böswilligen oder hinterhältigen Benutzern zu blockieren.

Wenn Sie wirklich alle Tags mit Ausnahme von Aufzählungslisten blockieren wollen, könnte Ihr init-Aufruf die folgenden Optionen enthalten:

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 : ...
});

Wenn Sie hingegen nur nummerierte Listen verhindern wollen, könnte Ihre Konfiguration eher wie folgt aussehen:

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 : ...
});

Answer 2

In Ihrem tinyMCE.init setzen die Theme-advanced-buttons1 nur "bullist" haben. Sie müssen auch theme-advanced-buttons2, 3 und 4 auf nichts setzen. Hier ist ein vollständiges Beispiel:

<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>