jsp頁面整合xhEditor文字編輯器
經常寫部落格的都應該接觸文字編輯器,現在大多數都是使用Markdown,Markdown是一種可以使用普通文字編輯器編寫的標記語言,在文章中通過簡單的語法標記就可以實現文字的不同格式,對於Markdown,必須要有一定的語法基礎,其實也比較容易,個人還是用慣了比較原始的編輯器,在csdn中提供了Markdown和普通的富文字編輯器xhEditor,xhEditor對於初學者非常簡單,選中文字,點選上面的格式按鈕,就可以得到想要的格式,插入媒體檔案等等都可以。下面介紹在jsp頁面中怎樣整合xhEditor。
找到官網http://xheditor.com/,下載最新的版本,對於這種編輯器,大多數都是開源的,在網上搜索富文字編輯器可以搜尋到好多,都可以從網站上下載,還有就是這些富文字編輯器都是跨平臺的,因為他們幾乎都是用javascript指令碼語言進行編寫,他們的執行時依賴於瀏覽器的,只要是電腦上安裝了合適的瀏覽器,編輯器都是可以使用的,無論是什麼系統。
我下載的是1.2.2版本,解壓得到一個資料夾,裡面就是我們需要的檔案了,在檔案中都會給我們具體使用例項,告訴我們怎麼去整合。
開啟這個資料夾,可以看到很多的檔案,由於這種編輯器都是指令碼語言編寫,所以總共也沒有多大
第一個資料夾demos裡面就是一些例子,利用瀏覽器檢視原始碼就可以知道怎麼去用了,點選資料夾開啟:
先看demo01,開啟第一個demo後就會發現在第每個demo裡都有跳向其他demo的連結。裡面有很多的示例,就選擇最普通的預設模式,右鍵檢視原始碼
程式碼中引入了js的指令碼程式碼,在使用時用到了textarea文字框,其中class屬性是我們不需要改變的,外面用了一個表單接收傳遞內容。
在我們的jsp頁面中的head標籤中加入
在body標籤中加入一個form表單和textarea標籤<script type="text/javascript" src="xheditor-1.2.2/jquery/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="xheditor-1.2.2/xheditor-1.2.2.min.js"></script> <script type="text/javascript" src="xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
<form method="post" action="">
<textarea id="elm1" name="elm1" class="xheditor" rows="12" cols="80" style="width: 80%">
</textarea>
</form>
我們在表單的action屬性中新增要提交的位置,在Servlet中通過request.getParameter獲取即可,如果亂碼通過request.setCharacterEncoding("UTF-8");設定即可
執行專案得到:注意示例中給的textarea屬性中的name屬性是elm1不要寫成e1m1,我是直接拿來用了,建議修改一下,便於辨認
相關推薦
jsp頁面整合xhEditor文字編輯器
經常寫部落格的都應該接觸文字編輯器,現在大多數都是使用Markdown,Markdown是一種可以使用普通文字編輯器編寫的標記語言,在文章中通過簡單的語法標記就可以實現文字的不同格式,對於Markdo
在jsp頁面使用富文字編輯器
1) 下載ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip兩個壓縮檔案 2) 解壓縮檔案ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip兩個檔案, 在ckeditor_3.6.2檔案中有ckeditor資
django學習——xadmin中整合富文字編輯器ueditor
xadmin為django後臺管理系統admin的升級版,點選進入github 在對後臺進行編輯時,採用百度開源的富文字編輯器ueditor,本文采用djangoueditor,源程式點此進入。由於作者不再對其進行維護,這個版本不再適用於Python3版本,P
Vue + Webpack 完美整合富文字編輯器 TinyMce
<template> <textarea :id="id" :value="value"></textarea> </template> <script> // Import TinyMCE import tinym
SpringBoot整合富文字編輯器(UEditor)
UEditro是一款比較好用的富文字編輯器,所謂的富文字編輯器就是和伺服器互動的資料不是普通的字串檔案,而是一些內容包含比較廣的字串,一般是指的html頁面,目前比較好用的是百度的UEditor,到官方網站下載: http://ueditor.baidu.co
JSP頁面中嵌入UEditor編輯器方法
JSP頁面使用UEditor編輯器 對於一些剛入門的程式設計師來說,在一些實際的開發中可能會用到編輯器,那麼如何在JSP頁面中嵌入並使用編輯器(本文以百度的UEditor編輯器為例),以下是具體的操作流程: 第一步 首先要到UEditor官網下載不同版本的編輯器,使用者可以
JSP實現嵌入富文字編輯器UEditor的配置
最近在寫資料庫大作業——BBS論壇系統,其中發帖子內容時用到了UEditor,在此記錄一下。UEditor是由百度WEB前端研發部開發的所見即所得的開源富文字編輯器,具有輕量、可定製、使用者體驗優秀等特點。開源基於BSD協議,所有原始碼在協議允許範圍內可自由修改
ExtJs整合ckeditor文字編輯器
話說ExtJs對於管理類的系統還是很實用的,但是再好的框架也不一定涵蓋所有我們想要實現的功能,今天,我就將之前碰到的問題解決並分享給大家。 廢話不多說,直接步入正題。 1、首先去網上下載ckeditor文字編輯器並引入需要的檔案,再確定將ckeditor文字編輯器放到哪個位
SpringBoot2整合富文字編輯器wangEditor(含檔案上傳)攻略
背景 最近要用到一個富文字編輯器,記得遙遠的年代,調過Kingeditor、Ueditor。。。但是那些都很重,,,於是最近經常再留意這件事,直到最近看到一個wangEditor,體驗了一下,又輕又好用,功能也相對豐富夠用。 wangEditor有對應的CD
Flask學習10:Flask專案整合富文字編輯器CKEditor 上傳圖片
CKEditor下載地址:https://ckeditor.com/ckeditor-4/download/ 訪問CKeditor官方網站,進入下載頁面,選擇Standard Package(一般情況
SSM整合富文字編輯器editormd、常用Api、圖片上傳、回顯
前言: 幾天前,集成了百度的ueditor,感覺不符合現代前端的審美邏輯,並且肥胖,pass了,偶然發現editormd,覺得美滋滋,一路踩坑下來,特此記錄 editormd:支援 AMD / CMD 模組化載入(支援 Require.js & Se
Flask專案整合富文字編輯器CKeditor
本文介紹如何在Flask專案中整合富文字編輯器CKeditor,並實現圖片上傳、檔案上傳、視訊上傳等功能。 CKeditor是目前最優秀的可見即可得網頁編輯器之一,它採用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支援多種程式語言、開源等特點。它非常流行,網
Flask專案整合富文字編輯器UEditor
本文介紹如何在Flask專案中整合富文字編輯器UEditor,並實現檔案上傳、圖片上傳、視訊上傳及塗鴉功能。 UEditor簡介 UEditor是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器,具有輕量,可定製,注重使用者體驗等特點,開源基於MIT協議,允許自由使用和修改程式碼。 由於1.4
ofbiz——整合富文字編輯器ueditor
ofbiz自帶的富文字編輯器感覺很簡陋,所以想替換為百度的ueditor編輯器。 配置ueditor元件 整合到ofbiz後的ueditor元件(可以直接使用,不需要參考下面步驟配置了)。 2.我的ofbiz使用的預設編碼,應該是gbk,所以我下載了gbk版本。ue
SpringBoot2 整合 JSP檢視模板 整合 Ueditor富文字編輯器
一般涉及到後臺管理系統,就少不了富文字編輯器,這個可以圖文視訊混排高階工具,筆者通過對比,發現目前市場上最好的三方庫還當屬百度的 ueditor 近年來 SpringBoot 框架可謂越來越火,可是筆者發現 ueditor 只提供了對於 JSP 的版本,網上能找到很多繼承的案列,但是大部分都是修改原始碼,或
「newbee-mall新蜂商城開源啦」 頁面優化,最新版 wangEditor 富文字編輯器整合案例
大家比較關心的新蜂商城 Vue3 版本目前已經開發了大部分內容,相信很快就能夠開源出來讓大家嚐鮮了,先讓大家看看當前的開發進度: ![](https://img2020.cnblogs.com/blog/859549/202011/859549-20201101223235953-63093615.jpg)
vue整合百度UEditor富文字編輯器使用教程
在前端開發的專案中,難免會遇到需要在頁面上整合一個富文字編輯器。那麼,如果你有這個需求,希望可以幫助到你。 vue是前端開發者所追捧的框架,簡單易上手,但是基於vue的富文字編輯器大多數太過於精簡。於是我將百度富文字編輯器放到vue專案中使用。效果圖如下 前端精品教程:百度網盤下載 廢話不多說。
關於百度富文字編輯器整合到springboot的超級詳細總結
參考文章:https://blog.csdn.net/qq_33745799/article/details/70031641 如何整合就不講了,但是有幾點需要注意的,這是我踩過的坑 上面介紹的部落格,第8步,接通http://localhost:8080/config?action=con
laravel-admin整合百度富文字編輯器ueditor
首先要說的是laravel-admin真的是一個非常適合做管理後臺的package。 官方文件有整合wangEditor、ckeditor、PHP editor的示例,如果這幾個編輯器能滿足你的需求可以參照官方文件操作。 ueditor是百度開源的一款編輯器,其中它
vue 整合ueditor(百度富文字編輯器)以及使用後端Java上傳圖片到伺服器,特別注意的大坑
1.import 引入ueditor時,在封裝元件中引入,不要在mian.js內引入,在main.js內引入會造成 1.Uncaught SyntaxError: Unexpected token : 這種錯誤,屬於是跨域問題,目前不清楚是什麼原因和原理,