zoukankan      html  css  js  c++  java
  • thinkphp中的Ueditor的使用, 以及如何传递编辑器内容到后台?

    在线编辑器有很多很多, 而且大多是开源的.

    uediotr基于mit协议, 开源, 可以用于商业和非商业的 任意使用和修改都可以

    如果两个相连接的 相邻的 元素之间 因为边框重叠 而显得中间的边框线很粗了, 那么可以设置 其中的一个元素的 某一边的 边框线为none. 其他的地方可以使用 类似 的操作 思想;

    line-heigh的作用?
    对于 一个 行级 元素 中的文本的排版布局, 默认的排版方式是: 从左到右, 从上到下,所以 当 行级元素所在的块 height 较大时, 文本就会位于块的 上方而不是在 垂直方向上的 中间了. 另一方面, 如果行级元素 指定了行高 line-height, 此时, 文本总是排在 行级元素的中间, 因此, 如果行级元素的行高 跟 块的 高度相同时, 则文本正好 位于 块的垂直 居中了!

    要指定元素的文字 内容在 居中, 而想把元素的尺寸 放大, 除了可以 设置元素的 padding和margin外, 还可以指定元素的 尺寸 height/width等....
    指定元素的padding和尺寸width的区别


    通常外部呈现的名称, 是用开始的几个首字母大写的方式来表示, 比如NERDTree, UEditor. 而在程序代码中,则通常使用小写字母表示。

    <style>...</style>通常只能放在head中, 而script段可以放在任意地方,如head和body都可以。

    在初次部署的时候, 需要引入外部的三个js文件(实际上只需要两个js文件,第一个js是用来设置初始化的时候, 显示的文字内容.), 最后的一段 js代码则是我们自己写的 “实例化编辑器”了。


    使用ueditor的初始化体验:

    1. 要采用script标签作为编辑器容器对象(而不是textarea),并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。可以设置 这个 "script容器" 的style样式, 如宽度和高度, 它的id可以是任意的, 自己指定...
    2. 通常这个在线编辑器 是要放在 其他容器中的, 如div容器, form表单容器 等...
    3. 路径问题, 在thinkphp中, 要是用ueditor, 同样要使用__PUBLIC__/ue/的路径.

    ueditor等在线编辑器的原理:

    1. 主要包含css,和js. 以及一些资源如 dialogs的资源, 用来显示对话框中所需要的 如 input框, 复选框, 按钮等
    2. 分成上下两个部分, 上面的部分,先用css将各种按钮, 图标等通过float等进行排列, 显示出在线编辑器的界面, 下面的部分实际上也是一个textarea.
    3. 单击或者 悬停在 编辑器的按钮上时, 一方面通过改变按钮的css样式外观, 如变色加边框等. 另一方面, 绑定 click事件, 在on('click', function(){...})函数中, 首先获得被选择的文字内容, 然后 对对象设置 css方法, 添加/去除特定的类来改变样式, 如通过jquery的样式方法 css('color', 'some_color')来实现文字颜色的变化, 而 css('fontWeight','bold'), 则实现单击"加粗"按钮时, 使文字样式加粗的效果.
    4. 因此, 核心还是 css样式和其中的js文件,如 ueditor.all.js
    5. 样式是由编辑器自动调用的, 你不必去显式的, 自己去写css包含的link, 样式文件在 ue/themes/default+iframe(这个是写自己的css样式)/images+css/ueditor.css+ueditor.min.css.
    6. third-party是第三方的js插件, 比如文件上传, 视频, 音乐加入等js插件
    7. ue/php目录, 是用来做后台的, 跟后台php做交互的
      ueditor的目录结构是:

    在开发的时候, 可以把一些不必要的文件删除, 如ue/index.html,这个是一个demo文件, 还有ueditor.all.js, 只需要保留一个 ueditor.all.min.js文件就好了. 不过这些文件全部保留在 Public的ue目录也无所谓, 因为这些文件如果客户端不请求, 它是不会被下载的, 只是占用服务器的硬盘...

    thinkphp根目录下的Public文件夹和Application下的Public文件夹的区别
    注意:应用的目录只能是首字母大写后面全部小写,使用“WorkOvertime”结果就出现无法加载控制器的情况!改为“Workovertime”之后,还需要关闭之前的窗口,重新打开一个浏览器窗口访问才能正常!比如将模块Home的名字改为 HOME, 则会报错:

    1. www/根目录下的结构就是, Application + Thinkphp + Public(还有就是入口文件和.htaccess文件等) 注意这个Public 就是 系统编程中, 常说的 PUBLIC '常量'. 为什么要把Css Js Images等目录内容等放在这里呢? 目的是为了 便于多个应用 公用, 也就是说, 一个www下可以有多个 应用, 如: Application1-台式机PC网站, Application2-手机App网站, Application3-手机网站.
    2. 而Application下的Public文件夹, 主要是用来在 一个应用下的 多个 模块中间公用 资源文件, 如 Home/Admin等
    3. 实际上, 你可以任意的 创建设置 多个 Public文件夹, 如还可以在 模块Home的 View下创建 Public文件夹, 但是这个文件夹的位置就要自己去声明 配置, 方法是: 在你的Application/Common/Config/目录下, 或 Home/Config目录下设置: TMPL_PARSE_STRING =>array(); 设置模板 解析 字符串....
      **总之, Css , Js , Images, Avatar, Gallery等放在哪里, 完全是根据你的 项目的需要 来决定的 **

    表单中的各种控件理解

    1. 输入框组 = "输入框-组", 即本质上还是一个输入框, 只是在输入框的两边加上了文字或按钮, (不是单独的,跟input分离的文字或按钮), 而是形成了一个整体 这样的 输入框叫做 输入框组.

    2. 通常输入框 是和label一起放在一个 div.form-group中的. 而checkbox和radiobo则不同, 它是 放在一个div.checkbox中, 然后用label去 包含"input[type=checkbox]checkbox提示文字" 的.

    3.而提交按钮button[type=submit]就是一个单纯的 form中的按钮了.

    1. 提示注意 的是: 不要将 表单组和输入框组 混合使用, (即两者平级), 而是应该将 输入框组 放在 表单组中 被包含:
    <form>
      <div class="form-group">   //  这个是表单组
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    
          <div class="input-group">  // 这个是输入框组, 它是被嵌套 包含在 上面的表单组中的
             <span class="input-group-addon" id="basic-addon1">@</span>
             <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          </div>
    
      </div>
    
    </form>
    
    

    vim中dw和db的区别, 或者说,w和b的区别, dw是向后删除单词, 它是包含光标所在位置的字符要被删除的, 因为vim认为单词是向前的, 所以光标所在的字符是属于当前这个单词的; 而db是向后删除单词, 因为单词总是相前来看的, 所以, db时, vim认为当前光标所在的字符, 是不属于 向后面这个单词的, 所以db删除时, 是不会删除光标所在的字符, 因此, 要向后删除某个内容的时候, 应该多向后移动一个字符! 这个细节的东西, 要注意总结了.

    跟zz相类似 的3个操作: zz, zt, zb 参考这篇文章很好: http://www.cnblogs.com/jingzhishen/p/3790457.html
    zz 让光标所杂的行居屏幕中央
    zt 让光标所杂的行居屏幕最上一行 t=top
    zb 让光标所杂的行居屏幕最下一行 b=bottom

    删除更多的内容
    dtc, dfc, (dtc和dfc的区别: tc是不包括, 不删除字符c 的, 而fc 是直到的意思, 那么字符c是要被删除的! )
    d$ ===== D
    还可以有 d(, d), d{, d}等等更大范围的操作.
    同样的, 还有ctC就会删除到字符C, C字符不删除, 但是会切换到 输入状态, 而cfC则字符C本身也要被删除

    一个长期困扰的问题: dw和 dW 的区别? dw=delete word删除一个单词, 在英语中, 什么叫一个单词? 单词: word: 是指 连续的、只能由 (字母和数字) 组成的内容. 其他非字母或数字的符号, 如-、+-*/, =, 所有的括号等, 都不算连续的单词, 跟前后的单词是分隔的. 而大写的W , 则仅仅是指 由 "空格" 进行分割的字符串.


    thinkphp中 表示链接地址的时候, 有两种方法:

    1. 是用绝对地址, 如 href="absoAdd.html", 这种要指明 后缀html, 但是要注意的是, 这个地址是相对于网站的根路径, 即 ROOT, www/而言的;

    2. 是用U函数, 这个U函数指定方法是 :U(module @ controller / method) 解析后 实际上生成的是 method对应的 view视图中的 method.html

    3. 这种设计我感觉是很好的. 即解析成 method.html, 就不必 要求 这个方法是真实存在的, (当然如果需要向 模板文件传递 变量的时候, 方法函数 就是必须的了), 这个还是很实用的, 因为有时候, 我们就只想 跳转到一个 单纯的 html文件, 那么这时解析成 method.html 就很方便 而且合理了...


    ueditor以前的版本, 是用 下划线来连接 ueditor_config.js, 后来的版本, 如1.4.3, 则是用点号来代替_, 如: ueditor.config.js

    要修改Ue 的家目录地址: var URL = "http://localhost:1080/Public/Ue/"; 使用绝对地址


    因为, 在将 输入内容, 如 textarea中的数据, 插入数据库的时候, 如果数据内容中包含 引号, 如", ', 则 在构造 查询字符串的时候, 将会出错! 所以要对数据进行转义.

    slash: 本身就是 "反斜杠, 反斜线 " 的意思, addslashes和 stripslashes就是 在预定义字符(有四个 ', ", , null) 前面添加或移去 反斜线.
    而addslashes 和 quotemeta的区别是: 前者只对4中字符添加 反斜线, 而后者 对 几乎除了数字和字母之外的符号, 都添加反斜线.

    在php的配置中, 有两个magic_quotes_..., 他们的区别是什么?

    1. 两个都是 magic_quotes (注意是复数的 quotes...)
    2. magic_quotes_sybase, 只是对单引号, 进行转义, 添加反斜线;
    3. magic_quotes_gpc, ze是对 get, post cookie的 四种符号进行转义.
    4. 而且, 如果magic_quotes_sybase(参考sybase对特殊字符的转义, sybase就只是转义单引号?) 和 magic_quotes_gpc 都设置为on的时候, 前者会override 后者, 因此, 就只有single quotes会被转义!
    
    注释:默认地,PHP 对所有的 GET、POST 和 COOKIE 数据自动运行 addslashes()。所以您不应对已转义过的字符串使用 addslashes(),因为这样会导致双层转义。遇到这种情况时可以使用函数 get_magic_quotes_gpc() 进行检测
    
    If the directive magic_quotes_sybase is ON it will completely override magic_quotes_gpc. So even when get_magic_quotes_gpc() returns TRUE neither double quotes, backslashes or NUL's will be escaped. Only single quotes will be escaped. In this case they'll look like: ''
    

    总结如下:参考: http://www.cnblogs.com/snake-hand/p/3212520.html

    1. 对于magic_quotes_gpc=on的情况,

    我们可以不对输入和输出数据库的字符串数据作addslashes()和stripslashes()的操作,数据也会正常显示。

    如果此时你对输入的数据作了addslashes()处理,
    那么在输出的时候就必须使用stripslashes()去掉多余的反斜杠。

    1. 对于magic_quotes_gpc=off 的情况

    必须使用addslashes()对输入数据进行处理,但并不需要使用stripslashes()格式化输出
    因为addslashes()并未将反斜杠一起写入数据库,只是帮助mysql完成了sql语句的执行。


    phpformat在线格式化工具:http://tools.jb51.net/code/phpformat, 有vim的对应插件吗?

    thinkphp后台控制器的方法函数中, 获取 ueditor的 编辑器内容? 参考: http://www.codesec.net/view/428980.html


    使用ueditor成功部分的总结

    1. 加载ueditor, 跟其他的js框架/插件一样, 导入 ueditor.config.js和 ueditor.all.min.js 时, 也用不着 在生成 ueditor 编辑框的地方导入, 可以在 head部分导入这些 js文件. 在 form表单中, 生成编辑框的地方, 只是包含 script type="text/plain"的代码, 而不要把script自己写的代码放在form中, 跟其他js代码一样, 自己写的js代码部分, 要放在 script脚本中.

    2. 虽然在 ueditor.config.js中, 默认的textarea: editorValue, 但是其实你也可以自己定义textarea:'myconten'等其他名称 选项. 但是其实是没有必要的! ueditor的默认值, 确实就是默认值, 已经设置了的, 你不必再设置, 就可以使用生效的了!!

    3. 最最重要的一点, 应该是 ,要分清楚, form表单中控件的 id和 name的区别: id是供js前端使用的.而name才是供后端 $_POST 使用的. 如果不指定name, 在后端post是得不到控件的传值的, 得到的结果是null.

    4. 还有必须注意的一点是: $_POST, $_GET, $_SERVER/SESSION/COOKIE等 他们是 "系统变量的" 数组! 既然是数组, 就应该用 [] 中括号去获取传值, 而不是用 小括号 () 去获取传值. 这个曾经花了我较多时间才注意到, 而且会提示"function name must be a string "的fatal error!

    5. 要注意的是, 在后台获取控件的值, 需要的是textarea的控件的名称, 而不是 表单form的名称, 也就是说, 表单form的name属性是没有意义的. 这里的textarea就是编辑器的name, 后台$_POST获取编辑器的内容, 也是要的 textarea(script)的name, 不是form的name!

    6. 获取 $_POST 的值, 在thinkphp中,也可以使用 I 方法, I方法更安全! 因为默认的使用了 htmlsepecialchars函数过滤, 对 引号, 尖括号等进行了转义, 变成了 &lt; &gt; &quote; 等html实体,因此, 就 向 <p>abc<span style="color:red"> xyz </span></p> 就真的 只是字符串了! 而不再具有 html/或者js的含义了...这样也就安全了 , 不会作为代码去执行js了

    php的函数方法中, 要生成 utf-8编码, 使用语句: header('Content-type:text/html; charset=utf-8');


    mysql中的时间函数?

    1. 凡是php的编程语言中, 要插入数据到mysql数据库中时, 那么语句中的 表示值的函数 都要用 mysql的 函数. 因为这些函数, 是要到 mysql数据库中去生效 使用的, 并不是在 php程序中去执行!

    2. 表示时间的函数 类型有:
       date类型, 当前日期的函数有: curdate(); 完整的写法方式是: current_date(), 或者 current_date;
      time类型, curtime, 或者 current_time(), curent_time
      datetime类型, 格式是: YYYY-MM-DD HH:MM:SS
      timestamp类型, 格式也是跟datetime格式相同, 但是他是从1970 0时0分开始的, 它是占4个字节, 而datetime占8个字节; 表示当前timestamp的函数有: now(), current_timestamp(), 或者 current_timestamp三个是一样的

    一般使用timestamp日期类型, 因为这种类型的字段, 在insert和update的时候, mysql会自动的赋值为 current_timestamp(), 或者now().

    ???? 字段名msgTime竟然自动改名为msgtime, 难道全部都用小写?

    timestamp 返回的是字符串????性质的!???

  • 相关阅读:
    触发器
    自定义变量
    系统变量
    Interval 计时器
    Ajax 之 DWR
    cssTest
    Ajax之XMLHttpRequst对象
    添加页面元素
    jquery 基础
    jQuery 自定义动画效果
  • 原文地址:https://www.cnblogs.com/bkylee/p/6474746.html
Copyright © 2011-2022 走看看