網頁編輯器

時間  2019-11-22
標籤 網頁 編輯器 欄目 HTML 简体版
原文   原文鏈接

 

1.CKEditor\CKFinder

國外知名編輯器 javascript

1.官方文檔，演示，下載地址：http://ckeditor.com/downloadphp

一個專門使用在網頁上屬於開放源代碼的所見即所得文字編輯器。它志於輕量化，不須要太複雜的安裝步驟便可使用。css

1.1 配置步驟以及一些經常使用配置

1.引入<script src="ckeditor/ckeditor.js" type="text/javascript"></script> html

2.頁面代碼前端

    <!--第一個--->
    <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
    <!--第二個--->
    <div id="editorSpace"></div>  <!--直接設置class好像也行的能夠試試--->
    <script type="text/javascript">
        CKEDITOR.appendTo('editorSpace');
    </script>

 

3.配置ckeditor的一些經常使用配置，在config.js這個文件中，java

全部的屬性配置均可以查閱官方的API：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.htmlweb

4.列出一些經常使用的屬性配置,配置圖片上傳：bootstrap

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    //config.width=700;   
    //config.height=400;
    //config.skin='v2';   //自帶皮膚種類有3種：Kama（默認） ， Office 2003 ， v2
   //config.font_names = '宋體;楷體 _GB2312;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';



    //若是上傳圖片或者flash則須要，下面配置ckfinder
    var ckfinderPath = "/SomePackage/FCKeditor/ckfinder";  //配置爲絕對路徑
   
    config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html";
    config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image";
    config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash";
    config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files";
    config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images";
    config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash";
};

 

5.若是上傳圖片則需在項目中添加ckfinder文件api

7.改變ckfinder文件夾下的config.ascx,內容以下：瀏覽器

public override bool CheckAuthentication()
    {
        //object str = session["username"];
        //if (str != null & Convert.ToBoolean(str) == true)
        //{
        //    return true;
        //}
        return true;   //不建議直接返回true，最好作下用戶驗證判斷在返回true（安全）,上面爲驗證的一個實例
    }
複製代碼

 

9.去除廣告方法：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，將其中的 en.call(window,qo);去掉

很強大，很好用。世界各地都在用的

1.2 在JSP裏使用CKEditor和CKFinder

【注】原文的做者是爲了作一個新聞發佈平臺,

儘管免費的CKFinder是Demo版本，可是功能完整

正常的是話是按照官網的document一步一步配置，雖然並不難，可是有些東西特別分散，仍是全英文的

1. 下載CKEditor相關的安裝文件

  • CKEditor: 在 http://ckeditor.com/download 頁面左側，能夠下載到各類版本的CKEditor，包括完整版full、標準版standard、基礎版basic等。在頁面右側上方，還有可定製的下載，能夠選擇Toolbar類型、插件、語言等。我選擇4.6版本的Full版本，下載後獲得CKEditor_4.6.2_full.zip 。
  • CKEditor for java: 在http://ckeditor.com/download 頁面右側下部，能夠下載到用於服務器端的工具，記得選擇for java版本。這裏選擇3.5.3版本,下載後獲得ckeditor-java-core-3.5.3.zip
  • CKFinder: 在 http://cksource.com/ckfinder/trial 頁面，能夠下載到各類版本的CKFinder。仍然選擇java版。這裏我下載的是2.6.2.1版本，下載後獲得ckfinder_java_2.6.2.1.zip

 

2. 安裝CKEditor和CKFinder

  • 解壓CKEditor_4.6.2_full.zip ，把解壓獲得的目錄 ckeditor 徹底複製到網站根目錄下，也就是和WEB-INF同級。能夠給這個目錄加上版本號，即ckeditor4.6。
  • 把 ckeditor4.6/samples 徹底刪掉，把 ckeditor4.6/lang 裏面除了en.js和zh-cn.js以外的文件刪掉，把 ckeditor4.6 下的README.md, CHANGES.md刪掉。
  • 把 ckeditor-java-core-3.5.3.jar 放到yourapp/WEB-INF/lib下
  • 解壓ckfinder_java_2.6.2.1.zip，獲得ckfinder目錄。將 ckfinder/CKFinderJava/ckfinder 目錄徹底複製到網站根目錄下，也就是和WEB-INF同級。能夠給這個目錄加上版本號，即ckfinder2.6.2.1。
  • 把 ckfinder2.6.2.1/_samples徹底刪掉，把 ckfinder2.6.2.1/lang 下除了en.js和zh-cn.js以外的文件刪掉，把 ckfinder2.6.2.1下的changelog.txt，install.txt，license.txt，translations.txt刪掉。
  • 把 ckfinder/CKFinderJava/WEB-INF/lib 下全部的jar包複製到yourapp/WEB-INF/lib下。
  • 把 ckfinder/CKFinderJava/WEB-INF/config.xml複製到yourapp/WEB-INF下，並更名爲ckfinder.xml。

