網(wǎng)站制作之百度編輯器自定義模板

2023-02-19    分類: 網(wǎng)站建設(shè)

網(wǎng)站制作到了程序階段,一般需要用到網(wǎng)站編輯器,如后臺(tái)可自行更新相關(guān)公司介紹、產(chǎn)品介紹、編輯新聞等。網(wǎng)站編輯器有很多開源的,我們一般直接使用就行了,但如果要做到更加容易編輯,還是需要做一些改進(jìn),下面創(chuàng)新互聯(lián)的程序員給大家介紹如何自定義模板。

編輯器界面

百度編輯器(ueditor)是一款功能強(qiáng)大的富文本編輯器,其中有一個(gè)模板功能,能幫助我們方便快捷的編輯一些相似內(nèi)容或者格式一樣的內(nèi)容下面介紹一下怎么自定義我們所需要的模板。(如圖為編輯器模板功能按鈕位置)
點(diǎn)擊按鈕,編輯器中已經(jīng)內(nèi)置了幾個(gè)案例

配置文件代碼

找到ueditor\dialogs\template\config.js文件
var templates = [
{
"pre":"pre0.png",
'title':lang.blank,
'preHtml':'<p class="ue_t">&nbsp;車輛參數(shù)模板</p>',
"html":''
},
{
1.pre:為模板的樣式圖可以在
ueditor\dialogs\template\images文件夾中修改添加
2.title:模板名稱;可以在ueditor\lang\zh-cn\ 里進(jìn)行添加修改;
3.'preHtml' 模板內(nèi)容標(biāo)題介紹:直接輸入對(duì)應(yīng)文字即可;
4 ."html" 模板的代碼內(nèi)容 將html代碼壓縮一下復(fù)制進(jìn)去即可;
這樣基本完成了模板的設(shè)置,在這個(gè)過程中編輯器會(huì)將標(biāo)簽替換掉,需要我們?cè)?p>JS代碼2

ueditor\ueditor.all.js 里搜索allowDivTransToP disabledTableInTable 將他們改成false配置文件代碼
UE.plugins['defaultfilter'] = function () {
var me = this;
me.setOpt({
'allowDivTransToP':false,
'disabledTableInTable':false
});

JS代碼

在使用過程中發(fā)現(xiàn)編輯會(huì)將li里面的樣式去掉
搜索li.style.cssText && (li.style.cssText = ''); 將行代碼注釋掉;
這樣基本就完成了模板的自定義;

編輯器改造界面

kindeditor 也是一款比較好用的富文本編輯器,他的模板自定義和百度的有些不一樣;(功能所在位置)

網(wǎng)站制作目錄

kindeditor\plugins\template\html

網(wǎng)站制作代碼8

添加模板文件,這是個(gè)html頁(yè)面里面可以寫的內(nèi)容比百度要更豐富
在kindeditor\kindeditor.js 文件中 搜索template.fileList

分享名稱:網(wǎng)站制作之百度編輯器自定義模板
本文地址:http://www.bm7419.com/news40/238040.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)響應(yīng)式網(wǎng)站、ChatGPT、搜索引擎優(yōu)化、服務(wù)器托管、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)