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. Unable to find real location for: <frozen codecs>

    问题描述 pycharm 在debug时出现了如下bug ----------------------------------------------------------------------- ...

  2. AspNetCore 成长杂记(一):JWT授权鉴权之生成JWT(其一)

    引子 最近不知怎么的,自从学了WebAPI(为什么是这个,而不是MVC,还不是因为MVC的Razor语法比较难学,生态不如现有的Vue等框架,webapi很好的结合了前端生态)以后,使用别人的组件一帆 ...

  3. Simulation-计算统计——Monte Carlo

    Monte Carlo Integration 找到原函数,再计算 无法找到原函数,MC积分 Assume that we can generate \(U_1, . . . , U_n \sim U ...

  4. 关于为element Tree组件实现仿文件夹效果及右键菜单

    <template> <div class="custom-tree-container" @contextmenu.native="handlePas ...

  5. 企名片Js逆向思路

    企名片Js逆向思路 这个案例不算难,简单说一下思路. 目标链接:https://www.qimingpian.cn/finosda/project/pinvestment 网站更新了https://w ...

  6. stl------stack与queue

    stack与queue 一.stack 二.queue 例题:详见我的另一篇博文: 栈------表达式求值 http://www.cnblogs.com/Cloud-king/p/8453703.h ...

  7. 2020-02-24：arr是面值数组，其中的值都是正数且没有重复。再给定一个正数aim。每个值都认为是一种面值，且认为张数是无限的。返回组成aim的最少货币数。

    福哥答案2020-02-24: 自然智慧即可. 1.递归.有代码. 2.动态规划.dp是二维数组.有代码. 代码用golang编写,代码如下: package main import ( " ...

  8. ue全家桶进阶之路30：Vue3定义组件和常用指令

    要定义 Vue 3 组件,你可以使用 Vue 3 提供的 defineComponent 函数. 例如,以下是一个简单的 Vue 3 组件定义: import { defineComponent } ...

  9. ImportError: cannot import name 'Bar' from 'pyecharts'

    第一步,先确认运行的py文件名称是否为pyecharts.py,如果是,先换个文件名.再运行改过名称后的py文件,不成功就继续往下看. 第二步,在cmd输入pip list,查看当前pyecharts ...

  10. CST为什么要关闭 GPU 卡的 ECC 模式而开启 TCC 模式？操作使用【详解】

    在使用CST软件之前,我们一般建议大家关闭 GPU 卡的 ECC 模式而开启 TCC 模式.那么,为什么要进行这样一个操作呢?在此之前,给大家科普一下什么是"ECC"和" ...