3. 在網頁裏使用CKEditor

Step1：找到須要放置CKEditor編輯器的頁面，引入CKEditor的js文件（${contextPath}是JSTL寫法，請改爲你本身的路徑寫法，絕對路徑或者相對路徑）

<script type="text/javascript" src="${contextPath}/ckeditor4.1/ckeditor.js"></script>

Step2：在須要提交的form裏，寫一個<textarea>

<form id="detailForm" method="post">
    <textarea id="content" name="content"></textarea>
    <input type="button" value="保存" id="save" onclick="save()" />
</form>

Step3：建立CKEditor實例

<script type="text/javascript">
    var editor = null;
    window.onload = function(){
        editor = CKEDITOR.replace('content'); //參數‘content’是textarea元素的name屬性值，而非id屬性值
    }
</script>

注意上面代碼中editor=CKEDITOR.repalce()必須寫在window.onload事件裏，或者寫在textarea元素後面，以避免出現content不存在的錯誤。上述代碼並非建立CKEditor實例的惟一方法，你們能夠自行查閱資料。

Step4：在頁面js中爲CKEditor編輯器設置/獲取值

editor.setData('這裏是須要傳遞給CKEditor編輯器實例的值');
editor.getData();

注意，上面代碼中用到了一個變量editor，就是Step3中定義的那個editor。這也就是爲何Step3裏面要單獨寫var editor = null這句代碼。固然，在<textarea></textarea>中直接設置值也能夠，可是那隻能在CKEDITOR.replace()以前起做用。

  Step5：在後臺java代碼中獲取CKEditor編輯器的值

<script type="text/javascript">
    function save(){
        editor.updateElement(); //很是重要的一句代碼
        //前臺驗證工做
        //提交到後臺
    }
</script>

由於CKEditor編輯器取代了原來咱們寫的textarea元素，因此咱們在編輯器裏寫的內容，其實都不在textarea中，所以，爲了能在後臺經過textarea得到值，必須用editor.updateElement()來更新textarea元素。這樣，在後臺java代碼中就能夠用request.getParameter('content');或者其餘代碼獲得編輯器的內容了，不然獲得的極可能不是編輯器裏的內容。

4. CKEditor的三種配置方式

方式一：修改ckeditor4.1/config.js文件

CKEDITOR.editorConfig = function( config ) {
    config.language = 'zh-cn';
    config.uiColor = '#AADC6E';
};

方式二：複製ckeditor4.1/config.js，仍然放在ckeditor4.1目錄下，可是更名爲myconfig.js，並在這個文件中修改配置。可是要在建立編輯器實例時指明配置文件路徑：

<script type="text/javascript">
    var editor = null;
    window.onload = function() {
        editor = CKEDITOR.replace( 'content', {
            customConfig:'${contextPath}/ckeditor4.1/myconfig.js'
        });
    };
</script>

方式三：在建立編輯器實例時指定配置

<script type="text/javascript">
    var editor = null;
    window.onload = function() {
        editor = CKEDITOR.replace( 'content', 
            uiColor: '#9AB8F3',
            language:'zh-cn'
        });
    };
</script>

使用第二種或者第三種方式的好處就在於，當你更新CKEditor版本時，不至於由於直接複製了新的config.js而覆蓋掉個性配置。

5. CKEditor的一些配置選項

完整的CKEditor的配置選項在 這裏。下面是一些經常使用的配置。

  • language，defaultLanguage，contentLanguage, uiColor
  • autoGrow_maxHeight, autoGrow_minHeight, resize_maxHeight, resize_minHeight, resize_maxWidth, resize_minWidth
  • toolbarCanCollapse, toolbarGroups
  • forcePasteAsPlainText, pasteFromWordKeepsStructure, pasteFromWordRemoveFontStyles, pasteFromWordRemoveStyles
  • font_names, fontSize_sizes

 

