0

JSF で tinymce エディターを使用していますが、Backing Bean でこの値を取得する方法がわかりません。誰かがこれを以前に使用したことがある場合は、これを行う際に私を助けてください.

       <script src="resources/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
    tinyMCE.init({
   // General options
    mode : "textareas",
    theme : "advanced",
    plugins :  "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

   // Theme options
   theme_advanced_buttons1 :"bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
   theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,preview,|,forecolor,backcolor",
   theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,styleprops,spellchecker,|,insertfile,insertimage",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "left",
   theme_advanced_statusbar_location : "bottom",
   theme_advanced_resizing : true,

   // Skin options
   skin : "o2k7",
   skin_variant : "silver",

  content_css : "css/example.css",

 });


   <ice:inputTextarea id="content" value="${bean.passage}" partialSubmit="true"/>
4

2 に答える 2

1

value="${bean.passage}"で置き換えvalue="#{bean.passage}"ます。は${}セッター メソッドを呼び出すことはできませんが、呼び出すことは#{}できます。

于 2012-04-16T11:52:11.723 に答える
0

セレクターで tinyMCE を jsf コンポーネントに接続します

次の例では、関数「loadMyEditor()」を含む独自の JavaScript ファイル「loadhtmleditor.js」をロードします。この関数はbody onloadで呼び出されます。この JavaScript 関数では、モードではなくセレクターによって tinyMCE を jsf コンポーネントに接続します。セレクター引数には、接続するコンポーネントの html-id を記述します。この引数では、jsf によって生成された html-id の「:」セパレーターを 2 つのバックスラッシュでマスクする必要があることに注意してください。この例では: selector : "#myForm\\:myHtmlText"

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <script src="resources/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script src="resources/loadhtmleditor.js" type="text/javascript"></script>
</h:head>
<h:body onload="loadMyEditor();">
    <h:form id="myForm">
        <h:inputTextarea id="myHtmlText" value="#{bean.htmlText}">
        </h:inputTextarea>
    </h:form>
</h:body>
</html>

loadhtmleditor.js:

function loadMyEditor()
{
    tinyMCE.init({
           // General options
            selector : "#myForm\\:myHtmlText",
            theme : "advanced",
            plugins :  "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
           // Theme options
           theme_advanced_buttons1 :"bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
           theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,preview,|,forecolor,backcolor",
           theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,styleprops,spellchecker,|,insertfile,insertimage",
           theme_advanced_toolbar_location : "top",
           theme_advanced_toolbar_align : "left",
           theme_advanced_statusbar_location : "bottom",
           theme_advanced_resizing : true,
           // Skin options
           skin : "o2k7",
           skin_variant : "silver",
          content_css : "css/example.css",
         });
}

これは、jsf Bean を tinyMCE にバインドするのに十分なはずです!

追加:ユーザーが html コンテンツを変更したときにajax で反応したい場合は、tinyMCE エディターの作成を次のように拡張できます。

loadhtmleditor.js:

function loadMyEditor()
{
    tinyMCE.init({
           // General options
            selector : "#myForm\\:myHtmlText",
            theme : "advanced",
            plugins :  "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
           // Theme options
           theme_advanced_buttons1 :"bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
           theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,preview,|,forecolor,backcolor",
           theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,styleprops,spellchecker,|,insertfile,insertimage",
           theme_advanced_toolbar_location : "top",
           theme_advanced_toolbar_align : "left",
           theme_advanced_statusbar_location : "bottom",
           theme_advanced_resizing : true,
           // Skin options
           skin : "o2k7",
           skin_variant : "silver",

           init_instance_callback: function (editor)
           {
               editor.on('Change', function(e){myFunctionEditorChanged(editor);});
               editor.on('Paste', function(e){myFunctionEditorPasted(editor);});
           },
           content_css : "css/example.css"
         });
}


function myFunctionEditorChanged(editor)
{
    tinyMCE.triggerSave(); // to be shure, that the changed content is in your jsf-component...
    // do something to trigger an ajax request handeling the changed html content. 
}


function myFunctionEditorPasted(editor)
{
    tinyMCE.triggerSave(); // to be shure, that the changed content is in your jsf-component...
    // do something to trigger an ajax request handeling the changed html content. 
}

このようにして、ユーザーがキーボードまたはコンテンツの貼り付けによって html エディターに入力したすべての変更に対応できます。ユーザーがtinyMCEのメニューでhtmlコンテンツを変更したときに、通知を受ける方法が見つかりませんでした。（たとえば、ユーザーがいくつかの単語を太字に変更した場合...）

于 2019-07-25T16:49:48.883 に答える