默认配置
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;',
//隐藏右下角技术支持
branding: false,
//图片上传自定义
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
//通过XMLHttpRequest实例,打开一个请求
xhr.open('POST', '#');
//设置csrf_token
xhr.setRequestHeader('X-CSRF-TOKEN', '{
{csrf_token()}}');
//请求监听
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);
//发送ajax
xhr.send(formData);
},
image_list: [
{
title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
{
title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo2.png' }
],
image_class_list: [
{
title: '响应式类名', 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 !imp