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. SMPL模型Shape和Pose参数

    两部分 1.Pose参数 2.Shape参数 一 Pose参数 共24个关节点,对应idx从0到23,图中3个小图分别表示zero shape只有idx节点分别绕x/y/z轴旋转. 其中蓝色线表示-p ...

  2. Web基础之Redis

    Redis 什么是Redis?Redis是一个基于内存的非关系型数据库,简单来说就是一个可持久化的高速缓存. 常用场景: 缓存(数据查询,端链接,新闻内容,商品内容等等)--使用最多 聊天室的在线好友 ...

  3. 每天一点点之vue框架开发 - History 模式下线上路由报404错误

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  4. 【pwnable.kr】fb

    这是pwnable.kr的签到题,记录pwn入门到放弃的第一篇. ssh fd@pwnable.kr -p2222 (pw:guest) 题目很简单,登录上了ssh后,发现了3个文件:fd,fd.c, ...

  5. ssi引用路径规则

    1.file:引用的是相对路径,相对当前文件的,特别注意使用file,被引用文件只能与当前文件同级.或下级.不能在其上级(不支持../) <!--#include file="head ...

  6. hibernate 插入date值到postgresql，丢失时分秒

    用hibernate插入java.util.Date数据时发现 时分秒 会丢失.如 2014-05-30 15:59:16.921 在postgresql数据库中显示2014-05-30 00:00: ...

  7. 经验分享：Essay写作遇到困难请你这样做

    很多留学生在essay写作中可能会遇到很多困难,要么是essay写作内容出现问题,又或者是对于essay写作格式的不了解,导致自己无法顺利完成essay.今天小编就收集了几位留学生的写作经验分享,希望 ...

  8. Spring框架之一 读取配置文件

    以下代码都是来源于官方源码(Spring-4.3.18.RELEASE),此处只是为自己以后深啃先布局出大概流程,请各看官不要浪费时间看 说明: .. 表示省略代码, // 后的如果不是源码自带则为当 ...

  9. ACwing算法基础课听课笔记（第一章，基础算法二）(差分)

    前缀和以及二维前缀和在这里就不写了. 差分:是前缀和的逆运算 ACWING二维差分矩阵    每一个二维数组上的元素都可以用(x,y)表示,对于某一元素(x0,y0),其前缀和就是以该点作为右下角以整 ...

  10. Linux学习20200215