tinymce标准配置,和自定义每个按钮配置

默认配置
在这里插入图片描述

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
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值