HTML编辑器

一、页面效果

二、引入JS、CSS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>编辑器</title>

    <script th:src="@{/plugins/editor/tinymce.min.js}"></script>

    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>

</head>

<body>

<div class="layui-container" style="width: 100%;">

    <div class="layui-row">

        <div class="layui-col-md12">

            <!-- 模块名 -->

            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">编辑器</blockquote>

            <div id="content"></div>

            <div class="layui-btn-container" style="margin-top: 10px">

                <button type="button" class="layui-btn layui-btn-primary" onclick="setcontent()">填入数据</button>

                <button type="button" class="layui-btn" onclick="getcontent()">读取数据</button>

                <button type="button" class="layui-btn layui-btn-normal" onclick="getbody()">获取纯文本</button>

            </div>

        </div>

    </div>

</div>

</body>

<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>

<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>

<script>

    $(function () {

        /**

         * 编辑器初始化

         */

        tinymce.init({

            selector: '#content', //容器，可使用css选择器

            language: 'zh_CN', //调用放在langs文件夹内的语言包

            toolbar: true, //工具栏

            menubar: true, //菜单栏

            branding: false, //右下角技术支持

            inline: false, //开启内联模式

            elementpath: false,

            min_height: 400, //最小高度

            height: 800,  //高度

            skin: 'oxide',

            toolbar_sticky: true,

            visualchars_default_state: true, //显示不可见字符

            image_caption: true,

            paste_data_images: true,

            relative_urls: false,

            // remove_script_host : false,

            removed_menuitems: 'newdocument',  //清除“文件”菜单

            plugins: "lists,hr, advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount", //依赖lists插件

            toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',

            //选中时出现的快捷工具，与插件有依赖关系

            images_upload_url: '/upload/uploadFile', /*后图片上传接口*/ /*返回值为json类型 {'location':'uploads/jpg'}*/

            setup: function (editor) {

                editor.on('change', function () {

                    editor.save();

                });

            }

        });

    })

</script>

三、数据操作

3.1 填入数据

  /*填入初始数据*/

//tinyMCE.activeEditor.setContent("<h1>测试</h1><hr><h2>这是测试的数据<h2>");

/*

1、如果当前页面只有一个编辑器：

    获取内容：tinyMCE.activeEditor.getContent()

    设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）：

    获取内容：tinyMCE.editors[0].getContent()

    设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

*/

function setcontent() {

    tinyMCE.activeEditor.setContent("<h1>设置内容1</h1>");

}

3.2 读取数据

  function getcontent() {

    alert(tinyMCE.activeEditor.getContent());

}

3.3 获取纯文本

 /*3、获取不带HTML标记的纯文本内容：

     var activeEditor = tinymce.activeEditor;

     var editBody = activeEditor.getBody();

     activeEditor.selection.select(editBody);

     var text = activeEditor.selection.getContent( {'format' : 'text' } );*/

function getbody() {

    var activeEditor = tinymce.activeEditor;

    var editBody = activeEditor.getBody();

    activeEditor.selection.select(editBody);

    var text = activeEditor.selection.getContent({'format': 'text'});

    alert(text);

}

3.4 上传图片

需要注意：修改 images_upload_url: 'xxxx/xxx' 为你的接口地址； 返回格式

 {

  'location': 'uploads/jpg'

}

效果

链接地址

详细请参照中文文档：http://tinymce.ax-z.cn/plugins/autosave.php

