Question

我有一个textarea，我想添加一个简单的所见即所得的编辑器。我选择了TinyMCE，但不需要所有可用的选项，所以我使用了他们页面中的一个示例（http://www.tinymce.com/tryit/custom_formats.php），它只有我正在寻找的基本简单格式选项对于。

我遇到的问题是编辑器下方的代码显示但单击样式（即粗体，下划线等）不会更新窗口。它似乎更新了基础HTML样式（虽然弹出嵌入式HTML编辑器窗口似乎也不起作用），但我没有看到样式更改。但是，如果我注释掉“formats：”块，那么就可以了。这是在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)

我获取了下载的archive \ 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格式选项，我甚至不需要任何真正的花哨。谢谢你的帮助！

Answer 1

TinyMCE的粗体，斜体，下划线的默认行为是使用与格式相关联的html实体。示例：<strong></strong>，<em></em>以及带下划线内联样式的范围。

似乎Formats代码块覆盖了这个操作，而是将您的选择包装在带有“classes”属性定义的类名的span中。

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

如果我没记错的话，TinyMCE会使用iframe在文本区域上呈现其UI，因此只需链接样式表就可以为您的前端工作，为了在编辑框中显示，您需要通过以下链接到样式表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"

    ...

TinyMCE自定义格式打破了设置风格的能力？

1 个答案: