如何使用免费开源百度UEditor

UEditor渲染一、简介UEditor是一个开源的免费编辑器。它是百度网页前端研发部门开发的一款所见即所得的富文本网页编辑器。它轻量级，可定制，注重用户体验。开源基于BSD协议，允许自由使用和修改代码。官方网站：http://ueditor.baidu.com/二世。下载地址官方下载：从http://ueditor.baidu.com/website/download.html,官网下载完整的源代码包，解压到任意目录。提取的源目录结构如下：_examples:编辑器对话框完整版示例页：弹出对话框主题对应的资源和JS文件：样式图片和样式文件php/jsp/。net:与服务器端操作相关的后台文件，根据您选择的不同后台版本会有所不同。这里应该是jsp，php，net第三方：第三方插件的目录编辑器_ all.js: _ src中所有文件的打包文件(包括代码高亮、源代码编辑等组件)editor _ all _ min . js:editor _ all . js文件的压缩版本。建议使用配置文件editor_config.js:只有在正式部署时才使用。建议放在与编辑器实例化页面相同的目录下，或者在线搜索其他人的配置。我自己做的，但是花了我很长时间，我几乎想放弃！我下载了开发版本[1.2.5.1。NET版本]2013年4月27日，最新版本。三.部署方法

代码结构图的第一步：创建一个目录，用于在项目的任何文件夹中存储与ueditor相关的资源和文件，该目录是在项目的根目录下创建的，名为UEditor。第二步：将源包中的对话框、主题、第三方、editor_all.js和editor_config.js复制到ueditor文件夹中。其中，除了ueditor目录之外的所有文件都是特定的项目文件，这里的列表只是举例。第三步：为了简单起见，根目录下的index.php页面将作为编辑器的实例化页面，展示UEditor的完整版本效果。在index.php文件中，首先导入编辑器需要的三个入口文件，示例代码如下：复制代码如下： metahttp-equiv=' content-type ' content=' text/html；Charset=UTF-8'title editor完整版示例/title script type=' text/JavaScript ' src=' http : u editor/editor _ config . js '/script script type=' text/JavaScript ' src=' http : u editor/editor _ all . js '/script步骤4:然后在index.php文件中创建一个编辑器实例及其DOM容器。具体代码示例如下：复制代码如下： textarea name=' Key for background value ' ID=' My Editor '在此处写入您的初始化内容/textareakscript Type=' Text/JavaScript ' VarEditor=new UE . ui . Editor()；editor . render(' myEditor ')；//1.2.4以后可以使用一次代码实例化编辑器。//ue.geteditor('我的编辑器')/脚本最后一步：在/uetest/ueEditor/editor _ config . js中查找URL变量配置编辑器，在项目中复制路径的代码如下：//strong烈建议这样配置绝对路径(注意：下面的UETest是虚拟目录的名称)URL=window . ueEditor _ home _ URL | | '/UETest/ueEditor/'；至此，一个完整的编辑器实例已经部署到我们的项目中！在浏览器中输入http://localhost/UETest，尝试UE的强大功能！4.注意事项1。引用editor_config.js时，最好在editor_all.js之前加载，否则在某些情况下可能会出错。2.如果您希望编辑器分配一个初始值，请参考_examples文件中的一些示例代码，或者阅读官方文档。3.请注意编辑器资源文件的根路径。意思是：以编辑器实例化页面为当前路径，指向编辑器资源文件(即对话框等文件夹)。鉴于很多学生使用编辑器时遇到的各种路径问题，强烈建议您使用“相对于网站根目录的相对路径”进行配置。“相对于网站根目录的相对路径”是以斜杠开头的“/uetest/ueeditor/”形状的路径。此外，如果使用相对路径，比如‘UEditor/’(相对于图1中的路径结构)，如果站点中有多个页面需要实例化不同级别的编辑器并引用同一个UEditor，则可能不适用于每个页面的编辑器。因此，UEditor为不同页面的编辑器提供了可独立配置的根路径。具体来说，在需要实例化编辑器的页面顶部编写以下代码。当然，您需要使这里的URL等于相应的配置。窗户。UEDITOR _ HOME _ URL='/xxxx/xxxx/'；例如，根据图1中的目录结构，如果使用index.aspx中的编辑器，editor_config.js中的顶部var URL将被更改为var URL='/UETest/ueditor/'。5.常见问题1。如果操作成功并且出现乱码，请检查您的编码方法。UEditor指的是带有编码和元标签的脚本。我下载了utf-8版本，运行时出现乱码。我从引用的脚本中删除了charset='utf-8 '，没有问题。2.上传图片出错。如果上传的图片有红十字，或者上传中途没有回应。下删除web.config。net folder (php语言对应php，而jsp语言对应JSP)，因为它使用的是的配置。net 4.0，但3.5及以下版本会有问题，所以删除不会有影响。

六、最后，附上我的代码复制代码代码如下：%@页面语言=' c# ' AutoEventWireup=' true ' CodeFile=' Test2。aspx。cs ' Inherits=' Test2 ' %！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title ueditor测试/title脚本src=' http : ueditor/editor _ config。js ' type=' text/JavaScript '/script script src=' http : ueditor/editor _ all。js ' type=' text/JavaScript '/script/head dy form ID=' form 1 ' runat=' server ' div ASP : textbox ID=' textbox 1 ' runat=' server ' Width=' 500 px ' Height=' 300 px '这里可以选择自己需要的工具按钮名称，此处仅选择如下五个工具栏：[['全屏','源',' | ','撤消','重做',' | ','粗体','斜体','下划线','删除线','上标','下标，' removeformat '，' formatmatch '，'自动类型集，' blockquote '，' pasteplain '，' | '，' forecolor '，' backcolor '，' insertorderedlist '，' insertunorderedlist '，' selectall '，' cleardoc ' | 、“rowspacingtop”、“rowspacingbottom”、“行高“|”、“customstyle”、“map”、“gmap”、“insertframe”、“highlightcode”、“webapp”、“pagebreak”、“template”、“horizontal”、“date”、“time”、“spechars”、“snapscreen”、“wordimage”、“' |”、“inserttable”、“deletetable”、“insertrow”、“insertcol”、“deletecol”、“mergecells”、“mergeright”、“mergedown”、“splittocols”、“splittocols”、“' |”、“print”时自动清空初始化时的内容autoclariinitialialcontents : rue，//关闭字数统计wordCount:false，//关闭elementPath已启用element path : false//更多其他参数，请参考编辑器_config.js中的配置项})/脚本/div/表单/正文/html