百度富文字編輯器效果圖如下：

實現：引用umeditor的js

jsp中定義：

<!--style給定寬度可以影響編輯器的最終寬度-->
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
    <p>這裡我可以寫一些輸入提示</p>
</script>

給script 一個id，js中例項化這個編輯器，獲得輸入內容

<div id="btns">
  <button class="btn" onclick="getContent()">獲得內容</button>&nbsp;
</div>
<script type="text/javascript">
    //例項化編輯器
    var um = UM.getEditor('myEditor');
   //獲取輸入內容
    function getContent() {
        var content=UM.getEditor('myEditor').getContent();
           alert("內容為:"+content);
    }
</script>

程式碼實現很簡單，主要是引用UMeditor的js和css

我把程式碼下載連結放出來，可以參考哦

連結：https://pan.baidu.com/s/1i5KSctv

提取碼：i1sv

如果：想使編輯器看起來更簡明，如下圖這樣：

我們可以在例項化編輯器中定義toolbar

var ue = UM.getEditor(
    'myEditor',
    {
        toolbar : [
                'source | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
                'insertorderedlist insertunorderedlist ',
                '| justifyleft justifycenter justifyright justifyjustify |',
                'link unlink | image insertvideo | fontfamily fontsize paragraph | preview | video ' ]
    });