edui 富文字編輯_百度umeditor富文字編輯器外掛擴充套件

阿新 • • 發佈：2020-12-30

富文字編輯器在WEB開發中經常用到,個人比較喜歡用百度出的ueditor這款,ueditor這款本身支援外掛擴充套件的,但是ueditor的mini版本 umeditor 就沒有那麼方便了,不過找了很多資料根據這些資料琢磨出瞭如果給umeditor新增外掛,這個案例中將實現增加程式碼和附件插入.

準備工作:

1.umeditor下載:

https://github.com/fex-team/umeditor/releases

2.外掛彈窗使用的是 layer:

http://layer.layui.com/?alone

如何建立外掛?

第一步:我們在編輯器umeditor目錄下建立一個plugins的資料夾,這裡用來存放我們自定義的外掛,如上圖,我們定義了一個程式碼(code)以及附件(attachment)外掛

第二步:建立plugins.js檔案,這裡用來封裝我們外掛的資訊,程式碼如下

//定義外掛容器

var plugins = new Array();

//註冊外掛

function registerPlugins() {

//新增程式碼外掛

plugins['code'] = new function () {

//註冊介面事件

var result = new Object();

result.CodeObj = {};

//註冊指定事件

UM.registerUI('code',

function (name) {

var me = this;

var $btn = $.eduibutton({

icon: 'source',

click: function () {

var layIndex = layer.open({

type: 2,

title: '原始碼',

maxmin: false,

shadeClose: true, //點選遮罩關閉層

area: ['620px', '380px'],

content: '/lib/umeditor/plugins/code/code.html',

btn: ['確定', '取消'],

btn1: function (index) {

if (result.CodeObj.codeContent != '') {

//把內容插入編輯器

var html = '

' + result.CodeObj.codeContent + '

me.execCommand('insertHtml', html);

}

//關閉彈窗並且清空當次內容

layer.close(layIndex);

result.CodeObj = {};

//UM.getEditor('container').setContent(html, true);

btn2: function (index) {

//關閉當前彈窗並且清空當前資料容器

layer.close(layIndex);

result.CodeObj = {};

}

});

title: '原始碼'

});

me.addListener('selectionchange', function () {

//切換為不可編輯時，把自己變灰

var state = this.queryCommandState(name);

$btn.edui().disabled(state == -1).active(state == 1)

});

return $btn;

}

);

return result;

};

//新增程式碼外掛

plugins['attachment'] = new function () {

//註冊介面事件

var result = new Object();

result.DataObj = {};

//註冊指定事件

UM.registerUI('attachment',

function (name) {

var me = this;

var $btn = $.eduibutton({

icon: 'attachment',

click: function () {

var layIndex = layer.open({

type: 2,

title: '附件',

maxmin: false,

shadeClose: true, //點選遮罩關閉層

area: ['600px', '320px'],

content: '/lib/umeditor/plugins/attachment/attachment.html',

btn: ['確定', '取消'],

btn1: function (index) {

if (result.DataObj.title != "" && result.DataObj.url != "") {

var html = '

html += '

html += '';

html += '

html += result.DataObj.title;

html += '

html += '提取密碼:' + (result.DataObj.password != "" ? result.DataObj.password:"")+'';

html += '

html += ' ';

html += '

me.execCommand('insertHtml', html);

}

//關閉當前彈窗並且清空當前資料容器

layer.close(layIndex);

result.DataObj = {};

btn2: function (index) {

//關閉當前彈窗並且清空當前資料容器

layer.close(layIndex);

result.DataObj = {};

}

});

title: '附件'

});

me.addListener('selectionchange', function () {

//切換為不可編輯時，把自己變灰

var state = this.queryCommandState(name);

$btn.edui().disabled(state == -1).active(state == 1)

});

return $btn;

}

);

return result;

};

}

第三步:因為例子中的外掛是需要彈窗的,所以我們需要藉助layer這個彈窗組建來實現,這裡就以插入程式碼為說明吧

a.建立code資料夾

b.建立code.html檔案

JavaScript

HTML

CSS

SQL

c.建立code.js文檔案

var result = {

codeType: 'csharp',

codeContent:''

}

window.onload = function () {

parent.plugins['code'].CodeObj = result;

}

//監聽程式碼內容輸入事件

function MonitorContentsInput() {

result.codeContent = html2Escape($("#CodeContents").val());

parent.plugins['code'].CodeObj = result;

}

//監聽程式碼型別選擇事件

function MonitorTypeChanage() {

result.codeType = $("#CodeType").val();

parent.plugins['code'].CodeObj = result;

}

function html2Escape(sHtml) {

return sHtml.replace(/[<>&"]/g, function (c) { return { '': '>', '&': '&', '"': '"' }[c]; });

}

d.彈窗元件中的功能寫完了,我們需要在plugins.js檔案中把剛剛增加的功能元件註冊到umeditor物件中,完成這一步就完成一個外掛功能,程式碼如下(plugins.js所有元件程式碼在第一步中)

plugins['code'] = new function () {

//註冊介面事件

var result = new Object();

result.CodeObj = {};

//註冊指定事件

UM.registerUI('code',

function (name) {

var me = this;

var $btn = $.eduibutton({

icon: 'source',

click: function () {

var layIndex = layer.open({

type: 2,

title: '原始碼',

maxmin: false,

shadeClose: true, //點選遮罩關閉層

area: ['620px', '380px'],

content: '/lib/umeditor/plugins/code/code.html',

btn: ['確定', '取消'],

btn1: function (index) {

if (result.CodeObj.codeContent != '') {

//把內容插入編輯器

var html = '

' + result.CodeObj.codeContent + '

me.execCommand('insertHtml', html);

}

//關閉彈窗並且清空當次內容

layer.close(layIndex);

result.CodeObj = {};

//UM.getEditor('container').setContent(html, true);

btn2: function (index) {

//關閉當前彈窗並且清空當前資料容器

layer.close(layIndex);

result.CodeObj = {};

}

});

title: '原始碼'

});

me.addListener('selectionchange', function () {

//切換為不可編輯時，把自己變灰

var state = this.queryCommandState(name);

$btn.edui().disabled(state == -1).active(state == 1)

});

return $btn;

}

);

return result;

};

如何使用?

準備工作準備好以後我們新建一個頁面,引入相關的樣式以及JS檔案,程式碼如下:

ViewData["Title"] = "umeditor富文字編輯器外掛擴充套件案例";

}

@section Style{

}

@section Scripts{

var um = UM.getEditor('Contents', {

toolbar: [

' bold italic underline | insertorderedlist removeformat |',

'link unlink | emotion image attachment code',

'| fullscreen', 'formula'

]

});

//註冊外掛

registerPlugins();

}

運營效果?

示例程式碼如何下載?

碼雲下載:https://gitee.com/dotnet_51core/aspnetcoremvc

放一張示例截圖(其他幾個示例的博文會在這個月內全部更新上去):

寫BUG我們是認真的!

哦,不,寫示例我們是認真的!

使用百度UMeditor富文字編輯器，修改自定義圖片上傳，修改原始碼

富文字編輯器,不多說了,這個大家應該都用到過,至於用到的什麼版本,那就分很多種 CKEditor:很早以前叫FCK,那個時候也用過,現在改名了,比較流行的一個外掛,國外很多公司在用 UEDITOR:百 ...

ASP&period;NET MVC5 中百度ueditor富文字編輯器的使用

隨著網站資訊釋出內容越來越多,越來越重視美觀,富文字編輯就是不可缺少的了,眾多編輯器比較後我選了百度的ueditor富文字編輯器. 百度ueditor富文字編輯器分為兩種一種是完全版的ueditor, ...

百度Web富文字編輯器ueditor在ASP&period;NET MVC3專案中的使用說明

====================================================================== [百度Web富文字編輯器ueditor在ASP.NET M ...

百度ueditor富文字編輯器的使用

百度ueditor富文字編輯器的使用 //以下為我在官網下載的ueditor v1.3.5 php版的大楷配置步驟第一步: //配置檔案的引入應該比功能檔案先引入,最後設定語言型別.即:editor. ...

PHP如何搭建百度Ueditor富文字編輯器

本文為大家分享了PHP搭建百度Ueditor富文字編輯器的方法,供大家參考,具體內容如下下載UEditor 官網:下載地址將下載好的檔案解壓到thinkphp專案中,本文是解壓到PUBLIC目錄下 ...

關於百度Editor富文字編輯器自定義上傳位置

因為要在網站上編輯富文字資料,所以直接採用百度的富文字編輯器,但是這個編輯器有個缺點,預設情況下,檔案只能上傳到網站的根目錄,不能自定義路徑. 而且json配置檔案只能和controller.jsp在 ...

JSP嵌入ueditor、umeditor富文字編輯器

一.下載: 1.什麼是富文字編輯器?就是: 或者是這個: 其中第一個功能比較詳盡,其主要用來編寫文章,名字叫做udeitor. 第二個就相對精簡,是第一個的MINI版,其主要用來編輯即時聊天或者發帖, ...

vue整合百度UEditor富文字編輯器

在前端開發的專案中.難免會遇到需要在頁面上整合一個富文字編輯器.那麼.如果你有這個需求.希望可以幫助到你 vue是前端開發者所追捧的框架,簡單易上手,但是基於vue的富文字編輯器大多數太過於精簡.於是 ...

vue-quill-editor 富文字編輯器外掛介紹

Iblog專案中博文的文字編輯器採用了vue-quill-editor外掛,本文將簡單介紹其使用方法. 引入配置安裝模組 npm install vue-quill-editor --save in ...

隨機推薦

【hive】——Hive sql語法詳解

Hive 是基於Hadoop 構建的一套資料倉庫分析系統,它提供了豐富的SQL查詢方式來分析儲存在Hadoop 分散式檔案系統中的資料,可以將結構化的資料檔案對映為一張資料庫表,並提供完整的SQL查 ...

reverse-XNUCA-babyfuscator

上一次線上賽的一道題目連結:http://pan.baidu.com/s/1qY9ztKC 密碼:xlr2 這是一道程式碼混淆的題目,因為當時還不知道angr這樣一個軟體,所以我就用了自己的一種思路 ...

jQuery ajax - getScript() 方法

通過 AJAX 請求來獲得並執行一個 JavaScript 檔案: HTML 程式碼: Run

YTU 2987&colon; 調整表中元素順序(線性表)

2987: 調整表中元素順序(線性表) 時間限制:1 Sec記憶體限制:2 MB 提交:1解決:1 題目描述若一個線性表L採用順序儲存結構儲存,其中所有元素都為整數.設計一個演算法,將所 ...

kiss框架學習

#parse("$!jc.skinpath/exam/cart.ascx") var CategoryId = "$!this.loadCategory_combo(). ...

hdu1038

#include #define P 3.1415927 #define toFeet(x) x/12.0 #define toMiles(x) x/5280.0 in ...

SpringMVC詳解(一)------入門例項

本系列教程我們將詳細的對SpringMVC進行介紹,相信你在學完本系列教程後,一定能在實際開發中運用自如. 1.什麼是 SpringMVC ? 在介紹什麼是 SpringMVC 之前,我們先看看 Sp ...

ubuntu 下當前網速檢視

ubuntu下用ethstatus可以監控實時的網絡卡頻寬佔用.這個軟體能顯示當前網絡卡的 RX 和 TX 速率,單位是Byte 一.安裝 ethstatus 軟體 #sudo apt-get insta ...

linux下安裝jenkins

我們不用離線安裝方式第一步.必須驗證java環境第二步.我們這裡使用yum命令進行線上安裝,使用service命令進行啟動 1.wget -O /etc/yum.repos.d/jenkins.r ...

Android——單例模式

詳細的各種模式 http://mobile.51cto.com/android-419145.htm http://wenku.baidu.com/link?url=f3yjQ6YvslvHcWJLb ...

edui 富文字編輯_百度umeditor富文字編輯器外掛擴充套件

edui 富文字編輯_百度umeditor富文字編輯器外掛擴充套件

小tips：vue結合百度UEditor富文字編輯器實現vue-ueditor-wrap

python+selenium+bs4爬取百度文庫內文字 && selenium 元素可以定位到，但是無法點選問題 && pycharm多行縮排、左移

Java，百度OCR通用文字識別（高精度版）

vue案例_百度搜索下拉選單

【文字識別】百度AI之執行IOS示例工程總結

JS程式碼下載百度文庫純文字文件

uni-app 百度語音轉文字

使用百度api實現文字轉語音功能

百度UMEditor從word複製貼上公式

java 百度手寫文字識別介面配置程式碼

python爬取百度貼吧文字內容

美國 SEC 將百度、富途、愛奇藝等五公司列入“預摘牌名單”

今天我又帶來了一款超好用的百度網盤高速下載器~附軟體資源

關於百度echarts資料視覺化js外掛基本使用樣例

destoon百度小程式主動推送外掛

thinkphp5.1中適配百度富文字編輯器ueditor

文章模組——文章新增百度富文字編輯器

百度富文字編輯器的使用

vue專案中使用百度富文字編輯器ueditor

edui 富文字編輯_百度umeditor富文字編輯器外掛擴充套件

相關推薦