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：

  
  



  chenjiahao!
  获取内容

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目录，即可。怎么配置和官方插件一致。

 

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