每个菜单在经过上面的配置后都会有一个默认的子菜单。
如果想自己定义每个菜单的子菜单项需要通过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