html tinyMCE,编辑texto在线

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html tinyMCE,编辑texto在线相关的知识,希望对你有一定的参考价值。

tinymce.init({
	selector: "textarea",
	height: 300,
	plugins: [
		"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker ",
		"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
		"table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
	],

	toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
	toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
	toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

	menubar: false,
	toolbar_items_size: 'small',

	style_formats: [{
		title: 'Bold text',
		inline: 'b'
	}, {
		title: 'Red text',
		inline: 'span',
		styles: {
			color: '#ff0000'
		}
	}, {
		title: 'Red header',
		block: 'h1',
		styles: {
			color: '#ff0000'
		}
	}, {
		title: 'Example 1',
		inline: 'span',
		classes: 'example1'
	}, {
		title: 'Example 2',
		inline: 'span',
		classes: 'example2'
	}, {
		title: 'Table styles'
	}, {
		title: 'Table row 1',
		selector: 'tr',
		classes: 'tablerow1'
	}],

	templates: [{
		title: 'Ass Equipe Motokkas',
		content: "<p>&nbsp;</p>"+
				 "<p>Forte Abra&ccedil;o,</p>"+
				 "<p>Equipe Motokkas</p>"+
				 "<p><a href='http://www.motokkas.com.br'>www.motokkas.com.br</a></p>"+
				 "<p>(21) 4042-4433</p>"
	}, {
		title: 'Ass Equipe Marcos',
		content: "<p>&nbsp;</p>"+
				 "<p>Atenciosamente</p>"+
				 "<p>Marcos André</p>"+
				 "<p>Motokkas</p>"+
				 "<p><a href='http://www.motokkas.com.br'>www.motokkas.com.br</a></p>"+
				 "<p>(21) 4042-4433</p>"
	}],
	content_css: [
		'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
		'//www.tinymce.com/css/codepen.min.css'
	]
});

/**
 * resolver bug de popup
 * this workaround makes magic happen
 * thanks @harry: http://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable
 */
$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

以上是关于html tinyMCE,编辑texto在线的主要内容,如果未能解决你的问题,请参考以下文章

富文本编辑器

TinyMCE(富文本编辑器)

在 tinymce 编辑器中加载 html 文件作为初始内容

使用 TinyMCE 作为文本编辑器

Django Admin后台使用tinymc 富文本编辑器

用django-tinymce搞个富文本编辑器