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. 类的始祖Object

    一.概述 Object时java中顶级父类,也是唯一没有父类的类:它是整个java中最基本的类,在java中所有的类都默认继承了Object. 二.重要方法 1.clone方法 克隆出一个新的对象. ...

  2. 前端第一篇---前端基础之HTML内容

    前端基础之HTML内容 阅读目录(Content) 一.HTML初识 1.web服务本质 2.HTML是什么 3.HTML不是什么 二.HTML文档结构 三.HTML标签格式 四.HTML注释 五.H ...

  3. android 开发学习3

    DAO:DATA ACCESS OBJECT getApplication()和MainActivity.this 是两种不同的context,也是最常见的两种.第一种中context的生命周期与Ap ...

  4. mybatis基础CURD的学习

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  5. 如何创建NPM包并上传

    1 在NPM网站上注册,并验证(verify)自己的邮箱 https://www.npmjs.com 2 用命令行定位到你的库文件夹 3 在命令行里登录npm, 按提示依次输入用户名 密码 注册邮箱 ...

  6. 关于低成本Sub-1Ghz无线射频方案首选：CMT2110A

    对于现在的无线遥控市场竞争力极大,不过是在成本方面和性能方面大家都希望能做到精打细算,目前超低功耗Sub-1Ghz 首选方案是CMT2110/17A 芯片具有超低成本,高性能灵活的单芯片OOK发射器, ...

  7. 【LeetCode】组合总和

    [问题]给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制 ...

  8. 六、CI框架之分配变量

    一.在controllers里面添加 $this->load->vars('m_Str1','我是一个字符串变量'); 二.在View中添加相应代码 界面显示效果如下: 不忘初心,如果您认 ...

  9. DataRow转实体

    调用                       DataRow row = new DataRow(); ConvertToEntity<实体类>(row) private T Conv ...

  10. swiper用axios异步请求后 循环失效

    解决方案 使用ajax动态获取数据  当数据还没有收到的时候,swiper组件收到的是跟组件data传过来的空数组,会造成渲染问题 这个时候可以给swiper组件 设置一个  v-if='list.l ...