TinyMCE v5.6.2

基础说明

认识TinyMCE tinymce
快速开始 Quick start
常见问题 FAQ

入门

配置参考

集成配置 Integrated configuration
UI界面配置 UI configuration
内容外观配置 Content appearance configuration
生成代码配置 Generate code configuration
格式化配置 Format configuration
图片&文件上传 Picture & file upload
本地化配置 Localization configuration
URL处理配置 URL processing configuration
其它配置 Other configurations

插件

进阶

安全 Safety
制作一个插件 Make a plug-in
创建通知 Create notification
php图片上传示例 PHP image upload example
一些技巧 Some tips
更多插件
插入百度地图 Insert Baidu map
首行缩进 Indent first line
设置行高 Set row height
图片批量上传 Batch upload of pictures
字数限制 Word limit
更多插件 More plug ins
TinyMCE是什么?

   TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。

   TinyMCE的优势:

  •    • 开源可商用,基于LGPL2.1
  •    • 插件丰富,自带插件基本涵盖日常所需功能(示例看下面的 DEMO-经典模式)
  •    • 接口丰富,可扩展性强,有能力可以无限拓展功能
  •    • 界面好看,符合现代审美
  •    • 提供经典、内联、沉浸无干扰三种模式
  •    • 对标准支持优秀
  •    • 多语言支持,官网可下载几十种语言

  •    官网及文档: www.tiny.cloud

       官网下载: www.tiny.cloud/get-tiny/self-hosted/

    看上面那段简介↑↑↑,鼠标点一下,是不是可以编辑?js如下:

    ......
    <script type="text/javascript"> wui.use('tinymce', function(){ //加载tinymce模块 var tinymce = wui.tinymce; var demo = tinymce.init({ selector: '#demo', //容器,可使用css选择器 language:'zh_CN', //调用放在langs文件夹内的语言包 toolbar: false, //隐藏工具栏 menubar: false, //隐藏菜单栏 inline: true, //开启内联模式 plugins: [ 'quickbars','link','table' ], //选择需加载的插件 //选中时出现的快捷工具,与插件有依赖关系 quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage' }); }); </script>

    内联模式最大的好处,是内容完全继承自外层定义的样式,真正实现了“所见即所得”。但要注意,请小心使用杀伤力比较大的自定义CSS,因为这样可能会覆盖 TinyMCE 控件的CSS,导致编辑器显示异常。

    先来看一个默认配置的编辑器:

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

    再来看一个加载了插件后的编辑器:

    tinymce.init({
        selector: '#demo',
        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 bdmap indent2em autoresize formatpainter axupimgs',
        toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
        styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
        table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
        height: 650,
        min_height: 400,
        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;',
        link_list: [
            { title: '预置链接1', value: 'http://www.tinymce.com' },
            { title: '预置链接2', value: 'http://tinymce.com' }
        ],
        image_list: [
            { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
            { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
        ],
        image_class_list: [
        { title: 'None', value: '' },
        { title: 'Some class', value: 'class-name' }
        ],
        importcss_append: true,
        //自定义文件选择器的回调内容
        file_picker_callback: function (callback, value, meta) {
            if (meta.filetype === 'file') {
              callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
            }
            if (meta.filetype === 'image') {
              callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
            }
            if (meta.filetype === 'media') {
              callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
            }
        },
        autosave_ask_before_unload: false,
    });
    

    下方是几乎开启全部功能的经典模式,为把这一大堆按钮尽量按类摆放,我已经尽力了……

    此实例为官方提供的一个DEMO,代码展示出来会导致首页臃肿,感兴趣的朋友直接右键看源码,我已做了中文注释,更多说明请参考文档。
    var demo3 = tinymce.init({
        selector: '#demo',
        language:'zh_CN',
        plugins: 'print preview searchreplace autolink directionality visualchars fullscreen image link media template code table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern paste emoticons bdmap indent2em autoresize',
        toolbar: 'code forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright indent2em lineheight | \
                        bullist numlist | blockquote subscript superscript removeformat | \
                        table image media bdmap emoticons charmap hr pagebreak insertdatetime | fullscreen ',
        menubar:false,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        autosave_ask_before_unload: false,
        toolbar_drawer : false,
        icons:'ax-color'
    });
    
    © 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile