Thinkphp 文本编辑器

文本编辑器:可以从网上下载---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>

写入内容前现实的内容:

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

时间: 2024-08-26 18:23:02

Thinkphp 文本编辑器的相关文章

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

RT. ThinkPHP的conf文件中的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认参数过滤方法 用于I函数... 默认这个方法是开启的.也就是说,我们往数据库里面存储的数据中都会经过htmlspecialchars这个函数的转义处理. 我在我的项目中使用了Kindeditor富文本编辑器(或许你使用的是Ueditor\ckeditor),通过富文本编辑器编辑文章的内容然后存储到数据库中,再从数据库中读取

ThinkPHP讲解(十二)——文本编辑器

1.首先,在网上下载ueditor文件 2.在要添加文本编辑器的页面中引用ueditor文件中的js文件 <script type="text/javascript" charset="utf-8" src="../ueditor/utf8-php/ueditor.config.js"></script> <script type="text/javascript" charset="u

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

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued

Vim 和 Emacs 文本编辑器:你更喜欢哪个?

关于Linux的学习,请参考书籍<Linux就该这么学> 这可能是2016年,在许多开发人员和系统管理员之间,编辑器战争中仍然活得很好的. VIM(vi)或Emacs:两者都有很强的功能,当然,很多人使用别的文本编辑器,你喜欢哪个? 毫无疑问,这两个还是有很强的追随者:当我们被问及最喜欢的文本编辑器,自从去年vi出世,但很显然,辩论仍然很激烈. 哪个最适合你,可能很大取决于个人的喜好.你可能已经内置插件满足您的需求,也许在你开发的同时产生了一些强烈的感情. 因此,让我们知道你喜欢哪种文本编辑器

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器

[Linux学习笔记] Linux文本编辑器Vim/Vi

文本编辑器Vim: Vim/Vi是一个功能强大的全屏幕文本编辑器,是Linux/UNIX上最常用的文本编辑器. 它的作用是建立.编辑.显示文本文件. Vim/Vi没有菜单,只有命令. 插入命令 命令 作用 a 在光标后附加文本 A 在本行行末附加文本 i 在光标前插入文本 I 在本行开始插入文本 o 在光标下插入新行 O 在光标上插入新行 定位命令 命令 作用 h 方向左键. 左移一个字符 j 方向下键. 下移一行 k 方向上键. 上移一行 l 方向右键. 右移一个字符 $ 移至行尾 0 移至行

Android富文本编辑器RichEditor的使用

以前有个项目做一个笔记本类似的东西,觉得写的不太好,最近重新写,就发现了这个富文本编辑器他的效果是这样的 感觉有点厉害啊 废话不多说开始撸码 1先添加依赖 dependencies { compile 'jp.wasabeef:richeditor-android:1.2.0' } 2写布局 <jp.wasabeef.richeditor.RichEditor android:id="@+id/editor" android:layout_width="match_pa

商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改

UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: 1 create table TEST.GOODS_TABLE 2 ( 3 gid NUMBER not null, 4 gname VARCHAR2(90), 5 gdetails CLOB, 6 gpicture VARCHAR2(100), 7 gprice NUMBER, 8 gleixing NUMBER, 9 gpi

微信公众平台二 文本编辑器与表单工具

一.排版 微信公众号,尤其是订阅号是一个自媒体平台,所以发布的内容经过精心的排版是很重要的.然而微信自带的文本编辑器,能够提供的效果有限(虽然能够支持很多种效果,但没有可视化的模板).我选择了一款第三方微信文本编辑器——秀米.网址为xiumi.us.注册登录后,图文排版—>添加新的图文,进入到如下界面: 其中,系统模板功能十分好用,只需要把合适的组件拖入右侧的编辑区,放在合适的位置上,然后在模板内进行编辑,因为组件多样化,所以排版更加灵活易定制.多试试吧!相信你很快就能熟练,下面展示我编辑的一篇