富文本編輯器使用

原文地址：http://www.javayihao.top/detail/169

這裏介紹兩種常見的富文本使用方式

第一種NicEdit

官網描述：

What is NicEdit?

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.

NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing

什麼是NicEdit？
NicEdit是一個輕量級，跨平臺的內聯內容編輯器，能夠輕鬆地在瀏覽器中即時編輯網站內容。
NicEdit Javascript能夠在幾秒鐘內集成到任何站點中，以使任何元素/ div可編輯或將標準文本區域轉換爲富文本編輯。

官網地址

http://www.nicedit.com/index.php

如何使用

只需引入官網的一個js文件和一個圖片便可

<script type="text/javascript" src="../nicEdit.js"></script> <script type="text/javascript"> bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); </script> <h4>First Textarea</h4> <textarea name="area1" cols="40"></textarea>

​

效果展現

其中用到的gif圖片的位置能夠修改js文件配置。

案例代碼獲取方式 ，關注微信公衆號    java一號  回覆  「富文本」 便可

第二種kindeditor

官網描述

KindEditor 是什麼？

KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，開發人員能夠用 KindEditor 把傳統的多行文本輸入框(textarea)替換爲可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，能夠無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。

官網地址

http://kindeditor.net/demo.php

如何使用

1.1.  使用方法

第一步：在jsp中引入KindEditor的css和js代碼。

<link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
 <script src="jquery-1.10.1.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
 <script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>

 

第二步：在表單中添加一個textarea控件。是一個富文本編輯器的載體。相似數據源。

<form action="editor.html" method="post">
    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc" id="editor"></textarea>
    <input type="submit"/>
 </form>

 

第三步：初始化富文本編輯器。使用官方提供的方法初始化。

<script type="text/javascript" >
    var kingEditorParams ={
        filePostName  : "file",//指定上傳文件參數名稱
        uploadJson:'upload2.html',//指定上傳文件請求的url。
        dir:"image"//上傳類型，分別爲image、flash、media、file
    }
    var editor;
    $(function () {
        editor=KindEditor.create($("#editor"),kingEditorParams);
    })
 </script>

js提交請求的時候，同步富文本框到textarea

editor.sync();//同步富文本編輯器到textarea

上傳圖片時controller方法：

@ResponseBody

String json = "{\"error\":0,\"url\":\"" + url + "\"}";

獲取kindeditor方式 ，關注微信公衆號    java一號  回覆  「富文本」 便可

總結：我我的仍是喜歡使用NicEdit，配置簡單、文件小