• <bdo id="1ftk3"></bdo>
      <bdo id="1ftk3"></bdo>

      1. 歡迎來到合肥浪訊網絡科技有限公司官網
          咨詢服務熱線:400-099-8848

        “互聯網颶風”席卷影業 “內容為王”無可取代

        發布時間:2015-04-24 文章來源:  瀏覽次數:2890

        UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編纂器,具有輕量、可定制、用戶體驗優秀等特點。開源基于BSD協議,所有源代碼在協議答應范圍內可自由修改和使用。


        一、下載UEditor編纂器

        在下載頻道可以下載到最新版本的UEditor


        UEditor的下載方式分為兩種,完整下載與定制下載,完整下載提供UTF-8與GBK兩種編碼的版本,定制下載目前只有UTF-8編碼,推薦使用定制下載,按需求定制,假如程序不是UTF-8編碼,可以使用EditPlus等工具將壓縮包里所有的HTML及JS文件轉碼,記得同時修改HTML文件中的charset=utf-8。


        二、精簡UEditor編纂器


        完整版的相關文檔與示例頁面較多,可以自行研究一下。


        index.html是所定制的UEditor編纂器的示例文件,刪除之。


        editor.js與editor.min.js內容相同,editor.min.js是editor.js的壓縮版,使用時加載editor.min.js即可,所以editor.js也可以刪除。


        三、將UEditor部署到PHP程序上


        1.將UEditor的所有文件放在PHP程序的目錄中,這里我把文件放在/ueditor目錄下。


        2.在網頁中引入UEditor文件


        <script type="text/javascript" src="ueditor/editor_config.js"></script>
        <script type="text/javascript" src="ueditor/editor.min.js"></script>
        3.在textarea標簽下初始化UEditor


        <script type="text/javascript">
        var editor = new UE.ui.Editor();
        textarea:'name'; //與textarea的name值保持一致
        editor.render('name');
        </script>
        四、配置UEditor編纂器


        editor_config.js是UEditor的配置文件,首先對路徑進行配置。


        修改第27行左右的路徑配置(根據版本不同可能會有變動)


        URL = "ueditor/";  //根據實際情況配置
        保留,OK搞定,UEditor編纂器就能使用了,此時同樣可以使用POST或者GET接收到提交的數據。


        editor_config.js里還有良多常用的配置項目,好比編纂器初始內容、編纂器高度等等,需要配置時只需去掉該行代碼前面的注釋符號//即可。


        使用定制版的童鞋可以下載一個完整版,里面的配置文件比較完整,有些東西可以COPY過來。


        五、UEditor代碼高亮


        UEditor代碼高亮使用了第三方的高亮JS組件 – SyntaxHighlighter,在測試的過程中題目不少,使用UEditor編纂器“插入代碼”功能插入代碼并提交到數據庫后,在顯示頁面代碼是不會高亮顯示的,需要在該頁面加載一下JS和CSS文件。


        <script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
        <link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />
        <script>
        SyntaxHighlighter.all() //執行代碼高亮
        </script>
        還有一個題目,當再次使用UEditor編纂之條件交到數據庫的代碼時,編纂器會自動過濾掉代碼中的良多標簽,今天在微博上@了一下UEditor團隊,UEditor團隊的人說需要先轉義。


        我在提交至數據庫之前用PHP的htmlspecialchars函數進行轉義:


        $content = htmlspecialchars($_POST[codeContent]);
        輸出頁面執行htmlspecialchars_decode函數后輸出:


        echo htmlspecialchars_decode($Row["content"]);
        再查看了官方的文檔,官方推薦把textarea容器更換為script容器


        <script type="text/plain" id="content" name="content">
        //從數據庫中掏出的內容打印到此處
        </script>
        此處采用了script標簽作為編纂器容器對象,并設置了其類型是純文本,從而在避免了標簽內部JS代碼執行的同時解決了使用傳統的textarea標簽作為容器所帶來的一次額外轉碼題目,我同時使用了轉義和更換textarea容器的方式。


        簡樸測試了HTML、PHP、JAVASCRIPT和C++代碼,暫時沒發現題目。


        總體來說,UEditor是一個很不錯的富文本編纂器,但是因為開發時間不長,還需慢慢完善。

        上一條:騰訊QQ將投入10億資源...

        下一條:博覽安全圈第四期;雅虎2...

      2. <bdo id="1ftk3"></bdo>
          <bdo id="1ftk3"></bdo>

          1. {关键词}