2. 程式人生 > >富文字編輯器之wangEditor

富文字編輯器之wangEditor

阿新 • • 發佈：2019-01-12

  富文字編輯器想必大家都見過，無論是發表部落格還是論壇發帖、空間發表說說，這些軟體或網站都會用到富文字編輯器。那麼，作為programmer，我們如何給自己的程式碼加上一個富文字編輯器呢？實際的需求就是textarea這個標籤只能夠傳遞文字，而無法傳遞一些諸如圖片、表格之類的複雜元素，這個時候使用富文字編輯器就很有必要了。
  今天介紹一下我最近使用的一款輕便的富文字編輯器——wangEditor。
  官網地址：wangEditor官網-下載
  手冊地址：wangEditor3使用手冊
  下面介紹一下wangEditor3的使用方法：

一、下載與引入

  從官網上的下載地址下載壓縮包後，解壓開啟會看見如下目錄：
wangEditor目錄

將其中的release目錄下的檔案複製到自己專案的靜態資源目錄下，如我這裡：

wangEditorDemo

然後使用如下程式碼引用即可：

<script type="text/javascript" th:src="@{/wangEditor/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{/wangEditor/wangEditor.js}"></script>

  注：以上是springboot中thymeleaf模板下的寫法，此外也可以使用CDN引入，關於這一點在手冊中都有說明。

二、建立編輯器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>歡迎使用 <b>wangEditor</b> 富文字編輯器</p>
    </div>
    <button type="button"
 
 style="width:150px;height:30px;" onclick="submitEditor()">提交</button>

    <script type="text/javascript" th:src="@{/wangEditor/wangEditor.js}"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()

    </script>

    <script>
    function submitEditor(){
        //使用editor.txt.html()獲取編輯器裡的HTML，使用editor.txt.text()獲取編輯器裡的文字——即刪去HTML標籤的純文字
        console.log("html : "+editor.txt.html());
        console.log("text :"+editor.txt.text());
    }
    </script>
</body>
</html>

效果圖：
wangEditor

四、儲存編輯器內容至伺服器

上面我們成功建立了編輯器，可以編輯富文字，但怎麼將編輯器裡的內容儲存到伺服器呢，檢視wangEditor官方手冊可以找到：editor.txt.html()和editor.txt.text()用於獲取編輯器內容。

插入圖片連結，點選頁面上的提交按鈕，可以看到如下情景：

觀察下方控制檯裡面的輸出可以看到submitEditor()方法被觸發後的效果。

有關wangEditor的部分就介紹到這裡，關於選單配置、圖片上傳等內容請移步wangEditor3使用手冊；

相關推薦

富文字編輯器之wangEditor

  富文字編輯器想必大家都見過，無論是發表部落格還是論壇發帖、空間發表說說，這些軟體或網站都會用到富文字編輯器。那麼，作為programmer，我們如何給自己的程式碼加上一個富文字編輯器呢？實際的需求就是textarea這個標籤只能夠傳遞文字，而無法傳遞一些諸如

wangEditor富文字編輯器使用及圖片上傳

<script type="text/javascript" src="style/js/wangEditor.min.js"></script> <div id="editor"> </div> 建立富文字編輯器 var E = wi

vue中引入wangEditor富文字編輯器

1.wangEditor —— 輕量級 web 富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器。 下載wangEditor：npm install wangeditor（英文小寫） 官網：www.wangEditor.com 文件：www.kancloud.cn/wa

vue中同時使用element元件的upload上傳圖片和wangEditor富文字編輯器

1.wangEditor —— 輕量級 web 富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器。 下載wangEditor：npm install wangeditor（英文小寫） 官網：www.wangEditor.com 文件：www.kancloud.cn/wa

使用wangEditor富文字編輯器遇到的問題總結

怎麼使用和安裝我就不詳細說了，文件寫得很清楚，https://www.kancloud.cn/wangfupeng/wangeditor3/332599 1、當螢幕縮時，富文字編輯器的選項會被隱藏，如下圖官網的demo：當螢幕變小時，選單選項就超出了富文字編輯器的區域，撤回和恢復已經隱藏不見

vue2.0專案使用wangEditor富文字編輯器

首先 npm install wangeditor  然後，直接寫就行，也無需引入css樣式  <template> <div class="detailPage"> <div id="editor">

Django專案之CKEditor富文字編輯器

