Java 设置textarea Wicket的文本样式

我有一个由文本行组成的字符串。我想输入这些行到一个文本区域与一些css样式（如改变一些行的颜色）。如何做到这一点？

使用tinymce编辑器
或者您可以使用任何类型的Javascript所见即所得编辑器

将tinymce添加到页面

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></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 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,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",

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

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",

    // Replace values for the template plugin
    template_replace_values : {
            username : "Some User",
            staffid : "991234"
    }
});
</script>

tinyMCE.init({
//一般选择
模式：“文本区域”，
主题：“高级”，
插件：“自动链接、列表、拼写检查器、分页符、样式、图层、表格、保存、advhr、advimage、advlink、情感、iSpell、inlinepopups、insertdatetime、预览、媒体、搜索替换、打印、上下文菜单、粘贴、方向性、全屏、不可编辑、visualchars、非中断、xhtmlxtras、模板”，
//主题选项
主题_高级_按钮1：“保存、新建文档、|、粗体、斜体、下划线、删除线、|、左对齐、居中对齐、右对齐、满对齐、|、样式选择、格式选择、字体选择、字体大小选择”，
主题高级按钮2：“剪切、复制、粘贴、粘贴文本、粘贴文字、搜索、替换、布利斯特、numlist、outdent、indent、blockquote、|、撤消、重做、链接、取消链接、锚定、图像、清理、帮助、代码、插入日期、插入时间、预览、前景色、后景色”，
主题|高级|按钮3：“表格控件，|，hr，removeformat，visualaid，|，sub，sup，|，charmap，情感，易趣，媒体，advhr，|，打印，|，ltr，rtl，|，全屏”，
theme_advanced_按钮4:“插入层、向前移动、向后移动、绝对、|、styleprops、拼写检查器、|、引用、缩写、首字母缩略词、del、ins、attribs、|、visualchars、非中断、模板、块引号、页面中断、|、插入文件、插入图像”，
主题\高级\工具栏\位置：“顶部”，
主题\高级\工具栏\对齐：“左”，
主题\高级\状态栏\位置：“底部”，
主题\u高级\u大小调整：正确，
//皮肤选择
皮肤：“o2k7”，
皮肤变种：“银色”，
//示例内容CSS（应该是您的网站CSS）
content_css：“css/example.css”，
//链接/图像/媒体/模板对话框的下拉列表
模板\u外部\u列表\u url:“js/template\u list.js”，
外部链接列表url:“js/link\u list.js”，
外部图片列表url:“js/image\u list.js”，
媒体外部列表url:“js/media\u list.js”，
//替换模板插件的值
模板替换值：{
用户名：“某个用户”，
标记：“991234”
}
});

TinyMCE

在编辑器中呈现CSS和其他标记的工作非常出色

为了方便地在Wicket中包含这一点，我建议使用

org.wicketstuff.tinymce parent

包。开发/源代码在GitHub中，实际版本在公共maven存储库中

然后，您可以使用标准Wicket TextArea组件并向其添加TinyMCE行为，而不是直接使用javascript

---

一个缺点是，虽然TinyMCE非常成熟，但它也有一些模糊的bug。如果可能的话，最好保持简单。

我还是会推荐Wicketstuff TinyMCE套装。不一定更容易，但更适合Wicket应用程序。