首页 > 软件下载 > 平面设计

百度编辑器使用方法

2022-06-23

资源介绍

 一、下载UEditor编辑器

  百度编辑器UEditor PHP版 

  百度编辑器UEditor .NET版 

  百度编辑器UEditor JSP版 

  也可在UEditor官方网站:http://ueditor.baidu.com/下载频道下载到最新版本的UEditor

  UEditor官方的下载方式分为两种,完整下载与定制下载,完整下载提供UTF-8与GBK两种编码的版本,定制下载目前只有UTF-8编码,推荐使用定制下载,按需求定制,如果程序不是UTF-8编码,可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码,记得同时修改HTML文件中的charset=utf-8。

  二、精简UEditor编辑器

  完整版的相关文档与示例页面较多,可以自行研究一下,下面为定制版中可以精简的文件。

  index.html是所定制的UEditor编辑器的示例文件,删除之。

  editor.js与editor.min.js内容相同,editor.min.js是editor.js的压缩版,使用时加载editor.min.js即可,所以editor.js也可以删除。

  三、将UEditor部署到PHP程序上

  1.将UEditor的所有文件放在PHP程序的目录中,这里我把文件放在/ueditor目录下。

  2.在网页中引入UEditor文件

  <script type="text/javascript" src="ueditor/editor_config.js"></script> <script type="text/javascript" src="ueditor/editor.min.js"></script>

3.在textarea标签下初始化UEditor

  <script type="text/javascript"> var editor = new UE.ui.Editor(); textarea:'name'; //与textarea的name值保持一致 editor.render('name'); </script>

  四、配置UEditor编辑器

  editor_config.js是UEditor的配置文件,首先对路径进行配置。

  修改第27行左右的路径配置(根据版本不同可能会有变动)

  URL = "ueditor/"; //根据实际情况配置

  保存,OK搞定,UEditor编辑器就能使用了,此时同样可以使用POST或者GET接收到提交的数据。

  editor_config.js里还有很多常用的配置项目,比如编辑器初始内容、编辑器高度等等,需要配置时只需去掉该行代码前面的注释符号//即可。

  使用定制版的童鞋可以下载一个完整版,里面的配置文件比较完整,有些东西可以COPY过来。

  五、UEditor代码高亮

  UEditor代码高亮使用了第三方的高亮JS组件 – SyntaxHighlighter,在测试的过程中问题不少,使用UEditor编辑器“插入代码”功能插入代码并提交到数据库后,在显示页面代码是不会高亮显示的,需要在该页面加载一下JS和CSS文件。

  <script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />

  <script> SyntaxHighlighter.all() //执行代码高亮 </script>

  还有一个问题,当再次使用UEditor编辑之前提交到数据库的代码时,编辑器会自动过滤掉代码中的很多标签,今天在微博上@了一下UEditor团队,UEditor团队的人说需要先转义。

  我在提交至数据库之前用PHP的htmlspecialchars函数进行转义:

$content = htmlspecialchars($_POST[codeContent]);

  输出页面执行htmlspecialchars_decode函数后输出:

  echo htmlspecialchars_decode($Row["content"]);

  再查看了官方的文档,官方推荐把textarea容器更换为script容器

  <script type="text/plain" id="content" name="content"> //从数据库中取出的内容打印到此处 </script>

  此处采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了使用传统的textarea标签作为容器所带来的一次额外转码问题,我同时使用了转义和更换textarea容器的方式。

  简单测试了HTML、PHP、JAVASCRIPT和C++代码,暂时没发现问题。

展开全部

版权声明

1 本站所有资源(含游戏)均是软件作者、开发商投稿,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!

2 本站资源下载后不得用于商业用途,所有资源请在下载后24小时内删除。

3 若有关在线投稿、无法下载等问题,请与本站客服人员联系。

4 如侵犯了您的版权、商标等,请立刻联系我们并具体说明情况后,本站将尽快处理删除,联系QQ:2499894784

最近更新

热门排行

最需网客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端