相关文章推荐
买醉的蛋挞  ·  jupyterlab安装和优化 - ...·  1 周前    · 
冷静的猴子  ·  Citus 分布式 PostgreSQL ...·  1 年前    · 
销魂的瀑布  ·  Mybatis Plus 自定义sql + ...·  1 年前    · 

TinyMCE工具栏配置详解

启用和停用工具栏

通过init配置项 toolbar toolbar(n) 来配置工具栏是否启用的项目和显示的顺序。
同时,使用 | 来分割各个项。

tinymce.init({
  selector: '#textarea1',  // change this value according to your HTML
  //启用工具栏并显示如下项
  toolbar: 'undo redo | styleselect | bold italic | link image',
tinymce.init({
  selector: '#textarea2',  // change this value according to your HTML
  //禁用工具栏
  toolbar: false,
/* 启用多个工具栏 */
tinymce.init({
  selector: '#textarea3',  // change this value according to your HTML
  // 启用多个工具栏
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright',
tinymce.init({
  selector: '#textarea4',  // change this value according to your html
  // 工具栏1
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  // 工具栏2
  toolbar2: 'alignleft aligncenter alignright',
      onclick: function () {
        // 这里点击后会插入一句话
        editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;')

上面是最基本的配置方法,

还有一些其他属性可以配置:

  • tooltip: 就是鼠标滑过时的提示文字
  • icon: 按钮的图标(这里指的是TinyMCE中自带的)
  • image: 如果希望直接配置图标(可以是URL或者path)
  • onclick: 点击事件
  • onpostrender: 触发按钮渲染的事件(用来在合适的时机禁用按钮)
  • cmd: 点击按钮时出发的编辑器事件(已经注册的)
  • 更为深入的自定义按钮配置方法这里暂时不做说明。
    可以参看
    TinyMCE Docs

    配置工具项

    所属插件为核心的项为基本包里自带的功能,直接写在toolbar里就可以,
    属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。

    tinymce.init({
      selector: '#textarea1',  // change this value according to your HTML
      //启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
      menubar: 'file edit insert view format table',
    tinymce.init({
      selector: '#textarea2',  // change this value according to your HTML
      //禁用菜单栏
      menubar: false,
    

    配置菜单项

    每个菜单在经过上面的配置后都会有一个默认的子菜单。
    如果想自己定义每个菜单的子菜单项需要通过menu配置。
    title对应在menubar中对应的项。
    items为在各个菜单总显示的功能的名称
    |为分割符号会将菜单分割为几个部分

    tinymce.init({
      selector: '#textarea1',  // change this value according to your HTML
      //启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
      menubar: 'file edit insert view format table',
      // 配置每个菜单栏的子菜单项(如下是默认配置)
      menu: {
        file: {title: 'File', items: 'newdocument'},
        edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
        insert: {title: 'Insert', items: 'link media | template hr'},
        view: {title: 'View', items: 'visualaid'},
        format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
    

    获取TinyMCE编辑器中的内容

    有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空)
    就需要获取里面的内容。
    1、如果当前页面只有一个编辑器:
    获取内容:tinyMCE.activeEditor.getContent()
    设置内容:tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

    2、如果当前页面有多个编辑器(下面的“[0]”表示第一个编辑器,以此类推):
    获取内容:tinyMCE.editors[0].getContent()
    设置内容:tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

    3、获取不带HTML标记的纯文本内容:
    var activeEditor = tinymce.activeEditor;
    var editBody = activeEditor.getBody();
    activeEditor.selection.select(editBody);
    var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );

    TinyMCE上传图片

    返回的josn数据格式为

    {"location":"http://localhost/images/00C01FA6364DFF9757D1CF446748A47852B2D475.jpg"}
     tinymce.init({
                selector: '#file-picker',
                language: 'zh-Hans',//语言
                height: 600,//编辑器高度
                branding: false,//是否禁用“Powered by TinyMCE”
                plugins: [
                    'powerpaste table advlist autolink lists link charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen',
                    'insertdatetime nonbreaking save table contextmenu directionality',
                    'emoticons textcolor colorpicker textpattern image code codesample toc pagebreak'
                toolbar1: 'code undo redo formatselect fontselect fontsizeselect insert styleselect  bold italic underline alignleft aligncenter alignright alignjustify forecolor backcolor newdocument table insert bullist numlist outdent indent link image rotateleft rotateright flipv fliph print preview  emoticons  codesample  pagebreak  toc  fullscreen superscript subscript ltr rtl hr',
                //toolbar2: 'print preview  forecolor backcolor emoticons  codesample  pagebreak  toc  fullscreen',
                image_advtab: true,
                //images_upload_url
                paste_data_images: true,
                menubar: true,//禁用标题栏
                automatic_uploads: true,
                media_live_embeds: true,//查看上传的视频
                //图片选择上传
                images_upload_handler: function (blobInfo, success, failure) {
                    var file = blobInfo.blob();//转化为易于理解的file对象
                    var isLt10M = file.size / 1024 / 1024 < 4;
                    if (!isLt10M) {
                        failure('上传图片大小不能超过5MB哦!');
                        return;
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open("POST", "http://localhost/Handler.ashx?API=uploadImg&UserName=" + document.getElementById("UserName").value);
                    formData = new FormData();
                    formData.append('file', file, file.name);
                    console.log(formData);
                    xhr.onload = function (e) {
                        var json;
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        json = JSON.parse(this.responseText);
                        if (!json || typeof json.location != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        success(json.location);
                    xhr.send(formData);
    

    https://blog.csdn.net/sunhuwh/article/details/48579319

    https://blog.csdn.net/zjiang1994/article/details/79880806

    https://blog.csdn.net/zjiang1994/article/details/79856058