zoukankan      html  css  js  c++  java
  • 富文本编辑器Tinymce的示例和配置

    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="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>
  • 相关阅读:
    Excel的VBA小练习
    敏捷和产品
    Ubuntu的系统应用
    也晒晒生产力工具:键盘
    SQLServer 2012 Ent 安装失败,另辟蹊径
    还是要精简开发呀,VS2015太大,VS2010不想装
    必须夸夸Sublime,大文件打开
    过节了,开源中国歪歪了!!!
    关于VisualStudio2010发布项目问题
    Visual Studio 各个版本汇总
  • 原文地址:https://www.cnblogs.com/xusp/p/11590448.html
Copyright © 2011-2022 走看看