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. VMware另一个程序锁定文件的一部分，进程无法访问

    问题描述:搭建RAC11g,在做共享磁盘的时候,节点2要共享节点1的磁盘,但是有一个问题,节点2关机之后,再打开,是有一个访问节点1的磁盘的过程,如果访问失败,就会开不了机器 rac1加的三个磁盘: ...

  2. JUC（三）集合的线程安全

    目录 集合的线程安全 list集合线程不安全演示 Vector解决 Collections.synchronizedList JUC 解决方案:CopyOnWriteArrayList HashSet ...

  3. 基于kubeasz部署高可用k8s集群

    在部署高可用k8s之前,我们先来说一说单master架构和多master架构,以及多master架构中各组件工作逻辑 k8s单master架构 提示:这种单master节点的架构,通常只用于测试环境, ...

  4. 3.1 JAVA方法：

    JAVA方法: 何为方法 方法是语句的集合,这个集合执行一个功能 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 java全是值传递 方法的定义和调用 方法的定义: 修饰符 返回类型 方法 ...

  5. Centos7.x 安装jenkins

    一.安装 前提:需查看是否安装了JDK 1.第一种方法 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat ...

  6. ABC267G Increasing K Times 题解

    做这道题,很有感悟,发篇文. 先给数列从小到大排个序. 接下来设 \(f_{i,j}\) 表示前 \(i\) 个数的排列形成 \(j\) 个上坡的方案数. 接下来考虑转移,分为插入第 \(i\) 个数 ...

  7. 快速上手Linux核心命令（十）：Linux安装软件

    目录 前言 rpm rpm包管理器 yum 自动化RPM包管理工具 前言 这期呢主要说一说Linux中包软件管理相关命令,这一期的命令虽然只有两个.但 软件包的安装和卸载都是我们平常最常用的,需要熟练 ...

  8. Flutter(十) 音频+视频播放

    在Flutter中,我们有各种插件可供使用,从而实现音频和视频的播放功能. 例如,可以使用"text_to_speech"插件来将文字转换为语音,使用内置的"video_ ...

  9. 使用 Django 集成 vue 到一个服务器上，还是 Django 和 vue 分开部署

    Django+Vue 的项目,实际部署的时候,使用 Django 集成 vue 到一个服务器上,还是 Django 和 vue 分开部署? 目前在架构选择,基本上定了 Django + Vue 但是实 ...

  10. ODDO之三 ：Odoo 13 开发之创建第一个 Odoo 应用

    Odoo 开发通常都需要创建自己的插件模块.本文中我们将通过创建第一个应用来一步步学习如何在 Odoo 中开启和安装这个插件.我们将从基础的开发流学起,即创建和安装新插件,然后在开发迭代中更新代码来进 ...