百度 UEditor 简单安装调试和调用,网上其它的教程太官方了,不适合新手

时间:2023-02-22 21:07:42

对于新手来说,只要能实现功能即可,其它设置完全默认。

预览图:

百度 UEditor 简单安装调试和调用,网上其它的教程太官方了,不适合新手

1.首先 到官网下载,这个不多说。下载后解压到网站你想要的目录,我这里放到根目录下在你需要使用编辑器的地方,插入如下HTML代码:

<!-- 加载编辑器的容器 -->
<!-- 以下脚本中增加文本为初始化内容 -->
<script id="container" name="sb_remarks" type="text/plain" style="width:600px;height:200px;">
<p>
<strong><span style="font-size: 14px;">备注:</span></strong>
</p>
<p>
<br/>
</p>
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>

2.调用传值

只需在php文件中,加入一句

$sb_remarks=$_POST['sb_remarks'];

================================

下面是我的完整事例代码:

index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>设备档案</title>
</head>
<body>
<form method="post" action="s.php" name="search" />
<input name="search" type="text" value="" size="15" />
<input type="submit" value="Search" />
</form>
<br/>
<hr/>
添加设备
<div>
<form action="sb_add.php" method="post">
设备名称:<input type="text" name="sb_name" /><br/>
编码型号:<input type="text" name="sb_numandtype" /><br/>
生产厂家:<input type="text" name="sb_home" /><br/>
启用日期:<input type="text" name="sb_usedate" /><br/>
安装位置:<input type="text" name="sb_address" /><br/>
<!--更新日期:<input type="text" name="sb_updatetime" /><br/>-->
<!--
<input type="text" name="sb_remarks" />
-->
<!-- 加载编辑器的容器 -->
<!-- 以下脚本中增加文本为初始化内容 -->
<script id="container" name="sb_remarks" type="text/plain" style="width:600px;height:200px;">
<p>
<strong><span style="font-size: 14px;">备注:</span></strong>
</p>
<p>
<br/>
</p>
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
<br/>
<br/>
<input type="submit" value="添加" />
</form>
</div>
</body>
</html>

sb_add.php

<?php
$con = mysql_connect("localhost","root","110");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_query("set names 'utf8'",$con);
mysql_select_db("bzec", $con); $sb_name=$_POST['sb_name'];
$sb_numandtype=$_POST['sb_numandtype'];
$sb_home=$_POST['sb_home'];
$sb_usedate=$_POST['sb_usedate'];
$sb_address=$_POST['sb_address'];
//$sb_updatetime=$_POST['sb_updatetime'];
$sb_updatetime=date("Y-m-d G:i:s");
$sb_remarks=$_POST['sb_remarks']; //$nikename= trim($nikename); /*
if (!$nikename || !$email) //判断是否为空
{
echo '不能为空';
exit;
}
*/ $sql="INSERT INTO shebeidangan (sb_name,sb_numandtype,sb_home,sb_usedate,sb_address,sb_updatetime,sb_remarks)
VALUES
('$sb_name','$sb_numandtype','$sb_home','$sb_usedate','$sb_address','$sb_updatetime','$sb_remarks')"; if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "ADD OK"; mysql_close($con)
?>

3.如果要修改 编辑器默认字体大小的话,在编辑器UEditor目录,ueditor.all.js文件里面查找“字体” ,就可以找到修改字号和字体的地方

百度 UEditor 简单安装调试和调用,网上其它的教程太官方了,不适合新手的更多相关文章

  1. 富文本编辑器——百度UEditor插件安装教程

    一.使用环境 Win7 Eclipse jettty9 chrome 二.下载百度UEditor插件 1.下载地址:http://ueditor.baidu.com/website/download. ...

  2. DEDECMS:安装百度UEDITOR编辑器

    第一步:下载相对应编辑器的版本 首先,去百度搜索"百度ueditor编辑器",然后点击进入官网,找到下载页面.找到我们想要的编辑器的版本,看自己网站的编码是UTF-8还是GBK,下 ...

  3. 百度UEditor编辑器使用教程与使用方法

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...

  4. 百度ueditor上传图片时如何设置默认宽高度

    百度ueditor上传图片时如何设置默认宽高度 一.总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全 ...

  5. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  6. 百度UEditor编辑器从word粘贴公式

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  7. 百度ueditor中复制word图文时图片转存任然保持灰色不可用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  8. 百度ueditor实现word图片自动转存

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  9. 百度ueditor 实例化 Cannot set property &&num;39&semi;innerHTML&&num;39&semi; of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

随机推荐

  1. fs event&lowbar;socket

    mod_event_socket     Skip to end of metadata   Created by John Boteler, last modified by Niek Vlesse ...

  2. php heredoc 与 nowdoc

    php heredoc 与 nowdoc heredoc 结构 heredoc 句法结构:<<<.在该运算符之后要提供一个标识符,然后换行.接下来是字符串本身,最后要用前面定义的标识 ...

  3. 深入理解计算机系统第二版习题解答CSAPP 2&period;10

    对于任一位向量a,有a ^ a = 0.考虑下面的程序: void inplace_swap(int *x, int *y) { *y = *x ^ *y; *x = *x ^ *y; *y = *x ...

  4. Linux:闪光的宝石,智慧(下一个)

    2005年4月7日.Linus Torvalds公布了一款新型通用工具软件包,叫做"Git"(the Git source code management system).&quo ...

  5. Jenkins&plus;Git配置

    Jenkins+Git配置 一.GitHub上配置 前提:Jenkins能正常打开 将本地文件上传到GitHub上:进入终端 cd Documents cd project git clone htt ...

  6. blog4go&period;go

    package blog4go import ( "bufio" "errors" "fmt" "io" "o ...

  7. LoadRunner基本简介

    # LoadRunner  # ## 安装要求 ##     做性能测试的时候,电脑要是一个干净的系统.     尽量是裸装电脑纯净版,不能安装太多的浏览器,支持的有IE.Firefox.chrome ...

  8. 【转载】中文输入法下onKeyPress不能触发的问题

    onKeypress---->oninput https://segmentfault.com/a/1190000008820968

  9. Python&lowbar;冒泡排序

    从小到大的排序:(最前面的数和一步步和后面的数比较,如果大于则交换,如果不大于则继续循环) 方法1: data = [65, 1, 45, 77, 3, 9, 43, 23, 7, 53, 213, ...

  10. sharepoint环境安装过程中几点需要注意的地方

    写在前面 上篇文章也说明了,在安装sharepoint环境的时候,确实吃了不少苦头,这里纪录一下安装过程中遇到的几个问题. 安装环境 windows server 2012 r2 standard x ...