Kz.layedit-layui.layedit富文本編輯器拓展

来源:https://www.cnblogs.com/KnifezZZ/archive/2018/11/22/10004407.html
-Advertisement-
Play Games

摘要: 本插件基於layui.layedit,增加了HTML源碼模式,片插入功能添加alt屬性(layupload),視頻插入功能,全屏功能,段落格式,字體顏色設置,右鍵菜單操作,插入錨點,水平線功能。 所有拓展功能菜單按鈕圖標均引用自layui自帶圖標。 演示地址:kz.layedit 一、基礎拓 ...


摘要:

  本插件基於layui.layedit,增加了HTML源碼模式,片插入功能添加alt屬性(layupload),視頻插入功能,全屏功能,段落格式,字體顏色設置,右鍵菜單操作,插入錨點,水平線功能。

所有拓展功能菜單按鈕圖標均引用自layui自帶圖標。

演示地址:kz.layedit

 

  一、基礎拓展配置

 tool: [
                    'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                    , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
                    , '|', 'fullScreen'
                ]

  html=> html源碼模式(彈窗顯示),

  addhr=>添加水平線<hr>,

  fontFomatt =>段落格式設置,設置當前行為p,h1~4,div等格式,

  colorpicker=>字體顏色設置,

  image_alt=>帶alt屬性,寬高設置的圖片上傳,(image原版圖片上傳依舊支持),

  video =>視頻上傳,帶封面上傳,

  anchors=> 添加錨點,通過樣式在編輯器內展示,不帶樣式無法展示,待修複,

  fullScreen=>全屏設置

 

  一、HTMl源碼模式

 

    HTML源碼模式引用第三方插件ace,優化源碼展示樣式,引用ace編輯器僅保留了html源碼樣式和tomorrow主題,如有需要可自行更換,目錄為/Content/ace/ace.js,指路--> ace官網

      

  二、UploadImage/UploadVideo

    圖片視頻上傳需要配置相應的後臺介面,同時也可以設置上傳附件格式,附件大小等,該參數繼承自layui.layupload。

    

1 //上傳圖片參數設置               
2  uploadImage: {
3                     url: '/Attachment/LayUploadFile',//後臺上傳方法
4                     accept: 'image',//限制上傳類型
5                     acceptMime: 'image/*',
6                     exts: 'jpg|png|gif|bmp|jpeg',//拓展名限制
7                     size: '10240'//大小限制
8                 }
1 //上傳視頻參數設置--同圖片
2 uploadVideo: {
3                     url: '/Attachment/LayUploadFile',
4                     accept: 'video',
5                     acceptMime: 'video/*',
6                     exts: 'mp4|flv|avi|rm|rmvb',
7                     size: '20480'
8                 }

  三、CallDel配置

該參數用於右鍵選中圖片或視頻進行刪除時調用,根據提供的後臺方法進行刪除,返回的參數圖片路徑為imgpath,視頻路徑為 filepath,後臺可根據接受的文件路徑進行刪除或其他操作。

                //右鍵刪除圖片/視頻時的回調參數,post到後臺刪除伺服器文件等操作,
                //傳遞參數:
                //圖片: imgpath --圖片路徑
                //視頻: filepath --視頻路徑 imgpath --封面路徑
                , calldel: {
                    url: '/Attachment/DeleteFile'
                }

    四、Code=>插入代碼設置

    該參數可配置也可不配置,根據自己的實際需求出發,如不配置,則為原版的效果,配置hide為true時,會根據defalut設置的語言格式進行插入<pre>。

//插入代碼設置
                , codeConfig: {
                    hide: true,  //是否顯示編碼語言選擇框
                    default: 'javascript' //hide為true時的預設語言格式
                }

    --未完待續


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1: 如何判斷欄位的值裡面:那些數據包含小寫字母或大小字母 判斷欄位NAME的值裡面有小寫字母的記錄 方式1: SELECT NAME FROM TEST WHERE regexp_like(NAME,'[[:lower:]]'); 方式2 SELECT NAME FROM TEST WHERE r... ...
  • redis主從複製 Author:SimpleWu "GitHub redis" 什麼是主從複製? 主從複製,是用來建立一個和主資料庫(master)完全一樣的資料庫環境,稱為從資料庫(slave)。 主從複製的作用和使用場合一般有幾個: 一是容災恢復,主資料庫伺服器故障後,可迅速從從資料庫恢復。 ...
  • Redis的消息發佈和訂閱 Author:SimpleWu "GitHub redis" 什麼是消息發佈和訂閱? Redis 發佈訂閱(pub/sub)是一種進程間的消息通信模式: 發送者(pub)發送消息 訂閱者(sub)接收消息 Redis 客戶端可以訂閱任意數量的頻道。 但是一般不會使用red ...
  • 跳轉 命名路由 在文件構建時先設置路由參數: 在需要做路由跳轉的時候直接使用: 構建路由 區別 以上兩種路由的優缺點十分明顯: 1. 命名路由簡明並且系統,但是不能傳參。 2. 構建路由可以傳參,但比較繁瑣。 動畫 構建動畫 先在構建一個動畫效果,如: 以上動畫意思為跳轉時新頁面從右邊劃入,返回時向 ...
  • 這裡記錄兩個iOS開發中經常用到的知識點,一個是唯一標識,一個是全局變數。唯一標識一臺設備(比如iPhone、iPad等)是一個基本的實現與業務上的需求,因為這個唯一標識在許多場景都需要使用到,比如用來統計(日活、總用戶數等),再比如用作預設的賬號,等等。 ...
  • 平時在使用Vue框架的業務開發中,組件不僅僅要把模板的內容進行復用,更重要的是組件之間要進行通信。組件之間通信分為三種:父-子;子-父;跨級組件通信。下麵,就組件間如何通信做一些總結。 1.父組件到子組件通過props通信 在組件中,使用選項props來聲明需要從父級組件接受的數據,props的值可 ...
  • 在開發的過程中,遍歷是一個經常遇到的。而for迴圈則是Javascript工具箱里一個好用的,也常用的工具。每個人的習慣不同,for迴圈的寫法也不盡相同。 1、不寫聲明變數的寫法: 我們很多時候的寫法使這種(做小白不堪迴首的那些年),但這種寫法,每次都會獲取一下數組的長度,這會降低代碼的效率。 2、 ...
  • Vue源碼解析之nextTick 前言 nextTick是Vue的一個核心功能,在Vue內部實現中也經常用到nextTick。但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作用。 那麼,我們就先來看看nextTick是什麼。 nextTick功能 看看官方文檔的描述: 在下 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...