默認配置

tinymce.init({selector: '#tinydemo',language:'zh_CN', });

標準化常用初始化配置

tinymce.init({selector: '#content',//皮膚skin: 'oxide',//中文語言包language: 'zh_CN',// 插件和菜單欄plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave',toolbar: 'code undo redo restoredraft | forecolor backcolor bold italic underline strikethrough link anchor emoticons image | table preview fullscreen | \styleselect formatselect fontselect fontsizeselect | bullist numlist | \alignleft aligncenter alignright alignjustify outdent indent | \blockquote subscript superscript removeformat | \media charmap hr pagebreak insertdatetime print',//下面這兩個是編輯器高度height: 300,//字體大小fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',//字體格式font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',//隱藏右下角技術(shù)支持branding: false,//圖片上傳自定義images_upload_handler: function (blobInfo, succFun, failFun) {var xhr, formData;var file = blobInfo.blob();//轉(zhuǎn)化為易于理解的file對象xhr = new XMLHttpRequest();xhr.withCredentials = false;//通過XMLHttpRequest實例，打開一個請求xhr.open('POST', '#');//設(shè)置csrf_tokenxhr.setRequestHeader('X-CSRF-TOKEN', '{{csrf_token()}}');//請求監(jiān)聽xhr.onload = function () {var json;if (xhr.status != 200) {failFun('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {failFun('Invalid JSON: ' + xhr.responseText);return;}succFun(json.location);};//序列化formData = new FormData();formData.append('file', file, file.name);//發(fā)送ajaxxhr.send(formData);},image_list: [{ title: '預(yù)置圖片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },{ title: '預(yù)置圖片2', value: 'https://www.baidu.com/img/bd_logo2.png' }],image_class_list: [{ title: '響應(yīng)式類名', value: 'img-fluid' }],//自動獲取焦點auto_focus: true,// 退出前保存(刷新前保存文章)autosave_ask_before_unload: false,});

完全自定義每個按鈕

tinymce.init({selector: '#tinydemo_group',language:'zh_CN',menubar: false,toolbar: 'formatting | alignment',toolbar_groups: {formatting: {text: '文字格式',tooltip: 'Formatting',items: 'bold italic underline | superscript subscript',},alignment: {icon: 'align-left',tooltip: 'alignment',items: 'alignleft aligncenter alignright alignjustify',},} });

比較全的參考

{extend name="common/layout/base_with_side" /}{block name="style"} <style>body {overflow: hidden;}/*寬度*/body::-webkit-scrollbar {display: none;}.navbar-my {box-shadow: none !important}.addd {position: relative !important;}#mytextarea {opacity: 0;}.tox-tinymce {position: absolute !important;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;}</style> {/block}{block name="cnt"} <div class="min-vh-100 d-flex flex-column shadow-none"><div>{include file="index@common/layout/header" /}</div><div class="flex-grow-1 bg-light addd"><textarea id="mytextarea"></textarea></div></div> {/block}{block name="js"} <script src="/static/common/tinymce/tinymce.min.js"></script> <script>tinymce.init({selector: '#mytextarea',language: 'zh_CN',height: "100%",menubar: false,plugins: ['advlist autolink lists link image charmap print preview anchor','searchreplace visualblocks code fullscreen','insertdatetime media table paste wordcount ','emoticons codesample hr textpattern'],// toolbar: [// 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ',// 'removeformat | image media code |emoticons preview table| codesample hr insertdatetime link| searchreplace blockquote',// ],toolbar: 'undo redo formatselect ' +'bold italic backcolor alignleft aligncenter ' +'alignright alignjustify bullist numlist outdent indent ' +'removeformat image media code emoticons preview table ' +'codesample hr insertdatetime link searchreplace blockquote',content_style: `body { font-family:Helvetica,Arial,sans-serif; font-size:18px; }::-webkit-scrollbar {width: 6px;height: 4px }::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, .1) }::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .25) }::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, .25) }::-webkit-scrollbar-thumb:active {background-color: rgba(0, 0, 0, .25) }body img{ border: 1px solid red; }`,//自動獲取焦點auto_focus: true,//禁止拖動resize: false,//不顯示有tiny驅(qū)動branding: false,//禁用下角的當前標簽路徑elementpath: false,//初始化完成init_instance_callback: function (editor) {// $(".tox-tinymce").remove();},// images_upload_url: '/upload.php',//圖片上傳自定義// images_upload_handler: function (blobInfo, succFun, failFun) {// let formData = new FormData();// formData.set('file', blobInfo.blob());// //發(fā)送ajax到后臺進行操作// //發(fā)送請求// $.ajax({// url: "/aaa",// type: 'POST',// data: formData,// //禁止數(shù)據(jù)序列化,不加這幾個數(shù)據(jù)接收不到// processData: false,// contentType: false,// cache: false,// success:function (){// failFun('HTTP Error: ' + 500);// return;// }// })// },//開啟復(fù)制粘貼上傳圖片paste_data_images: true,//工具欄的模式toolbar_mode:"wrap",//類似markdown的標記textpattern_patterns:[{start: '*', end: '*', format: 'italic'},{start: '**', end: '**', format: 'bold'},{start: '#', format: 'h1'},{start: '##', format: 'h2'},{start: '###', format: 'h3'},{start: '####', format: 'h4'},{start: '#####', format: 'h5'},{start: '######', format: 'h6'},{start: '1. ', cmd: 'InsertOrderedList'},{start: '* ', cmd: 'InsertUnorderedList'},{start: '- ', cmd: 'InsertUnorderedList' }],file_picker_callback: function (callback, value, meta) {alert("aaa")//文件分類var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';//后端接收上傳文件的地址var upurl='/demo/upfile.php';//為不同插件指定文件類型及后端地址switch(meta.filetype){case 'image':filetype='.jpg, .jpeg, .png, .gif';upurl='upimg.php';break;case 'media':filetype='.mp3, .mp4';upurl='upfile.php';break;case 'file':default:}//模擬出一個input用于添加本地文件var input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', filetype);input.click();input.onchange = function() {var file = this.files[0];var xhr, formData;console.log(file.name);xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', upurl);xhr.onload = function() {var json;if (xhr.status != 200) {failure('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {failure('Invalid JSON: ' + xhr.responseText);return;}callback(json.location);};formData = new FormData();formData.append('file', file, file.name );xhr.send(formData);//下方被注釋掉的是官方的一個例子//放到下面給大家參考/*var reader = new FileReader();reader.onload = function () {// Note: Now we need to register the blob in TinyMCEs image blob// registry. In the next release this part hopefully won't be// necessary, as we are looking to handle it internally.var id = 'blobid' + (new Date()).getTime();var blobCache = tinymce.activeEditor.editorUpload.blobCache;var base64 = reader.result.split(',')[1];var blobInfo = blobCache.create(id, file, base64);blobCache.add(blobInfo);// call the callback and populate the Title field with the file namecallback(blobInfo.blobUri(), { title: file.name });};reader.readAsDataURL(file);*/};},urlconverter_callback: (url, node, on_save, name) => { //設(shè)置白名單// alert(url);return url;},});</script> {/block}

零時保存

{extend name="common/layout/base" /}{block name="style"} <style>body {overflow: hidden;}/*寬度*/body::-webkit-scrollbar {display: none;}.navbar-my {box-shadow: none !important}.addd {position: relative !important;}#mytextarea {opacity: 0;}.tox-tinymce {position: absolute !important;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;}</style> {/block}{block name="cnt"} <div class="min-vh-100 d-flex flex-column shadow-none"><div>{include file="index@common/layout/header" /}</div><div class="flex-grow-1 bg-light addd"><textarea id="mytextarea"></textarea></div></div> {/block}{block name="js"} <script src="/static/lib/tinymce/tinymce.min.js"></script> <script>tinymce.init({selector: '#mytextarea',language: 'zh_CN',height: "100%",menubar: false,plugins: ['advlist autolink lists link image charmap print preview anchor','searchreplace visualblocks code fullscreen','insertdatetime media table paste wordcount ','emoticons codesample hr textpattern'],// toolbar: [// 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ',// 'removeformat | image media code |emoticons preview table| codesample hr insertdatetime link| searchreplace blockquote',// ],toolbar: 'undo redo formatselect ' +'bold italic backcolor alignleft aligncenter ' +'alignright alignjustify bullist numlist outdent indent ' +'removeformat image media code emoticons preview table ' +'codesample hr insertdatetime link searchreplace blockquote',content_style: `body { font-family:Helvetica,Arial,sans-serif; font-size:18px; }::-webkit-scrollbar {width: 6px;height: 4px }::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, .1) }::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .25) }::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, .25) }::-webkit-scrollbar-thumb:active {background-color: rgba(0, 0, 0, .25) }body img{ border: 1px solid red; }`,//自動獲取焦點auto_focus: true,//禁止拖動resize: false,//不顯示有tiny驅(qū)動branding: false,//禁用下角的當前標簽路徑elementpath: false,//初始化完成init_instance_callback: function (editor) {// $(".tox-tinymce").remove();},// images_upload_url: '/upload.php',//圖片上傳自定義// images_upload_handler: function (blobInfo, succFun, failFun) {// let formData = new FormData();// formData.set('file', blobInfo.blob());// //發(fā)送ajax到后臺進行操作// //發(fā)送請求// $.ajax({// url: "/aaa",// type: 'POST',// data: formData,// //禁止數(shù)據(jù)序列化,不加這幾個數(shù)據(jù)接收不到// processData: false,// contentType: false,// cache: false,// success:function (){// failFun('HTTP Error: ' + 500);// return;// }// })// },//開啟復(fù)制粘貼上傳圖片paste_data_images: true,//工具欄的模式toolbar_mode:"wrap",//類似markdown的標記textpattern_patterns:[{start: '*', end: '*', format: 'italic'},{start: '**', end: '**', format: 'bold'},{start: '#', format: 'h1'},{start: '##', format: 'h2'},{start: '###', format: 'h3'},{start: '####', format: 'h4'},{start: '#####', format: 'h5'},{start: '######', format: 'h6'},{start: '1. ', cmd: 'InsertOrderedList'},{start: '* ', cmd: 'InsertUnorderedList'},{start: '- ', cmd: 'InsertUnorderedList' }],file_picker_callback: function (callback, value, meta) {alert("aaa")//文件分類var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';//后端接收上傳文件的地址var upurl='/demo/upfile.php';//為不同插件指定文件類型及后端地址switch(meta.filetype){case 'image':filetype='.jpg, .jpeg, .png, .gif';upurl='upimg.php';break;case 'media':filetype='.mp3, .mp4';upurl='upfile.php';break;case 'file':default:}//模擬出一個input用于添加本地文件var input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', filetype);input.click();input.onchange = function() {var file = this.files[0];var xhr, formData;console.log(file.name);xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', upurl);xhr.onload = function() {var json;if (xhr.status != 200) {failure('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {failure('Invalid JSON: ' + xhr.responseText);return;}callback(json.location);};formData = new FormData();formData.append('file', file, file.name );xhr.send(formData);//下方被注釋掉的是官方的一個例子//放到下面給大家參考/*var reader = new FileReader();reader.onload = function () {// Note: Now we need to register the blob in TinyMCEs image blob// registry. In the next release this part hopefully won't be// necessary, as we are looking to handle it internally.var id = 'blobid' + (new Date()).getTime();var blobCache = tinymce.activeEditor.editorUpload.blobCache;var base64 = reader.result.split(',')[1];var blobInfo = blobCache.create(id, file, base64);blobCache.add(blobInfo);// call the callback and populate the Title field with the file namecallback(blobInfo.blobUri(), { title: file.name });};reader.readAsDataURL(file);*/};},urlconverter_callback: (url, node, on_save, name) => { //設(shè)置白名單// alert(url);return url;},});</script> {/block}

總結(jié)

以上是生活随笔為你收集整理的tinymce标准配置，和自定义每个按钮配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。