ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

TinyMCE工具栏配置详解

2022-08-16 16:36:50  阅读：250  来源： 互联网

标签：工具栏 核心 配置 TinyMCE 插入 init 详解 link table


TinyMCE详解

 

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',
})

 

   

自定义工具按钮

上面在工具栏中插入的都是编辑器自带的工具。
这里讲一下如何插入自定义的按钮。

主要的流程是：

  1. 在init的toolbar中注册自定义按钮
  2. 在setup方法中使用editor.addButton()定义按钮。
tinymce.init({
  selector: '#textarea',
  // 注册button
  toolbar: 'mybutton',

  setup: function (editor) {
    // 定义按钮，
    editor.addButton('mybutton', {
      // 按钮，名
      text: 'My button',
      // 是否显示图标
      icon: false,
      //onclick事件
      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中配置。

 
配置项所属插件描述
newdocument 核心 创建新文档
bold 核心 加粗
italic 核心 斜体
underline 核心 下划线
strikethrough 核心 删除线
alignleft 核心 居左
aligncenter 核心 居中
alignright 核心 居右
alignjustify 核心 两端对齐
alignnone 核心 清除
styleselect 核心 格式选择下拉框(缩进、行高)
formatselect 核心 段落选择下拉框(段落、标题)
fontselect 核心 字体选择下拉框
fontsizeselect 核心 字号选择下拉框
cut 核心 剪切
copy 核心 复制
paste 核心 粘贴
outdent 核心 减少缩进
indent 核心 增加缩进
blockquote 核心 引用
undo 核心 撤消
redo 核心 恢复
removeformat 核心 清除格式
subscript 核心 下标
superscript 核心 上标
visualaid 核心 网格线
insert 核心 插入的集合按钮
hr hr 水平线
bullist lists 无序列表
numlist lists 有序列表
link link 添加和修改链接
unlink link 去除链接格式
openlink link 打开选中链接
image image 添加和修改图片
charmap charmap 特殊符号
pastetext paste 粘贴纯文本
print print 打印
preview preview 预览
anchor anchor 作者
pagebreak pagebreak 分页符
spellchecker spellchecker 拼写检查
searchreplace searchreplace 搜索
visualblocks visualblocks 隐藏块级区域开关
visualchars visualchars 隐藏字符串开关.
code code 代码
help help 帮助
fullscreen fullscreen 全屏
insertdatetime insertdatetime 插入时间
media media 插入/编辑媒体文件
nonbreaking nonbreaking 不间断空格
save save 保存(ajax)
cancel save 取消保存
table table 插入/编辑表格
tabledelete table 删除表格
tablecellprops table 单元格属性
tablemergecells table 合并单元格
tablesplitcells table 拆分单元格
tableinsertrowbefore table 在当前行之前插入一个新行
tableinsertrowafter table 在当前行之后插入一个新行
tabledeleterow table 删除当前行
tablerowprops table 行属性
tablecutrow table 剪切选定行
tablecopyrow table 复制选定行
tablepasterowbefore table 在当前行之前粘贴行
tablepasterowafter table 在当前行之后粘贴行
tableinsertcolbefore table 在当前列之前插入一个列
tableinsertcolafter table 在当前列之后插入一个列.
tabledeletecol table 删除当前列
rotateleft imagetools 逆时针旋转当前图像
rotateright imagetools 顺时针旋转当前图像
flipv imagetools 垂直翻转当前图像
fliph imagetools 水平翻转当前图像
editimage imagetools 打开图像编辑对话框
imageoptions imagetools 打开图像配置对话框
fullpage fullpage 完整页面的文档属性
ltr directionality 设置编写方向从左到右
rtl directionality 设置编写方向从右到左
emoticons emoticons 表情
template template 插入模板
forecolor textcolor 文本颜色
backcolor textcolor 背景颜色
restoredraft restoredraft 恢复到最新的自动保存草稿
insertfile moxiemanager 引入文件
a11ycheck a11ychecker 检查访问性
toc toc 插入目录
quickimage inlite 插入本地图像
quicktable inlite 插入2X2的表格
quicklink inlite 插入连接

 TinyMCE菜单配置详解

 

本文章讲述TinyMCE的菜单方面的配置方法。

本文的前提为你已经将TinyMCE整合到了你自己的项目中。

什么是菜单

分为两个部分，上面的文件、编辑...为 菜单栏 部分。
下面的为 工具栏 部分。

启用和停用菜单栏

通过init配置项menubar来配置菜单栏是否启用的项目和显示的顺序。

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'},
  }
})

 

 

配置菜单项

菜单配置项指的是各个子菜单的项。
所属插件为核心的项为基本包里自带的功能，直接写在menu的items项里就可以，
属于插件的项需要引入插件(plugins: '插件名')然后在menu的items中配置。

配置项所属插件描述
newdocument 核心 创建一个新文档
undo 核心 撤回
redo 核心 恢复
visualaid 核心 网格线.
cut 核心 剪切
copy 核心 复制
paste 核心 粘贴
selectall 核心 全选
bold 核心 加粗
italic 核心 斜体
underline 核心 下划线
strikethrough 核心 删除线
subscript 核心 下标
superscript 核心 上标
removeformat 核心 清除格式
codeformat 核心 内联形式插入代码.
blockformats 核心 块形式插入代码.
align 核心 更改对齐方式.
formats 核心 所有可用格式.
link link 添加一个连接.
openlink link 添加一个在新标签页中打开的连接.
image image 添加图片.
charmap charmap 开启字符映射表.
pastetext paste 粘贴为纯文本.
print print 打印.
preview preview 预览
hr hr 横线
anchor anchor 插入锚点.
pagebreak pagebreak 分页符
spellchecker spellchecker 拼写检查开关.
searchreplace searchreplace 打开搜索和替换对话框
visualblocks visualblocks 隐藏块级区域开关.
visualchars visualchars 隐藏字符串开关.
code code 源码预览.
fullscreen fullscreen 全屏
insertdatetime insertdatetime 插入时间.
media media 插入媒体文件
nonbreaking nonbreaking 插入一个nonbreaking
inserttable table 插入表格
tableprops table 配置并插入表格.
deletetable table 删除表格.
cell table 表格单元配置
row table 表格行配置
column table 表格列配置
restoredraft autosave 恢复到上次自动保存的数据
fullpage fullpage 查看完整的文档属性
toc toc 插入目录
help help 帮助菜单
 

获取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

 



   

标签：工具栏,核心,配置,TinyMCE,插入,init,详解,link,table
来源： https://www.cnblogs.com/8999zzz/p/16591948.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有