6. 關於CKEditor編輯器裏面回車的問題

在CKEditor編輯器裏面敲回車，默認是加一個<p></p>元素，並且在<p>以前和</p>以後會加換行。這就形成一個問題，保存的數據最後可能會出現「\t\n」。當咱們使用editor.setData(......)時，實際上變成了

editor.setData(......);

由於數據自己帶有一個\t\n，使得js代碼換行了，從而頁面出錯。可能還有其餘方法解決這個問題，可是我採用的是禁止在回車變<p></p>時在後面添加換行。其方法是：

<script type="text/javascript">
    var editor = null;
    window.onload = function() {
        editor = CKEDITOR.replace( 'content', {
            customConfig:'${contextPath}/ckeditor4.1/myconfig.js',
        
            on: {
                instanceReady: function( ev ) {
                    this.dataProcessor.writer.setRules( 'p', {
                        indent: false,
                        breakBeforeOpen: false,   //<p>以前不加換行
                        breakAfterOpen: false,    //<p>以後不加換行
                        breakBeforeClose: false,  //</p>以前不加換行
                        breakAfterClose: false    //</p>以後不加換行7
                    });
                }
            }
        });
    };
</script>

  關於這部份內容，更多內容參看 http://docs.ckeditor.com/#!/guide/dev_output_format

 

7. 將CKFinder整合進CKEditor

沒有CKFinder，CKEditor做爲一個編輯器，也是能夠正常使用的，可是沒法在編輯器裏瀏覽服務器上的用戶上傳文件。因此要整合CKFinder。

  Step1：在頁面中引入CKFinder的js文件

<script type="text/javascript" src="${contextPath}/ckfinder2.3.1/ckfinder.js"></script>

Step2：建立CKFinder實例

<script type="text/javascript">
    var editor = null;
    window.onload = function() {
        editor = CKEDITOR.replace( 'content', {
            customConfig:'${contextPath}/ckeditor4.1/jwc_config.js'
        });
        CKFinder.setupCKEditor( editor, '${contextPath}/ckfinder2.3.1/' );
    };
</script>

最後一段代碼(CKFinder.setupCKEditor...)，第一個參數是CKEditor實例，第二個參數是ckfinder的目錄(最好寫絕對路徑)，注意最後要帶斜槓'/'。    

    Step3：在CKEditor裏配置經過哪一個頁面或者程序來瀏覽和上傳文件

    找到你的項目裏配置CKEditor的位置(參看本文CKEditor的三種配置方式部分)，配置如下內容：

CKEDITOR.editorConfig = function( config ) {
    //其餘一些配置
    filebrowserBrowseUrl = '/ckfinder2.3.1/ckfinder.html';
    filebrowserImageBrowseUrl = '/ckfinder2.3.1/ckfinder.html?type=Images';
    filebrowserFlashBrowseUrl = '/ckfinder2.3.1/ckfinder.html?type=Flash';
    filebrowserUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Files';
    filebrowserImageUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Images';
    filebrowserFlashUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};

上面的六行代碼，指定了經過ckfinder2.3.1/ckfinder.html來瀏覽圖片或者其餘文件，經過/ckfinder2.3.1/core/connector/java/connector.java來上傳文件。

8. 配置CKFinder

找到yourapp/WEB-INF/ckfinder.xml，編輯其中的內容。下面簡要介紹一下每一項的含義，其餘未介紹的內容請參照ckfinder.xml自己的註釋以及 這裏。

  • enabled：true表示開啓ckfinder功能。默認是false。
  • baseDir：上傳文件存放的路徑，這裏必須寫從物理地址的全路徑，好比C:\myapp\uploadfiles\。不能寫相對路徑，並且最後必定要加斜槓「/」。這一項能夠不配置，留空的話，系統會自動根據baseURL去找到baseDir。可是建議仍是配置上比較好。
  • baseURL：上傳文件存放的URL，這裏能夠寫一個相對路徑或者一個完整的URL，好比"http://www.example.com/uploadfiles/" 或者 "/uploadfiles/"。注意，必定要在最後加一個斜槓「/」。更多解釋參看這裏。
  • types：指定上傳文件的類型。它的子元素是<type name=""></type>，其中的name要和上面CKEditor裏配置的路徑的type一致。好比上面配置了filebrowserImageBrowseUrl = 'ckfinder2.3.1/ckfinder.html?type=Images'，那麼就要配一個<type name="Images"></type>。在<type></type>元素裏，能夠配置該類型文件存放的子目錄(放在baseDir下)、子URL、文件最大字節數、容許上傳的文件擴展名、禁止上傳的文件擴展名。
  • disallowUnsafeCharacters：設置爲false。若是設置爲true，在建立文件夾或者上傳文件時，名字裏不能包含不安全的字符。這隻在IIS裏生效。
  • checkDoubleExtension：檢查多級擴展名，或許你禁止用戶上傳php文件，容許用戶上傳rar文件。若是此項設置爲false，文件foo.php.rar就會上傳到服務器，這不安全。所以此項設置爲true。
  • secureImageUploads：設置此項爲true，能夠檢查文件究竟是不是圖片，頗有可能有人把一個可執行文件加了後綴變成了.jpg，但實際上它不是一個圖片文件。

