In the Ueditor.config.js file, locate the toolbars parameter and add an "audio" string that corresponds to the hint that adds a labelmap for the mouse pointer over the button.
//all the function buttons and drop-down boxes on the toolbar, you can select the new definition you want when you use the new editor instance, toolbars: [[' fullscreen ', ' source ', ' | ', ' undo ', ' Redo ', ' | ', ' Bold ', ' italic ', ' underline ', ' fontborder ', ' strikethrough ', ' superscript ', ' subscript ', ' removeformat ', ' formatmatch ' ', ' autotypeset ', ' blockquote ', ' pasteplain ', ' | ', ' ForeColor ', ' BackColor ', ' insertorderedlist ', ' insertunorderedlist ' ', ' SelectAll ', ' cleardoc ', ' | ', ' Rowspacingtop ', ' rowspacingbottom ', ' lineheight ', ' | ', ' Customstyle ', ' paragraph ', ' fontfamily ', ' fontsize ', ' | ', ' Directionalityltr ', ' Directionalityrtl ', ' indent ', ' | ', ' Justifyleft ', ' justifycenter ', ' justifyright ', ' justifyjustify ', ' | ', ' touppercase ', ' tolowercase ', ' | ', ' Link ', ' unlink ', ' anchor ', ' | ', ' imagenone ', ' imageleft ', ' imageright ', ' imagecenter ', ' | ', ' Simpleupload ', ' insertimage ', ' emotion ', ' scrawl ', ' insertvideo ', ' music ', ' audio ', ' attachment ', ' map ', ' gmap ', ' Insertframe ', ' insertcode ', ' webapp ', ' pagebreak ', ' template ', ' background ', ' | ', ' Horizontal ', ' date ', ' time ', ' spechars ', ' snapscreen ', ' wordimage ', ' | ', ' Inserttable ', ' deletetable ', ' insertparagraphbeforetable ', ' insertrow ', ' deleterow ', ' insertcol ', ' deletecol ', ' MergeCells ', ' mergeright ', ' mergedown ', ' splittocells ', ' splittorows ', ' splittocols ', ' charts ', ' | ', ' Print ', ' preview ', ' searchreplace ', ' help ', ' drafts ' ]] //tooltip prompt that appears when the mouse is placed on the toolbar, left blank to support automatic multilanguage configuration, otherwise the configuration value will prevail, labelmap:{Audio:Audio }
2. Modify the Ueditor.all.js file
Find Iframeurlmap Add a line:
' Audio ': ' ~/dialogs/audio/audio.html ',
Find Btncmds, Dialogbtns add an element: Audio
Next, create the audio folder under the Dialogs folder and build a new audio.html
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title></title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <Scripttype= "Text/javascript"src=".. /internal.js "></Script> <styletype= "Text/css"> *{margin:0;padding:0;Color:#838383;}Table{font-size:12px;margin:10px;Line-height:30px}. txt{width:300px;Height:21px;Line-height:21px;Border:1px solid #d7d7d7;} </style></Head><Body> <Table> <TR> <TD><label for= "href">Audio Address:</label></TD> <TD><inputclass= "txt"ID= "href"type= "text" /></TD> </TR> </Table><Scripttype= "Text/javascript"> functionHandledialogok () {if($G ('href'). Value) {varpatt1= /Ogg|oga|aac|m4a|mp3|wav/gi; if(Patt1.test ($G ('href') {Editor.execcommand ('inserthtml', "<object>" + "<audio controls>" + "<source src=\ "" +$G ('href'). Value+ "\ ">" + "Your Browser does not support the audio tag" + "</audio>" + "</object>"); Dialog.close (); } Else{alert ("The audio format is not supported"); return false; } } Else{alert ("Please enter an audio address"); return false; }} Dialog.onok=Handledialogok; $G ('href'). onkeydown= function(evt) {evt=evt||window.event; if(Evt.keycode== -) {Handledialogok (); return false; } }</Script></Body></HTML>
The associated Operation JS is also written in the HTML.
Here, the new button to run the editor has come out, but click the Pop-up window style is not disorderly;
At this point, modify the Themes/default/css/ueditor.css file to add a style:
. edui-Default . edui-for-audio. edui-icon { background-position: -18px-40px }At this point, the pop-up window can be displayed normally, and the corresponding code can be inserted.
Ueditor Add custom Pop-up window insert audio address
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
