TinyMCE: можно ли ограничить только пулями?

Question

Я хотел бы, если это возможно, использовать TinyMCE (WYSIWYG Editor), чтобы пользователи могли создавать маркированные списки и только маркированные списки. Кто-нибудь знает способ?

Спасибо

Пол

Answer 1

TinyMCE имеет две опции, которые помогут при использовании расширенной темы. Первый - theme_advanced_buttons<n>, который определяет, какие кнопки отображаются в редакторе. Поскольку расширенная тема по умолчанию определяет кнопки в трех строках, вам нужно переопределить каждую из них.

Вторым является valid_elements, что позволяет TinyMCE удалять любые незарегистрированные теги. Он также может преобразовать один тег в другой; Например, вы можете захотеть переключить нумерованные списки в маркированные списки. Обратите внимание, однако, что это не совсем безопасность; вам все еще нужно выполнить проверку на стороне сервера, чтобы заблокировать неверный ввод от злонамеренных или коварных пользователей.

Если вы действительно хотите заблокировать все теги, кроме маркированных списков, при вызове инициализации могут потребоваться следующие параметры:

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

Answer 2

В вашем 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>