h5富文本编辑框架TinyMCE

最新推荐文章于 2024-05-11 09:47:16 发布

chen_jia_hao

最新推荐文章于 2024-05-11 09:47:16 发布

阅读量1.9k

点赞数 1

分类专栏： javascript 文章标签： TinyMCE 富文本首行缩进

本文链接：https://blog.csdn.net/chen_jia_hao/article/details/89460647

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、TinyMCE富文本官方文档学习：https://www.tiny.cloud/docs/quick-start/

2、TinyMCE5.0.3 js包下载（已整合中文语言包，官方有提供）：https://download.csdn.net/download/chen_jia_hao/11136644

功能很强大，界面好看，轻量级，插件多。不过高级功能需要收费。

3、简单demo：

<!DOCTYPE html>
<html>
<head>
  <script src="./tinymce/js/tinymce/tinymce.min.js"></script>
  <script type="text/javascript">
	 var tinyMCE =  tinymce.init({
		  selector: '#mytextarea' 
		 ,language: 'zh_CN' //指定语言
		 ,font_formats:'Arial=arial,helvetica,sans-serif;Times New Roman;新宋体;仿宋;宋体;黑体;楷体;华文楷体;华文行楷;华文新魏' //字体
		 ,plugins : 'advlist code searchreplace autolink link image imagetools lists charmap print preview autoresize table charmap wordcount' //引入插件
		 ,object_resizing:true //默认情况下启用此选项，允许您调整表格和图像的大小。
		 //,imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions"
		 ,skin: "oxide" //配置皮肤
		 ,statusbar: false //是否应显示编辑器底部的状态栏
		 ,theme: 'silver' //主题
		 ,br_in_pre: false
		 ,custom_undo_redo_levels: 10 //撤消级别数,默认情况下，它设置为使用无限数量的撤消级别。custom_undo_redo_levels对于低端系统，其值应为10或更低，否则会窃取大量内存。
		 ,toolbar: [//工具栏配置
		'code print removeformat| undo redo | fontselect fontsizeselect forecolor backcolor ',
		'alignleft aligncenter alignright bold italic bullist numlist indent outdent | blockquote link image wordcount|rotateleft|preview'
	  ]
	  //, toolbar_drawer: 'floating' //sliding和floating
		 ,images_reuse_filename: true //true：不为每个上传的文件生成唯一的文件名，false反之
		 ,images_upload_url: 'file/upload' //处理图片服务器地址
		 ,automatic_uploads: false //自动上传图片标识
		 ,images_upload_handler: function (blobInfo, success, failure) {//覆盖默认上传图片处理事件
			//上传处理函数有三个参数：blobInfo，一个success回调，以及failure回调。
			// blobInfo.blob(), blobInfo.filename()
			
			console.log("images_upload_handler.....");
			success("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png");
		  }
	  });
  
  
	  window.onload=function(){
		  document.getElementById("btn").onclick=function(){
		 //$('目标元素').html(插入的内容)  //设置tinymce编辑器的内容
		 //tinymce.get('目标元素').getContent() //获取tinymce编辑器的内容
		  var content = tinymce.get('mytextarea').getContent() //获取tinymce编辑器的内容
			alert( content );
		  }
	  }
  
  </script>
</head>

<body>
  <textarea id="mytextarea">chenjiahao!</textarea>
  <button id="btn">获取内容</button>
</body>
</html>

3、富文本效果图

4、支持首行缩进插件

使用过程中，官方只提供了缩进缩退功能，没有提供首行缩进，而且还有点小问题。于是不得不自己自定义插件。关键代码如下：

/**
 * text-indent 首行缩进
 * @author chen jia hao
 * @Date 2019-04-27
 * Tinymce-Version: 5.0.3
 */
(function () {
	'use strict';
	tinymce.PluginManager.add('textindent', function(editor, url) {
	   
	  editor.on('init', function () {
			editor.formatter.register({
				textindent: {block: 'p', styles: {'text-indent': '%value'}},
			});
	  });
	  editor.ui.registry.addButton('text-indent', {
		//text: '首行缩进',
		tooltip: '首行缩进',
		icon:'indent',
		onAction: function () {
			var selectedNode = editor.selection.getNode();
			var style = editor.dom.getAttrib(selectedNode, 'style').toLowerCase().replace(/\s/g,'');
			if(style && (/text-indent:[^0]{1}\d*/).test(style)){
				tinymce.activeEditor.formatter.apply('textindent', {value : '0'});
			}else{
				tinymce.activeEditor.formatter.apply('textindent', {value : '2em'});
			}
			editor.focus();
		}
	  })
	});
})();

textindent（首行缩进）插件下载地址：https://gitee.com/chen_jia_hao/TinyMCE/

下载好之后，将textindent目录放进tinymce中的plugin目录，即可。怎么配置和官方插件一致。

更多内容后续再继续补充...

chen_jia_hao

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5富文本编辑框架TinyMCE

1、TinyMCE富文本官方文档学习：https://www.tiny.cloud/docs/quick-start/2、TinyMCE5.0.3 js包下载（已整合中文语言包，官方有提供）：https://download.csdn.net/download/chen_jia_hao/11136644功能很强大，界面好看，轻量级，插件多。不过高级功能需要收费。3、简单demo：...
复制链接

扫一扫