1

我有一个文本区域，我想添加一个简单的所见即所得编辑器。我选择了 TinyMCE，但不需要所有可用选项，因此我使用了他们页面 (http://www.tinymce.com/tryit/custom_formats.php) 中的示例，该示例仅具有我正在寻找的基本简单格式选项为了。

我遇到的问题是，编辑器下方的代码会显示，但单击样式（即粗体、下划线等）不会更新窗口。它似乎更新了底层的 HTML 样式（虽然弹出嵌入式 HTML 编辑器窗口在这里似乎也不起作用），但我没有看到样式更改。但是，如果我注释掉“格式：”块，它确实有效。这是在 Chrome、Firefox 和 IE 上进行的测试。

我下载了 tinymce 包，并在这样的文件夹中放置了一些东西：

sample\
sample\tiny_mce
sample\tiny_mce\langs
sample\tiny_mce\plugins
sample\tiny_mce\themes
sample\tiny_mce\utils
sample\tiny_mce\license.txt
sample\tiny_mce\tiny_mce.js
sample\tiny_mce\tiny_mce_popup.js
sample\tiny_mce\tiny_mce_src.js
sample\index.html (see code below)

我将下载的存档 \jscripts* 文件夹的内容移至路径的根目录。我的 HTML 是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
tinyMCE.init({       
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "table,inlinepopups",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,table,removeformat,code",
        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,

        // Example content CSS (should be your site CSS)
        //content_css : "/js/tinymce/examples/css/content.css",

        // Style formats
        style_formats : [
                {title : 'Bold text', inline : 'b'},
                {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
                {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
                {title : 'Example 1', inline : 'span', classes : 'example1'},
                {title : 'Example 2', inline : 'span', classes : 'example2'},
                {title : 'Table styles'},
                {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        formats : {
                alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
                aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
                alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
                alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
                bold : {inline : 'span', 'classes' : 'bold'},
                italic : {inline : 'span', 'classes' : 'italic'},
                underline : {inline : 'span', 'classes' : 'underline', exact : true},
                strikethrough : {inline : 'del'},
                customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
        }
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
        <p>     
                <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
                <input type="submit" value="Save" />
        </p>
</form>

</body>
</html>

任何想法我做错了什么？他们网站上的示例似乎运行良好，所以我假设我的端存在某种配置问题。真的，我只是在寻找一个 textarea 编辑器，它会给我一些基本的 HTML 格式化选项，我什至不需要任何真正花哨的东西。谢谢你的帮助！

4

1 回答 1

2

TinyMCE 对于粗体、斜体、下划线的默认行为是使用与格式相关的 html 实体。示例：<strong></strong>、<em></em>和带有下划线的内联样式的跨度。

似乎 Formats 代码块通过将您的选择包装在具有由“类”属性定义的类名的跨度中来覆盖此操作。

为了让您的样式使用如上所示的格式块呈现，您需要添加一个样式表，其中包含 .bold、.italic、.underline 等的定义。

如果我没记错的话，TinyMCE 使用 iframe 将其 UI 呈现在 textarea 的顶部，因此简单地链接样式表将适用于您的前端，为了使其显示在编辑框中，您需要通过 tinyMCE.init 链接到样式表（） 目的。

使用您的文件夹结构，添加样式表\sample\tiny_mce\style.css，在其中定义您的样式，然后在代码格式块下方添加： content_css: "\sample\tiny_mce\style.css"。这会将样式表加载到 tinyMCE 编辑界面中，然后您应该会看到已应用的样式定义。

它应该看起来像：

    ...

    // Style formats
    style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
    ],

    content_css : "tiny_mce/style.css"

    ...
于 2012-10-09T14:54:28.857 回答