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>

富文本编辑器Tinymce的示例和配置的更多相关文章

  1. 富文本编辑器 tinymce 的安装与使用

    百度的富文本编辑器大家都熟悉,那么下面给大家介绍一款富文本编辑器tinymce ,个人感觉比百度的界面好看,调用方便,就不知道各位大神怎么看咯! tinymce中文文档 以下是vue中使用示例,献上最 ...

  2. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  3. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  4. 富文本编辑器TinyMCE

    最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...

  5. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

  6. 富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件wordpaster

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  7. 富文本编辑器TInyMCE,本地图片上传（Image Upload）

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  8. Java开发之富文本编辑器TinyMCE

    一.题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块.系统采用的是FCKEditor,自我感觉不是很好,如下图 特别是在用户想插入一个图片的话,就 ...

  9. tinymce 富文本编辑器 编写资料

    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...

随机推荐

  1. javaweb历史上最简单的使用Ajax判断用户名是否被注册（不跳转页面奥！）

    关于前端: 使用jquery-3.3.1.js记得要导入奥---最后我会附加我的源码的 哎我也不多说了新手加菜鸟jquery真的不太懂!看代码吧!个别地方我会写上我对本程序的理解. 关于后台也就是se ...

  2. POJ-3258 (最小值最大化问题)

    POJ - 3258 River Hopscotch Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & ...

  3. 吴裕雄--天生自然 JAVASCRIPT开发学习：函数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Android进阶——多线程系列之四大线程池的使用介绍

    线程池一直是初学者最抵触的东西,由于刚开始学习做项目并不会涉及到线程池的使用,但是不去学习它,心里又好像有个石头一直沉着,一直放心不下,其实是很简单的东西,早晚都要学,不如趁现在吧.由于文章从初学者的 ...

  5. 第21章—websocket

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  6. POST和GET方法乱码解决方案

    前言 在WEB开发的过程中,中文乱码是最为常见的问题之一.之所以会出现中文乱码的情况,主要原因是:前端使用POST或者GET方法传递的参数一般使用浏览器预先设置的编码方式进行编码,中文浏览器一般是使用 ...

  7. 阿里云服务器搭建详解——Ubuntu

    由于自己电脑配置跟不上,双系统一开,整个电脑就会变得非常卡顿,所以决定在阿里云买一个云服务器.听朋友说,学生买的话是非常便宜的,比每月开个SVIP还便宜.今天上网看了下,果然如此,每月只要9.9,确实 ...

  8. 面试题：你使用过concurrent包下的那些类？

    1.executor接口,使用executor接口的子接口ExecutorService用来创建线程池2.Lock接口下的ReentrantLock类,实现同步,比如三个线程循环打印ABCABCABC ...

  9. 洛谷 P1709 隐藏口令

    题目描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<=5,000,000),然后他把S顺时针绕成一个圈,每次取一个做开头字母并 ...

  10. MYSQL连接不上100061错误

    有界面的情况下启动MYSQL 无界面 https://blog.csdn.net/qq_22233621/article/details/72673176 参考