9. 在項目裏配置CKFinder的servlet

找到yourapp/WEB-INF/web.xml，添加如下內容：

<servlet> 
    <servlet-name>ConnectorServlet</servlet-name> 
    <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
    <init-param> 
        <param-name>XMLConfig</param-name> 
        <param-value>/WEB-INF/ckfinder.xml</param-value> 
    </init-param> 
    <init-param> 
        <param-name>debug</param-name> 
        <param-value>false</param-value> 
    </init-param> 
    <load-on-startup>1</load-on-startup> 
</servlet> 
<servlet-mapping>
    <servlet-name>ConnectorServlet</servlet-name> 
    <url-pattern> /ckfinder2.3.1/core/connector/java/connector.java </url-pattern> 
</servlet-mapping>

上面配置裏第一個init-param是指定CKFinder的配置文件位置。也就是上面第8部分提到的那個配置文件。

10. 更安全地使用CKFinder

目前來講，CKFinder可以正常地使用了。可是，即使沒有你的項目的管理權限，在瀏覽器中輸入yoursite/ckfinder2.3.1/ckfinder.html，也同樣能看到你的服務器上存放的那些文件，他們甚至能夠上傳和刪除文件。有兩個地方能夠增強CKFinder的安全性。

在yourapp/WEB-INF/ckfinder.xml裏配置訪問權限
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<accessControls>
    <accessControl>
        <role>admin</role>
        <resourceType>*</resourceType>
        <folder>/</folder>
        <folderView>true</folderView>
        <folderCreate>true</folderCreate>
        <folderRename>true</folderRename>
        <folderDelete>false</folderDelete>
        <fileView>true</fileView>
        <fileUpload>true</fileUpload>
        <fileRename>true</fileRename>
        <fileDelete>false</fileDelete>
    </accessControl>
</accessControls>

而後在java代碼中合適的位置，好比login()方法裏，添加如下代碼

request.getSession().setAttribute("CKFinder_UserRole", "admin");

  系統會在訪問yoursite/ckfinder2.3.1/ckfinder.html時（包括點擊下圖的「瀏覽服務器」按鈕），檢查CKFinder_UserRole的值是什麼，它具備的權限是什麼。若是一我的沒有登陸系統，而是直接訪問yoursite/ckfinder2.3.1/ckfinder.html，那麼系統就會檢查到CKFinder_UserRole是null，他就看不到服務器上的文件。

 

自寫代碼檢查用戶是否有權限使用CKFinder

在yourapp/WEB-INF/web.xml裏，修改關於ckfinder的配置，增長一段代碼：

<servlet> 
    <servlet-name>ConnectorServlet</servlet-name> 
    <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
    <init-param>
        <param-name>configuration</param-name>
        <param-value>mypackage.CKFinderConfiguration</param-value>
    </init-param>
    <init-param> 
        <param-name>XMLConfig</param-name> 
        <param-value>/WEB-INF/ckfinder.xml</param-value> 
    </init-param> 
    <init-param> 
        <param-name>debug</param-name> 
        <param-value>false</param-value> 
    </init-param> 
    <load-on-startup>1</load-on-startup> 
</servlet> 
<servlet-mapping>
    <servlet-name>ConnectorServlet</servlet-name> 
    <url-pattern> /ckfinder2.3.1/core/connector/java/connector.java </url-pattern> 
</servlet-mapping>

