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. Git提交代码仓库的两种方式

    目录 一: 两种本地与远程仓库同步 1 git 远程仓库 提交本地版本库操作 提交到远程版本库操作 1.Git 全局设置: 2.增加一个远程仓库地址 3.查询当前存在的远程仓库 5.本地版本库内容提交 ...

  2. 执行sql报lock wait timeout exceeded； try restarting transaction

    mysql查询时候报错: Lock wait timeout exceeded; try restarting transaction 译文:锁等待超时;试着重新启动事务 被锁了,需要解锁. 1.in ...

  3. count(列名)、count(1)和 count(*)有什么区别?

    在MySQL中,这几个都是统计操作,很多人在使用的时候,都使用的是count(1),这有没有问题?使用正确?达到了统计效果? 我们从效果和效率两方面来分析下 执行效果 count(*) 包括了所有的列 ...

  4. 【Python基础】字符串的基本使用

    b6f9d807-edb2-4e0a-b554-fae322343bee 字符串是Python中最基本的数据类型之一.它是由一系列字符组成的不可变序列.这意味着一旦创建了一个字符串,就不能直接修改它的 ...

  5. GPT大语言模型Alpaca-lora本地化部署实践【大语言模型实践一】

    模型介绍 Alpaca模型是斯坦福大学研发的LLM(Large Language Model,大语言)开源模型,是一个在52K指令上从LLaMA 7B(Meta公司开源的7B)模型微调而来,具有70亿 ...

  6. .Net8顶级技术:IR边界检查之IR解析(二）

    前言 IR技术应用在各个编程语言当中,它属于JIT的核心部分,确实有点点麻烦.但部分基本明了.本篇通过小例子了解下.前情提要,看这一篇之前建议看看前一篇:点击此处,以便于理解. 概括 1.前奏 先上C ...

  7. 使用umi+dva做一个demo

    最初只是使用react 进行开发项目,发现项目过大状态管理起来就相当困难,虽然有redux, mobx,但是使用起来还是相当繁琐,而目前umi有现成的轮子使用简单,当然愿意尝试了,趁现在假期有时间简单 ...

  8. Android failed linking file resources.

    今天在配置一个app 的启动资源文件时老是提示error: failed linking file resources. 且转悠半天这个提示太难定位错误的范围了,最后发现旁边的一个图标,鼠标移入tit ...

  9. {"status":-1,"statusText":"ERR_CONNECT_FAILED"}

    今日使用weex 的stream 遇到一个极坑,也极傻的问题 一.steam.fetch 下面是我使用steam.fetch调用后台接口都截图 二.页面测试 奇怪的是,我借同事是手机来进行测试,有一个 ...

  10. python如何利用算法解决业务上的【分单问题】

    分单是很多企业日常工作中非常典型的一项内容,它非常复杂,但同时又极为重要,如何合理的分单是企业管理中一个很重要的课题. 之所以说分单很复杂,是因为影响单据该分给谁,分多少量这个事儿本身就有太多的影响因 ...