首页 > 其他分享 >TinyMCE工具栏配置详解

TinyMCE工具栏配置详解

时间：2022-08-16 16:23:50浏览次数：87  
标签：工具栏 核心 配置 TinyMCE 插入 详解 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,插入,详解,link,table
From： https://www.cnblogs.com/8999zzz/p/16591948.html

相关文章

  • 技术分享 | 实战详解接口测试请求方式Get、post
    原文链接本文节选自霍格沃兹测试开发学社内部教材在日常的工作当中，http请求中使用最多的就是GET和POST这两种请求方式。那么掌握这两种请求方式的原理，以及两种请......
  • xxl-job 的cron表达式详解
    一、xxl-job 的简介xxl-job 是一个轻量级分布式任务调度平台，核心的设计目标：学习简单、开发迅速、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。而......
  • Java注解最全详解(超级详细)
    Java注解是一个很重要的知识点，掌握好Java注解有利于学习Java开发框架底层实现。@mikechenJava注解定义Java注解又称Java标注，是在JDK5时引入的新特性，注解（也被称为元数......
  • json详解
    简述json是JavaScript Object Notation的缩写，json是轻量级的文本数据交换格式，SON独立于语言：JSON使用Javascript语法来描述数据对象，但是JSON仍然独立于语言和平......
  • Nacos 实现原理详解
    Nacos架构  ProviderAPP：服务提供者ConsumerAPP：服务消费者NameServer：通过VIP（VirtualIP）或DNS的方式实现Nacos高可用集群的服务路由NacosServer：Nacos服......
  • JWT 基础概念详解
    什么是JWTJWT（JSONWebToken）是目前最流行的跨域认证解决方案，是一种基于Token的认证授权机制。从JWT的全称可以看出，JWT本身也是Token，一种规范化之后的JSON结构......
  • MVC_jsp演变历史以及MVC详解
    MVC_jsp演变历史jsp演变历史1、早期只有servlet，只能使用response输出标签数据，非常麻烦2、后来有jsp，简化了Servlet的开发，如果过度使用jsp，在jsp中即写大量的java......
  • innobackupex参数详解
    innobackupex参数解析 --apply-log   通过应用同一目录下的事务日志文件xtrabackup_logfile，在BACKUP-DIR目录准备一个备份。页建立一个新的事务日志文件。innoDB的......
  • Albert理论详解：用矩阵分解与跨层参数共享减少参数量
    1.介绍Albert是Bert的一个变种，它在Bert的基础上减少了参数量，使整个模型更加的“轻量化”，同时也保持了Bert的性能，但值得注意的是，Albert虽然显著地减少了参数量，但并没有显著......
  • MVC_jsp演变历史和详解
    MVC_jsp演变历史MVC: 开发模式（ModelViewController）1.jsp演变历史1.早期只有Servlet，只能使用response输出标签数据，非常麻烦2.后来又jsp，简化了Se......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99