文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹

平时使用时主要用到获取内容和写入内容两个按钮

获取内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>

  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

   <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>

</head>

<body>

<div>

<!--文本编辑器显示区域-->

    <script id="editor" type="text/plain" style="width:800px;height:300px;"></script>

</div>

<div>

 <button onclick="getContent()">获得内容</button>

 <button onclick="setContent()">写入内容</button>

 </div>

<div id="xianshi"></div>

</body>

<script type="text/javascript">

//实例化文本编辑器，这句话必须有

var ue = UE.getEditor('editor');

function getContent() {

    //主要作用语句

    //在文本编辑器中写入内容，点击获得内容按钮后，在xianshi<div>里显示内容

document.getElementById("xianshi").innerHTML = UE.getEditor('editor').getContent();

}

</script>

</html>

文本编辑器中写入的内容：

xianshi<div>中现实的内容：

写入内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>

  <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

   <script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>

</head>

<body>

<div>

<!--文本编辑器显示区域-->

    <script id="editor" type="text/plain" style="width:800px;height:300px;"></script>

</div>

<div>

 <button onclick="getContent()">获得内容</button>

 <button onclick="setContent()">写入内容</button>

 </div>

<div id="xianshi"></div>

</body>

<script type="text/javascript">

//实例化文本编辑器，这句话必须有

var ue = UE.getEditor('editor');

function setContent(isAppendTo) {

var str = "<p style='white-space: normal;'><span style='background-color: rgb(84, 141, 212);'>斯柯达晶高科的复活节</span><img src='http://localhost:8080/ueditor/php/upload/image/20160704/1467600934975616.png' title='1467600934975616.png' alt='6.png'></p><p style='white-space: normal;'><span style='text-decoration: underline; color: rgb(0, 176, 80);'><em>看电视剧赶快回家回家的撒</em></span></p><p><br></p>";

 //主要作用语句

UE.getEditor('editor').setContent(str, isAppendTo);

}

</script>

</html>

写入内容前现实的内容：

获取内容代码加到对应的方法中，然后写入内容，显示一样的内容：

Thinkphp 文本编辑器的更多相关文章

  1. 【ThinkPHP学习】ThinkPHP自己主动转义存储富文本编辑器内容导致读取出错

    RT. ThinkPHP的conf文件里的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认參数过滤方法 用于 ...

  2. ThinkPHP讲解（十二）——文本编辑器和ajax传址

    一.文本编辑器 1.首先,在网上下载ueditor文件 2.在要添加文本编辑器的页面中引用ueditor文件中的js文件 <script type="text/javascript&q ...

  3. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  4. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

  5. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  6. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  7. 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  8. 关于SMARTFORMS文本编辑器出错

    最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...

  9. 基于trie树的具有联想功能的文本编辑器

    之前的软件设计与开发实践课程中,自己构思的大作业题目.做的具有核心功能,但是还欠缺边边角角的小功能和持久化数据结构,先放出来,有机会一点点改.github:https://github.com/chu ...

随机推荐

  1. 动态规划（决策单调优化）：BZOJ 4518 [Sdoi2016]征途

    4518: [Sdoi2016]征途 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 532  Solved: 337[Submit][Status][ ...

  2. Android安全bug ANDROID-8219321

    ANDROID-8219321漏洞主要源自Android ZipFile函数漏洞:没有进行校验重名entry逻辑漏洞,逻辑漏洞细节详见Google+文章和Bluebox Security提报Andro ...

  3. [Locked] Wiggle Sort

    Wiggle Sort Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= ...

  4. UVa 674: Coin Change

    动态规划题.对于1,5,10,25,50五种币值的硬币,编号为0~4,存入数组cent中.数组iWay的元素iWay[k][i]表示仅使用0~i的硬币凑出k分钱的方法数,按是否使用编号为i的硬币分类, ...

  5. 利用jks2pfx转换keystore格式的证书为pfs格式（含秘钥和证书的形式）

    利用java语言写的openssl转换证书格式工具,使用方法如下所示: Java KeyStore文件转换为微软的.pfx文件和OpenSSL的PEM格式文件(.key + .crt)运行方式:JKS ...

  6. Solr系列一:Solr与Tomcat的整合

    第一次尝试着去写一个系列的教程,希望自己能坚持下去,也希望自己能够通过博客的编写来加深自己对solr搜索的理解. Solr与Tomcat的整合网上有很多教程,我就以我的整合为例来讲述一下我的整合过程, ...

  7. flume-ng 使用spool source 传输文件到hdfs

    Flume 1.4.0 User Guide 地址:http://archive.cloudera.com/cdh4/cdh/4/flume-ng-1.4.0-cdh4.6.0/FlumeUserGu ...

  8. IntelliJ IDEA安装 一些配置

    idea 配置修改 本篇 参考https://blog.liyang.io/234.html. 1.修改IDEA菜单的字体大小: 单击File | Project Structure菜单项,打开Pro ...

  9. java 从零开始，学习笔记之基础入门<Oracle_基础>（三十三)

    Oracle 数据库基本知识   [训练1] 显示DEPT表的指定字段的查询.               输入并执行查询:               SELECTdeptno,dname FROM ...

  10. 页游AS客户端架构设计历程记录

    以下是一个只用JAVA做过服务器架构的程序员做的AS客户端架构,希望大家能推荐好的框架和意见,也求AS高程们的引导,等到基本功能成形后,低调开源,框架可以支持一个中度型页游的开发,本文不断更新中... ...