在包路徑mypackage下建立一個類CKFinderConfiguration(包路徑和類名按照本身的項目代碼組織狀況來取名)，代碼以下：

import com.ckfinder.connector.configuration.Configuration;
public class CKFinderConfiguration extends Configuration {
    public CKFinderConfiguration(ServletConfig servletConfig) {
        super(servletConfig);
    }
    @Override
    protected Configuration createConfigurationInstance() {
        return new CKFinderConfiguration(this.servletConf);
    }
    @Override
    public boolean checkAuthentication(final HttpServletRequest request){
        String userid = request.getSession().getAttribute("userid");
        boolean logined = !userid.equals("");
        return logined;
    }
}

關鍵在於checkAuthentication()方法。能夠在checkAuthentication()方法裏編寫關於用戶認證的一些判斷，好比用戶是否登陸系統，用戶是否有權限管理上傳文件。若是符合條件，就返回ture，不然返回false。

    兩種方法均可以讓ckfinder更安全，固然同時使用會更好。可是注意二者區別，後者只能在比較粗的粒度進行控制。

 

原文: http://www.cnblogs.com/yuepeng/archive/2013/04/01/2992097.html

 

 

2. ueditor 百度編輯器

1.官方文檔，演示，下載地址：http://ueditor.baidu.com/website/index.html

2.百度編輯器的好：Editor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色。

3.若是想定製你想要的編輯器功能：查看官方網站的下載頁面便可。

4.編輯器展現：

5.百度編輯器配置。

1.載入js，css文件

<script src="ueditor/editor_config.js" type="text/javascript"></script>
    <script src="ueditor/editor_all.js" type="text/javascript"></script>
    <link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />

      2.頁面配置

<div id="myEditor"></div>   //能夠是aspx控件 只要id正確便可
<script type="text/javascript">
        var ue = new baidu.editor.ui.Editor();
        ue.render("myEditor");   //這裏填寫要改變爲編輯器的控件id
</script>

       3.editor_config.js  文件中的路徑配置

    var tmp = window.location.pathname;
    URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //這裏你能夠配置成ueditor目錄在您網站的相對路徑或者絕對路徑（指以http開頭的絕對路徑）

       4.若是你要使用傳圖片功能，還須要修改net文件下的幾個文件截圖說明吧（這個路徑能夠直接刪除的，試試。不行了本身再調整下）。

改成-->

        同理將net文件下其它文件相似的錯誤更正後便可上傳圖片。 

        圖片上傳默認位置爲：net文件夾下。上傳一張打開便可發現一個upload文件夾。

       5.ueditor 的不少默認配置都在 editor_config.js這個文件中，細心看的話，開啓或關閉其中的配置是能夠解決不少問題的。

       6.我在使用過程當中還遇到過編輯器內容影響總體頁面的佈局問題，這問題是在editor_all.js這個文件中修改的默認樣式問題的。         

複製代碼

 /**
         * 渲染編輯器的DOM到指定容器，必須且只能調用一次
         * @public
         * @function
         * @param {Element|String} container
         */
        render:function ( container ) {
            var me = this, options = me.options;
            if ( container.constructor === String ) {
                container = document.getElementById( container );
            }
            if ( container ) {
                var useBodyAsViewport = ie && browser.version < 9,
                        html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                                '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
                                ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
                                '<style type=\'text/css\'>' +
                            //這些默認屬性不可以讓用戶改變
                            //選中的td上的樣式
                                '.selectTdClass{background-color:#3399FF !important;}' +
                                'table.noBorderTable td{border:1px dashed #ddd !important}' +
                            //插入的表格的默認樣式
                                'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +
                            //分頁符的樣式
                                '.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +
                            //錨點的樣式,注意這裏背景圖的路徑
                                '.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' +
                            //設置四周的留邊
                                '.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +
                            //設置默認字體和字號
                                'body{margin:8px;font-family:\'宋體\';font-size:16px;}' +
                            //針對li的處理
                                'li{clear:both}' +
                            //設置段落間距
                                'p{margin:5px 0;}'
                                + ( options.initialStyle || '' ) +
                                '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

複製代碼

最後對這個編輯器總結下:很好用的，代碼很容易讀懂，便於修改配置爲本身喜歡的想要的。

 

3. bootstrap-wysiwyg 微型,開源的Bootstrap所見即所得富文本編輯器

http://www.bootcss.com/p/bootstrap-wysiwyg/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程