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. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：测试SSH框架分层整合及验证事务是否有效

    测试框架分层的整合 HibernateTemplate 和 HibernateDaoSupport,这两个类是 Spring 为整合 Hibernate3 提供的两个工具类. HibernateTem ...

  2. MBE风格图标

    图标的定义 图标是一种通过相似性或类比行来代表对象的符号. 图标的重要性 1.图形以其无与伦比的识别性带来信息传达效率的提升. 2.图形以其百变多样的趣味性带来视觉体验的享受提成用户体验. 3.图形以 ...

  3. SpringBoot安全认证Security

    一.基本环境搭建 父pom依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactI ...

  4. 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3

      Node类型的变化   访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...

  5. Python 自省指南

    原作者:Patrick K. O'Brien 什么是自省? 在日常生活中,自省(introspection)是一种自我检查行为.自省是指对某人自身思想.情绪.动机和行为的检查.伟大的哲学家苏格拉底将生 ...

  6. 【LeetCode】跳跃游戏II

    [问题]给定一个非负整数数组,你最初位于数组的第一个位置.数组中的每个元素代表你在该位置可以跳跃的最大长度.你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [,,,,] 输出: ...

  7. ContentProvider ContentResolver ContentObserver 内容：提供、访问、监听

    内容提供 public class PersonContentProvider extends ContentProvider{ private static final String AUTHORI ...

  8. java课程之团队开发冲刺阶段2.9

    总结昨天进度: 已经完成查询课程信息任务 遇到的困难: 已经全部解决 今天的任务: 修改APP图标 当日总结: manifest中管理着APP的基本信息资料,所以是在manifest文件中修改APP的 ...

  9. Python 使用print实现进度

    import time print("0%",end='') time.sleep(2) print("\r1%",end='') time.sleep(2) ...

  10. [GXYCTF2019]BabySQli

    0x00 知识点 emmm这道题目就是脑洞得大,能猜后端源码 0x01 解题 查看源码: base32,base64解码得到 select * from user where username = ' ...