【HTML】TinyMCE 编辑器的更多相关文章

  1. tinymce 编辑器 上传图片

    tinymce编辑器进行本地图片上传 首先下载tinymce.js之后 在form中添加一个<textarea>元素 给其一个id和name 然后就可以初始化编辑器了 tinymce.in ...

  2. Flask博客开发——Tinymce编辑器

    之前Flask博客的文本编辑器比较简陋,这里为博客添加个优雅易用的Tinymce文本编辑器. 1.项目中添加Tinymce 下载好Tinymce包以及语言包,并添加到项目中.添加到项目的方法,参考了这 ...

  3. 如何使tinymce编辑器的高度随内容自变化（转载）

    如何使tinymce编辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件: tinymce.init({ selector: "textarea", // ...

  4. Tinymce 编辑器添加自定义图片管理插件

    在使用Tinymce的过程中需要用到图片上传功能,而提供的上传插件在上传文件后是给了一个连接地址,就想用户需要什么图片,不能用最直观的方式表现出来么! 虽然官网上也有一个文件管理的插件moxieman ...

  5. TinyMCE编辑器

    TinyMCE编辑器下载地址   http://www.tinymce.com/download/download.php

  6. WordPress TinyMCE 编辑器增强技巧大全

    说到WordPress自带的TinyMCE 编辑器,有些国人总是不太满意.针对这个情况,倡萌已经介绍了一些增强或替代的方法: WordPress编辑器增强插件:TinyMCE Advanced Wor ...

  7. 在Tinymce编辑器里，集成数学公式

    在以前,需要在Web页面显示数学公式,常用的都是先制作成图片,然后插入到页面里.这使得后期对数学公式的修改变的麻烦,同时也不利于搜索引擎搜索. 本文将介绍如何在TinyMce编辑器里集成数学公式.先看 ...

  8. TinyMCE编辑器图片上传扩展（base64方式），asp.net mvc5

    编辑器上传图片一般都是先上传到服务器中,若是用户取消或忘记提交表单就产生一张废图在空间里面,时间一长就产生大量占用空间的无用图片,现在就试试提交前先用base64,提交后,在后台处理编辑器内容中的&l ...

  9. 黄聪：wordpress如何扩展TinyMCE编辑器，添加自定义按钮及功能

    在functions.php文件里面添加: add_action( 'admin_init', 'my_tinymce_button' ); function my_tinymce_button() ...

  10. 公式for TinyMCE 编辑器@ cnblogs.com

    编辑器截图: 行内公式:\(  f(x,y,z) = 3y^2 z \left( 3 + \frac{7x+5}{1 + y^2} \right)  \) 行间公式:\\(  f(x,y,z) = 3 ...

随机推荐

  1. Kubernetes入门实践(Job/CronJob)

    基于Pod的设计理念,Kubernetes有两种对象Job和CronJob Job和CronJob组合了Pod,实现了对离线业务的处理.如Nginx和busybox,分别代表了Kubernetes里的 ...

  2. 搭建CTF动态靶场

    前言 本文借鉴文章:https://www.yuque.com/dengfenglai-esbap/kb/mc4k41?#xOxNG 在此基础上修改了一点(照着原来的做没成功),感谢这位师傅给的资源. ...

  3. Problems with EXC_BAD_ACCESS in CCBReader

    Hi guys, I've found problems using the CCBReader when deploying my game to an iPhone 4.There are sev ...

  4. Mybatis 坑（1）

    org.apache.ibatis.executor.ExecutorException: No constructor found in xxxx [Integer,String] 这种情况一般是类 ...

  5. WPF Button MouseDown事件

    Button的MouseDown事件 WPF的Button控件,鼠标点击时,MouseDown事件没有触发. 经确认,Button的MouseDown被内部处理了.下面是基类ButtonBase的部分 ...

  6. pg序列的增删改查

    添加序列. CREATE SEQUENCE IF NOT EXISTS public.data_device_id_seq INCREMENT 1 START 1 MINVALUE 1 MAXVALU ...

  7. vue全家桶进阶之路43：Vue3 Element Plus el-form表单组件

    在 Element Plus 中,el-form 是一个表单组件,用于创建表单以便用户填写和提交数据.它提供了许多内置的验证规则和验证方法,使表单验证更加容易. 使用 el-form 组件,您可以将表 ...

  8. 一个线上全文索引BUG的排查：关于类阿拉件数字的分词与检索

    说到全文检索的分词,多半讲到的是中(日韩)文分词,少有英文等拉丁文系语言,因为英语单词天然就是分词的. 但更少讲到阿拉伯数字.比如金额,手机号码,座机号码等等. 以下不是传统的从0开始针对mysql全 ...

  9. ThreadLocal 的应用及原理

    1. 是什么 JDK 对 ThreadLocal 类的描述为: 此类提供线程局部变量.这些变量与普通变量的不同之处在于,每个访问一个变量的线程(通过其get或set方法)都有自己的.独立初始化的变量副 ...

  10. 深度学习应用篇-计算机视觉-图像分类[2]：LeNet、AlexNet、VGG、GoogleNet、DarkNet模型结构、实现、模型特点详细介绍

    深度学习应用篇-计算机视觉-图像分类[2]:LeNet.AlexNet.VGG.GoogleNet.DarkNet模型结构.实现.模型特点详细介绍 1.LeNet(1998) LeNet是最早的卷积神 ...