1

シンプルな wysiwyg エディターを追加したいテキストエリアがあります。私は 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)

ダウンロードしたアーカイブ \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>

私が間違っていることはありますか？彼らのサイトの例はうまく機能しているように見えるので、私の側に何らかの設定の問題があると思います。本当に私は、いくつかの基本的な HTML 書式設定オプションを提供するテキストエリア エディターを探しているだけです。本当に凝ったものは必要ありません。助けてくれてありがとう！

4

1 に答える 1

2

太字、斜体、下線に対する TinyMCE のデフォルトの動作は、フォーマットに関連付けられた html エンティティを使用することです。例: <strong></strong>、<em></em>、および下線のインライン スタイルを持つスパン。

代わりに、「classes」プロパティで定義されたクラス名を持つスパンで選択をラップすることにより、コードの Formats ブロックがこのアクションをオーバーライドしているようです。

上記のようにスタイルを format ブロックでレンダリングするには、.bold、.italic、.underline などの定義を含むスタイル シートを追加する必要があります。

私の記憶が正しければ、TinyMCE は iframe を使用してテキストエリアの上に UI をレンダリングします。そのため、フロント エンドではスタイルシートをリンクするだけで機能しますが、これを編集ボックスに表示するには、tinyMCE.init を介してスタイルシートにリンクする必要があります。 （） 物体。

フォルダー構造を使用して、スタイルシート\sample\tiny_mce\style.cssを追加し、その中でスタイルを定義してから、コードの format ブロックの下に次を追加します: 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 に答える