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. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  2. 全面介绍Windows内存管理机制及C++内存分配实例

    转自:http://blog.csdn.net/yeming81/article/details/2046193 本文基本上是windows via c/c++上的内容,笔记做得不错.. 本文背景: ...

  3. 洛谷 P2004 领地选择

    题目传送门 解题思路: 二维前缀和. AC代码: #include<iostream> #include<cstdio> using namespace std; ][],an ...

  4. DFS+BFS(广度优先搜索弥补深度优先搜索遍历漏洞求合格条件总数)--09--DFS+BFS--蓝桥杯剪邮票

    题目描述 如下图, 有12张连在一起的12生肖的邮票.现在你要从中剪下5张来,要求必须是连着的.(仅仅连接一个角不算相连)  比如,下面两张图中,粉红色所示部分就是合格的剪取.  请你计算,一共有多少 ...

  5. java百货中心供应链管理系统 源码

    开发环境: Windows操作系统开发工具:MyEclipse/Eclipse + JDK+ Tomcat + MySQL 数据库 百货中心供应链管理系统主要用于实现了企业管理数据统计等.本系统结构如 ...

  6. 短网址资料-nginx非root用户启动-systemctl启动脚本-分割root权限

    https://www.cnblogs.com/aspnethot/articles/3492191.htmlhttps://www.cnblogs.com/aspnethot/articles/34 ...

  7. P1426 小鱼会有危险吗

    题解: 在测试数据里有一个是临界值问题,探测范围是闭区间 #include<stdio.h>int main(){ double s,x;                   //注意:此 ...

  8. 寒假day18

    今天完成了人才动态模块的数据爬取

  9. 2020/1/31 PHP代码审计之目录穿越漏洞

    0x00 目录穿越 目录穿越(Directory Traversal)攻击是黑客能够在Web应用程序所在的根目录以外的文件夹上,任意的存取被限制的文件夹,执行命令或查找数据.目录穿越攻击,也与人称为P ...

  10. POJ - 1742 Coins(dp---多重背包)

    题意:给定n种硬币的价值和数量,问能组成1~m中多少种面值. 分析: 1.dp[j]表示当前用了前i种硬币的情况下,可以组成面值j. 2.eg: 3 10 1 3 4 2 3 1 (1)使用第1种硬币 ...