简单了解下UEditor的使用

简介: 简单了解下UEditor的使用

目前网上的富文本编辑器多的可以说是数不胜数,但是百度的UEditor可以算是其中的佼佼者,今天就简单的了解一下这款富文本编辑器。

下载:点击打开链接

其实几乎所有的富文本编辑器都是一样的模子,下载的时候分为好几个版本的,您可以根据需要自己下载对应的版本,其中有一个源码的版本是集成了所有的版本,相对的文件比较大一些,如图所示:

下载好了解压以后是这样的:

想要看效果很简单,创建一个demo.html,代码是这样的:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/_css/ueditor.css"/>
</head>
<style>
    div{width:80rem; height: 30rem;}
</style>
<body>
<div>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
    </script>
</div>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

PS:下载的源码版的里面是没有ueditor.all.js的文件的,您可以自己下载一个去网上,也可以直接下载PHP版本的,里面带的是有的,最后的效果是这样的:

如果您的效果迟迟调不出来的话,有以下几个可能:

第一:打开F12调试工具,看一下console里面的提示,如果提示丢失文件,就找对应的文件就行了。

第二:引用的css路径不正确,导致没有样式。

这里是可以看到的。

最后没有什么问题的时候,基本就可以了,可以直接应用到H5页面上,一个完美的富文本编辑器就可以使用了。想更多交流的可以加微信。

相关文章
UEditor使用总结(与SpringMVC整合)
最近再弄富文本框,选择了UEditor,原因是:界面漂亮,百度开源的
113 0
|
Java 应用服务中间件 API
富文本编辑器Ueditor实战(一)
本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。
395 0
富文本编辑器Ueditor实战(一)
【Ueditor】Ueditor嵌入php碰到的几个问题
【Ueditor】Ueditor嵌入php碰到的几个问题
104 0
|
JavaScript 前端开发
ueditor代码高亮实现方法
实现的方法也很简单 1:页面引用以下资源文件(均位于ueditor目录中) <script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"> 2:增加如下js脚本使高亮生效: SyntaxHighlighter.all();
187 0
ueditor代码高亮实现方法
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
1、UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级:代码精简,加载迅速。
5247 0
|
JavaScript 前端开发 Java
百度编辑器 UEditor setContent()
给编辑器赋值的代码: var ue = UE.getEditor('content'); ue.ready(function (){      ue.setContent(data.data.content); });   当我第二次去打开编辑器的时候,编辑器里就有数据了。
1174 0