温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

UEditor编辑器使用方法及文件下载

发布时间:2020-07-13 15:36:38 来源:网络 阅读:1217 作者:wjy_203 栏目:web开发

一、请根据需要到官方网站下载(http://ueditor.baidu.com/build/build_down.php?t=1_2_5_1-utf8-php)(这是PHP服务器端的下载包)。

二、UEditor相关操作

   1、在根目录下新建文件夹存放相关资源文件,此名为editor.

   2、把下载的源码包里的相关文件拷贝到editor文件中。

   3、在使用编辑器的html页面导入以下js文件

   <script type="text/javascript" charset="utf-8" src="editor_config.js"></script>

   <script type="text/javascript" charset="utf-8" src="editor_all.js"></script>

   <script type="text/javascript" src="third-party/SyntaxHighlighter/shcore.js">

   </script> <link rel="stylesheet" href="third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />

   4、在html页面创建编辑容器并实例化编辑器,代码如下:

         <textarea id="editor"></textarea>

           <scripttype="text/javascript">

               //实例化编辑器

              var ue = UE.getEditor('editor');

         </script>

   5、在editor_config.js中查找URL变量,配置编辑器在你项目中的路径。如果不是放在项目当中使用,URL变量可以不用修改。但是在项目当中使用就一定得修改。

       URL= UEDITOR_HOME_URL || "编辑器在你项目中的路径";//重要,必须正确配置


三、自定义配置

   1、编辑器工具栏只显示源代码,并且初始化的时候进入源码模式。

    在editor_config.js中查找 ,sourceEditorFirst:true;把前面的注释去掉,在html当中写入的代码如下

       <script type="text/javascript">

       //工具栏的功能

        var editor = new baidu.editor.ui.Editor({

              toolbars:[['source']]  //自定义工具栏显示的按钮

       

        });

       editor.render("editor");

       </script>

   

   2、让编辑器宽自适应

     在editor_config.js中查找

       ,initialFrameWidth:"100%"  //把数值改成百分比

       ,scaleEnabled:true

       ,minFrameWidth:800    //编辑器拖动时最小宽度,默认800

       ,minFrameHeight:320  //编辑器拖动时最小高度,默认320

把前面的注释去掉就可以了。

    以上的内容是我在项目当中遇到的问题。在网上搜索都没有找到满意的答案。自己慢慢研究后做一下总结,方便其他需要用到的朋友使用。

四.更多详细使用帮助请查看官方解释

在线文档:http://ueditor.baidu.com/website/document.html

UEditor论坛:http://www.ueditorbbs.com/forum.php



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI