web輕量級富文字框編輯

前言

主要介紹squire，wangeditor富文字編輯

以及用原生js 如何實現多個關鍵字標識

需求

如何標記多個關鍵字，取消關鍵字

第一種方法 原生 textarea 標記

準備資料參考：張鑫旭大大的部落格 講得非常的清楚哦

demo栗子：

推薦文章：js range html文件/文字內容選中、庫及應用介紹

知識點儲備：range物件, getselectionmdn文件直通車

優點：原生實現的，不用額外引用第三方外掛程式 

缺點：功能稍微複雜一點 就難拓展了 全部自己寫 花費的時間比較長

我的實踐專案經驗

痛點一：不可以插入 標記三四個關鍵字是沒有問題的，但是多個後 會標記的不准 計算的位置不準確。有嘗試用正則匹配，但是解決的不理想（這裡還是個人寫的有問題）

思路：通過range 可以得到當前選中文字的位置，得到的文字加入標識（比如插入話題是#），選中的文字獲取的位置包括插入的標識。之所以會導致位置計算不准這個也是要記上的。

但是這個長度也是固定的 不應該存在計算位置準確（由於寫法很久以前了 也沒有留存）希望在座的各位不會出現這種情況

核心**

fungetselected(element) 

else
;        }
},funtextastopic(textobj, textfeildvalue, flag) 
else
if(textobj.setselectionrange) >`, textfeildvalue)
}textobj.blur();
return
textobj.value}},

優點：超級輕量  很靈活（比我接下來要介紹的 wangeditor 要 靈活）

缺點：雖然我找到了npm 安裝包 但是import失敗 官網文件上沒有看到寫

也沒有看到哪個筒子寫了 如何引用成功（原生js 頁面是完全可以的）

其他的 倒是沒有體驗太多

貼主要** 這個我有乙個完全寫好的demo 有需要的可以私信我

$(function() );

//按鈕事件
$('#btn
').on('
click
', function() 
if ($(editor.getselection().commonancestorcontainer.parentnode).hasclass('
colour
')) 
//將選中的文字設定成紅色
editor.settextcolour('
red'
);        
//聚合
const content = editor.gethtml().replace(/class="
colour
" style="
color:red
">/g, ''
);        editor.sethtml(content);
});//關鍵字事件
怎麼引用都不會成功  由於我們的專案主要用的vue 框架（如果一定要用的話 應該要自己封裝一層）
第三種方法富文字編輯 wangeditor
第二個框架的是完全滿足我們的需求了，但是我自己懶得再去封裝怎麼在vue裡面引用成功
有專門的學習手冊：
原始碼開源：
缺點：不可以自定義工具欄 方法沒有這麼靈活 需要變通一下才可以實現某些功能
我的實戰專案經驗 
可以獲取當前選中文字，可以取消標記，可以獲取當前焦點最近的關鍵字。
核心主要**
import e from

'wangeditor'//
引用var editor = new e(this
.$refs.editor)
editor.customconfig.onchange = (html) =>
editor.customconfig.menus = [ //
配置選單
'forecolor']
editor.customconfig.colors = [ //
配置顏色
fannie式總結
延伸思考 就是有很多中標記 這個標記的內容 都要對應儲存 不同顏色區分 可以取消標記這些之類的
還有web用富文字有一點點安全性問題哦
				
富文字框編輯器
第一種方法 第一步，安裝django tinymce 第二步，在setting檔案中配置 新增富文字框編輯器這個模組 tinymce 在setting配置中配置tinymce的配置項引數 tinymce 的配置項 tinymce js url static tiny mce tiny mce.js ...
				
富文字框wangEditor
個人覺的官網文件寫的還是非常詳細的 的開發需要,畢竟我們開發中遇到的富文字框不需要像word或者wps功能這麼齊全.功能齊全的富文字框配置必然 個人專案中wangeditor富文字框的簡單配置 functioneditor editor.customconfig.lang editor.custom...
				
前端實現富文字框
這次我們項要求實現部落格形式的富文字框，之前沒有接觸過，頓時毫無頭緒。不過還好在網上找到了乙個差不多的例子。下面附上 知識點 實現富文字框可以使用iframe，修改iframe的designmode屬性。js的selectionrange 可以選中文字，返回乙個物件，可以通過該物件的text屬性可以...