我在JSF中使用tinymce编辑器,但我不确定如何在我的BackBean中获取此值。如果有人以前使用过这个,请帮助我这样做。
<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"/>
将value="${bean.passage}"
替换为 value="#{bean.passage}"
。${}
不能调用 setter 方法,但#{}
可以。
通过选择器将微小的MCE连接到jsf组件
在下面的示例中,您加载自己的 JavaScript 文件 "loadhtmleditor.js",其中包含函数 "loadMyEditor()"。此函数在身体加载中调用。在这个javascript函数中,你通过选择器而不是模式将tinyMCE连接到jsf组件。在选择器参数中,您编写要连接的组件的 html-id。请注意,在此参数中,jsf 生成的 html-id 中的 ':" 分隔符必须用两个反斜杠屏蔽!在此示例中:选择器 : "#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 绑定到微小的 MCE 中!
加法:如果你想在用户更改 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.
}
通过这种方式,您可以通过 keybord 或粘贴内容对用户输入到 html 编辑器的所有更改做出反应。当用户通过tinyMCE的菜单更改html内容时,我没有找到获得通知的方法。(例如,当用户将某些单词更改为粗体时...