富⽂本编辑器Tinymce的⽰例和配置
Demo链接：
有时候需要验证tinyMCE编辑器中的内容是否符合规范（不为空），就需要获取⾥⾯的内容。
1、如果当前页⾯只有⼀个编辑器：
获取内容：Content()
设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
2、如果当前页⾯有多个编辑器（下⾯的“[0]”表⽰第⼀个编辑器，以此类推）：
获取内容：tinyMCE.editors[0].getContent()
设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
html富文本框3、获取不带HTML标记的纯⽂本内容：
var activeEditor = tinymce.activeEditor;
var editBody = Body();
activeEditor.selection.select(editBody);
var text = Content( { ‘format’ : ‘text’ } );
Html代码⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tinymce 4 editor</title>
</head>
<body>
<script type="text/javascript"src="cdn.bootcss/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="tinymce.min.js"></script>
<script type="text/javascript" src="jquery.tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#txt",
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 codesample"
],
toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime 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: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
],
language:'zh_CN'
});</script>
<form method="post" action="somepage">
<textarea name="content" id ="txt"></textarea>
</form>
<button id="btn">提交</button>
<pre id="xx"></pre>
</body>
<script type="text/javascript">
$("#btn").click(function(){
$("#xx").html(Content() );
})
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。