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. 部署：Mysql8和Mysql5.7部署同一服务器

    问题描述:将Mysql8.0.22和Mysql5.7.32部署在同一环境下 操作系统:centos7.8 数据库:Mysql8.0.22.Mysql5.7.32 版本 占用端口 实例名 数据文件 端口 ...

  2. TF-IDF定义及实现

    TF-IDF定义及实现 定义 ​ TF-IDF的英文全称是:Term Frequency - Inverse Document Frequency,中文名称词频-逆文档频率,常用于文本挖掘,资讯检索等 ...

  3. 新一代自动化测试神器Playwright

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/4bedb73c.html 你好,我是测试蔡坨坨. 说到WebUI自动化测试,首当其冲的当属Selenium,在很长的一段时间 ...

  4. MAPPO学习笔记(1)：从PPO算法开始

    由于这段时间的学习内容涉及到MAPPO算法,并且我对MAPPO算法这种多智能体算法的信息交互机制不甚了解,于是写了这个系列的笔记,目的是巩固知识,并且进行一些粗浅又滑稽的总结. 1.PPO算法的介绍 ...

  5. qiankun vue子应用升级webpack5问题记录

    升级的方式是使用最新版本的 vue-cli 脚手架,重新创建一个新项目,然后复制 @vue/cli-xxx , vue 相关依赖最新版本到子应用项目 -> 核对babel, eslint相关配置 ...

  6. Python分支结构之if语句

    程序结构 程序三种结构 顺序 循环 分支 分支结构 分支结构基本语法 if 条件表达式: 语句1 语句2 语句3 ...... 条件表达式就是计算结果必须为布尔值的表达式 表达式后面的冒号不能少 注意 ...

  7. [C++提高编程] 2、STL初识

    文章目录 2 STL初识 2.1 STL的诞生 2.2 STL基本概念 2.3 STL六大组件 2.4 STL中容器.算法.迭代器 2.5 容器算法迭代器初识 2.5.1 vector存放内置数据类型 ...

  8. 代码打包的可视化数据分析图: webpack-bundle-analyzer 的使用

    先看webpack-bundle-analyzer的效果图(官方效果图): 通过使用webpack-bundle-analyzer可以看到项目各模块的大小,可以按需优化 1.先安装 npm insta ...

  9. 2023-03-02：给定一个数组arr，长度为n， 任意相邻的两个数里面至少要有一个被选出来，组成子序列，才是合法的！ 求所有可能的合法子序列中，最大中位数是多少？ 中位数的定义为上中位数， [1,

    2023-03-02:给定一个数组arr,长度为n, 任意相邻的两个数里面至少要有一个被选出来,组成子序列,才是合法的! 求所有可能的合法子序列中,最大中位数是多少? 中位数的定义为上中位数, [1, ...

  10. 2022-08-15：k8s安装pgadmin，yaml如何写？

    2022-08-15:k8s安装pgadmin,yaml如何写? 答案2022-08-15: yaml如下: # 依赖postgres.yaml apiVersion: apps/v1 kind: D ...