• 2024-10-07
宇哥博客 前端开发 TinyMCE富文本编辑器配置参考

TinyMCE富文本编辑器配置参考

文本基于tinymce5.10.0版本,下面直接上代码示例。

代码中常用功能已注释。

<script src="tinymce/tinymce.min.js"></script>
<textarea id="textarea">tinymce文本编辑器测试文字</textarea>
<script type="text/javascript">	
tinymce.init({
    selector: '#textarea',
    language:'zh_CN', //中文,需要引入zh_CN.js
    plugins: 'preview autolink directionality visualchars fullscreen image link template code table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autoresize imagetools',
			
    //toolbar: 'code | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright indent2em lineheight | bullist numlist | table image | fullscreen | styleselect formatselect fontselect fontsizeselect | preview',
			content_style: "body {font-family:\"微软雅黑\";font-size:18px;height:200px; }",//自定义编辑器样式
			
			max_height: 250, //编辑器最大高度(超过这个高度出现滚动条)
			toolbar : 'fontsizeselect fontselect forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat bullist numlist link table image lineheight preview code codesample fullscreen',
			//images_upload_url: 'upload.php',

			branding: false, //隐藏编辑器右下角标识
			menubar: false, //隐藏菜单栏
			
    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',//字体大小自定义设置

			 font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms",//字体样式自定义设置

    //icons:'ax-color',
			//图片自定义前端上传逻辑(也可以直接用上边的images_upload_url: 'upload.php',)
			images_upload_handler: function (blobInfo, succFun, failFun) {
				var xhr, formData;
				var file = blobInfo.blob();//转化为易于理解的file对象
				xhr = new XMLHttpRequest();
				xhr.withCredentials = false;
				xhr.open('POST', 'upload.php');
				xhr.onload = function() {
					var json;
					if (xhr.status != 200) {
						failFun('HTTP Error: ' + xhr.status);
						return;
					}
					json = JSON.parse(xhr.responseText);
					if (!json || typeof json.location != 'string') {
						//failFun('Invalid JSON: ' + xhr.responseText);
						failFun( '上传失败' );
						return;
					}
					succFun(json.location);
				};
				formData = new FormData();
				formData.append('file', file, file.name );//此处与源文档不一样
				xhr.send(formData);
			}

});

</script>

图片上传PHP后台文件upload.php

<?php
error_reporting(E_ALL);
/***************************************************
 * 数据来源白名单 *
 ***************************************************/
$accepted_origins = array("http://localhost", "http://192.168.1.12", "http://example.com");
/*********************************************
 * 设置图片保存的文件夹 *
 *********************************************/
$imageFolder = "images/";
reset ($_FILES);
$temp = current($_FILES);
if (!is_uploaded_file($temp['tmp_name'])){
  // 通知编辑器上传失败
  header("HTTP/1.1 500 Server Error");
  exit;
}
/*
if (isset($_SERVER['HTTP_ORIGIN'])) {
  // 验证来源是否在白名单内
  if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
  } else {
    header("HTTP/1.1 403 Origin Denied");
    exit;
  }
}
*/
/*
  如果脚本需要接收cookie,在init中加入参数 images_upload_credentials : true
  并加入下面两个被注释掉的header内容
*/
// header('Access-Control-Allow-Credentials: true');
// header('P3P: CP="There is no P3P policy."');

// 简单的过滤一下文件名是否合格
if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
    //header("HTTP/1.1 400 Invalid file name.");
    //exit;
}
$ext=pathinfo($temp['name'], PATHINFO_EXTENSION);
// 验证扩展名
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
    header("HTTP/1.1 400 Invalid extension.");
    exit;
}
// 都没问题,就将上传数据移动到目标文件夹,此处直接使用原文件名,建议重命名
$filetowrite = $imageFolder . time().'.'.$ext;
move_uploaded_file($temp['tmp_name'], $filetowrite);
// 返回JSON格式的数据
// 形如下一行所示,使用location存放图片URL
// { location : '/your/uploaded/image/file.jpg'}
echo json_encode(array('location' => $filetowrite ));

编辑器效果:

以上php图片上传示例来自:http://tinymce.ax-z.cn/advanced/php-upload-handler.php

更多

TinyMCE中文文档:http://tinymce.ax-z.cn/

5.10.0社区版:http://download.tiny.cloud/tinymce/community/tinymce_5.10.0.zip

5.10.0开发版:http://download.tiny.cloud/tinymce/community/tinymce_5.10.0_dev.zip

中文语言包:zh_CN.js

TinyMCE官网:https://www.tiny.cloud/

tinymce-GitHub:https://github.com/tinymce/

其它

6.0.1版本,配置中toolbar设置了“fontsizeselect”(字体大小)、 “fontselect”(字体样式),但是工具栏上就是不出现,不管它了,就这样吧。

本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/1892.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

返回顶部