1. 安裝 pip install django-ckeditor 2. 新增應用 在INSTALLED_APPS中新增 INSTALLED_APPS = [ ... 'ckedito

wangEditor+SringBoot富文字編輯器使用（圖片上傳）

最近專案中使用到了wangEditor外掛，在此記錄使用過程。 思路：點選外掛中上傳圖片，圖片上傳至伺服器臨時圖片資料夾下，當最後點選確認儲存按鈕時，再把臨時資料夾下的圖片複製到正式的資料夾下面。 在HTML中引入wangEditor.js： <!--引入

wangEditor富文字編輯器的簡單使用

第二步：專案中引入js   第三步：jsp頁面中使用 <%@ page language="java" contentType="text/html; charset=UTF-8"

Django之富文字編輯器的使用，超級簡單~

前端顯示： Step1: pip3 install django-tinymce Step2: <script src="/static/tiny_mce/tiny_m

【vue】使用wangeditor富文字編輯器

前言： 本專案需要一個輕量級的，能夠顯示原始碼的富文字編輯器。 經查詢對比後，選擇wangeditor，但是發現wangeditor3（最新版）中沒有展示原始碼的功能，故選擇wangeditor2。 使用方法： 1.下載： 選擇npm安裝：因為目前預設版本為3.

HTML富文字編輯器wangEditor的使用

HTML富文字編輯器wangEditor的使用 官網 http://www.wangeditor.com/ 用法官方文件已經講得很清楚了，我這裡只貼出程式碼，方便以後自己貼上複製用 用到的CSS wangEditor-fullscreen-plugin.css

輕量型編輯器 使用wangEditor富文字編輯器

今天忽然想起來搞一下富文字編輯器的使用，本來想用百度的ueditor，但是貌似校園網給牆了。然後從知乎上發現了這個編輯器，優點是介面簡潔，文件比較清楚。缺點也顯而易見，比較簡陋，要求不是很高的話，還是可以的 :) 下載解壓完成之後，用到的只有dist這個檔案。

輕量級富文字編輯器wangEditor原始碼結構介紹

1. 引言 　　wangEditor——一款輕量級html富文字編輯器（開源軟體） 　　從我釋出wangEditor到現在，大概有七八個月了，隨著近期增加的插入視訊，表情，地圖這三個功能，目前為止基本的功能已經大體完善了。這期間也修改了幾個bug，都是各位網友反映的。至

更加簡潔易用——wangEditor富文字編輯器新版本釋出

1. 前言 　　wangEditor富文字編輯器（www.wangEditor.com）從去年11月份釋出，至今已經有將近10各月了。它就像一個襁褓中的小嬰兒，在我的努力以及眾多使用者的支援下不斷摸索、成長。就像這麼大的小孩一樣，它的下一個目標是要自己站起來、自己走下去。

wangEditor富文字編輯器+react+antd的使用

1、github上發現富文字編輯器： 2、結合react+antd的具體使用： 案例使用場景：MyModal為彈窗，彈窗顯示 編輯名稱及描述。描述使用wangeditor富文字編輯器實現。 MyModal.js import { Form,

富文字編輯器WangEditor,實現圖片上傳OSS雲端儲存

首先，下載WangEditor外掛，下載地址：https://github.com/wangfupeng1988/wangEditor/releases，下載最新的就好了，使用文件地址：第二步，解壓檔案

【ASP.NET】6.百度富文字編輯器UEditor之從資料庫中取出來頁面展示

    將資料存到資料庫中了，那麼怎麼讓資料原樣顯示到編輯器裡呢？讀取資料庫裡一條資料，獲取到的資料是這樣的：<p style="text-align:center;"> <img src="/LJWY/MGMT/attached/image/2016-1

wangEditor 基於javascript和css開發的 Web富文字編輯器， 輕量、簡潔、易用、開源免費

介紹 wangEditor —— 輕量級 web 富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器。 介面效果圖： 使用方法： 1、常規使用方法 注意，以下程式碼中無需引用任何 C

富文字編輯器 wangEditor 使用

軟體特點支援 npm 直接引用支援響應式，自動縮放沒有官方的例項銷燬方案，專案中使用的是作者在github給出的臨時方案支援一個頁面多個編輯器不支援一個頁面多個編輯器同時使用地圖後端需要進行相應配置安裝 wangEditornpm install wangeditor --save程式碼引入 wangEdit