Rich Text Editor Tinymce examples and configuration

Demo link:

https://download.csdn.net/download/silverbutter/10557703

Sometimes you need to verify the contents of tinyMCE editor for compliance (not empty), we need to get the contents inside.

1, if the current page has only one editor:
acquiring content: tinyMCE.activeEditor.getContent ()
Set contents: tinyMCE.activeEditor.setContent ( "need to set up an editor Content")

2, if the current page has a plurality of editors (below "[0]" indicates an editor, and so on):
acquiring content: tinyMCE.editors [0] .getContent ()
set Content: tinyMCE.editors [ 0] .setContent ( "need to set up an editor content")

3, without obtaining the plain text content of the HTML tags:
var = activeEditor tinymce.activeEditor;
var editBody activeEditor.getBody = ();
activeEditor.selection.select (editBody);
var = activeEditor.selection.getContent text ({ 'the format' : 'text'});

Html Code Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>tinymce 4 editor</title>
</head>
<body>

<script type="text/javascript"src="https://cdn.bootcss.com/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"style="width:100%"></textarea>
</form>
<button id="btn">提交</button>
<pre id="xx"></pre>
</body>
        <script type="text/javascript">
               $("#btn").click(function(){
                 
                   $("#xx").html(tinyMCE.activeEditor.getContent() );
               })
        </script>
</html>

Rich Text Editor Tinymce examples and configuration

Guess you like