当前位置 : 主页 > 网页制作 > HTTP/TCP >

富文本编辑器Tinymce的示例和配置

来源:互联网 收集:自由互联 发布时间:2021-06-16
Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空), 就需要获取里面的内容。 1、如果当前页面只有一个编辑器: 获取

Demo链接:

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

有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需要获取里面的内容。 

1、如果当前页面只有一个编辑器:
获取内容:tinyMCE.activeEditor.getContent()
设置内容:tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

2、如果当前页面有多个编辑器(下面的“[0]”表示第一个编辑器,以此类推):
获取内容:tinyMCE.editors[0].getContent()
设置内容:tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

3、获取不带HTML标记的纯文本内容:
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );

Html代码示例:

<!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>
网友评论