Ueditor | 易学教程

React中如何优雅的使用UEditor

阅读更多关于 React中如何优雅的使用UEditor

本文转载于: 猿2048 网站⇒ https://www.mk2048.com/blog/blog.php?id=h2ij1jc2ab 前言本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入ueditor，会存在各种不正交的问题，需要注意。引入首先在ueditor官网下载最新安装包，然后在项目入口的html中导入（导入方式不一，可以采用import的方式，需要自行度娘。但是无论哪种引入方式，只要想自定义功能，不正交问题就难以避免QAQ）。不管三七二十一先跑起来再说。。 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body>  <script type="text/javascript" src="path/ueditor.config.js"></script>  <script type="text/javascript" src="path/ueditor.all.js"></script> ······ </body> <

laravel-admin 富文本编辑器-百度编辑器的配置

阅读更多关于 laravel-admin 富文本编辑器-百度编辑器的配置

第一步：下载百度编辑器到本地： http://ueditor.baidu.com/website/ 第二步：将下载文件放到文件public/vendor下（可以重命名名）第三步：在app\Admin\Extensions 文件下新建文件ueditor.php namespace App\Admin\Extensions; use Encore\Admin\Form\Field; class Ueditor extends Field { protected static $css = [ ]; public static $isJs=false; protected static $js = [ /*ueditor1433文件夹为第二步中自定义的文件夹*/ 'vendor/ueditor1433/ueditor.config.js', 'vendor/ueditor1433/ueditor.all.js', ]; protected $view = 'admin.Ueditor'; public function render() { $this->script = <<<EOT UE.delEditor('{$this->id}'); var ue = UE.getEditor('{$this->id}'); EOT; return parent::render(); } }

Django后台管理

阅读更多关于 Django后台管理

Ŀ¼ 杀手级功能: 在新建项目时候已经自动生成! 1、创建超级用户: python manage.py createsuperuser 2、登录admin系统； 3、配置文件修改： LANGUAGE_CODE = 'zh-hans' // 修改后台界面语言为汉字 TIME_ZONE = 'Asia/Shanghai' // 时区设置 USE_TZ = False // 4、注册表: 进入app下的 admin.py 文件： from .models import UserProfile class UserProfileAdmin(admin.ModelAdmin): pass admin.site.register(UserProfile, UserProfileAdmin) 5、刷新admin页面即可继承自admin. 1、安装xadmin模块, 同时也会安装相关依赖包: pip install xadmin , 若安装出现错误，很正常！，见安装xadmin； 2、在 setting.py 将 xadmin 和 crispy_forms 放进 INSTALLED_APPS 中; 3、同步xadmin自带的表: python manage.py migrate 4、修改 url.py import xadmin urlpatterns = [ url(r'^xadmin/',

是时候掌握一个富文本编辑器了――TinyMCE（1）

阅读更多关于是时候掌握一个富文本编辑器了――TinyMCE（1）

百度ueditor以前一直用，转到node后，发现ueditor不支持node环境。倒是有个react-ueditor的组件可以帮助ueditor应用到react中，但是…… 从云开始 https://www.tinymce.com/download/language-packages/ https://cloud.tinymce.com/versions/tiny https://www.tinymce.com/docs/changelog/ 。有时候，它可以给你一些指引。从本地开始第一个应用 <scriptsrc='https://cloud.tinymce.com/stable/tinymce.min.js'></script> 最基础的应用 toolbar: [ https://www.tinymce.com/docs/configure/ 。或者在这里了解更多可用的插件： https://www.tinymce.com/docs/plugins/ 。当然，后续我们也会提到这些内容。内联编辑高级使用方式 bower install tinymce-src=git://github.com/tinymce/tinymce https://www.tinymce.com/download/ https://www.tinymce.com/download/custom

Angular之编辑器插件

阅读更多关于 Angular之编辑器插件

第一步，导入： <script src="ngUeditor.js"></script> 第二步，引入Js文件 app.directive('ngUeditor', function () { return { restrict: 'AE', transclude: true, replace: true, template: '<script name="content" type="text/plain" ng-transclude @style></script>', require: '?ngModel', scope: { config: '=', style:'@' }, link: function (scope, element, attrs, ngModel) { var editor = new UE.ui.Editor(scope.config || {}); var _editorId = attrs.id ? attrs.id : "_editor" + (Date.now()); element[0].id = _editorId; editor.render(element[0]); editor.ready(function() { //图片上传回调 editor.addListener('beforeInsertImage', function

基于UEditor编辑器二次开发

阅读更多关于基于UEditor编辑器二次开发

需求： 1、在原有ueditor编辑器的音频上添加标题； 2、在原有ueditor编辑器的视频上添加上传封面图片(ps:就不能后台获取吗。。一定要前端做)；准备资料：(心路历程...) 头儿说：我们的原则是，不能改变他本身的ueditor.all.min.js 或者ueditor.all.js.........不能改变！不能改变！不能改变！ 1、我们的后台是.net环境，首先，我去下载了UE的完整包，在这个目录下可以看到他的完整的插件管理代码：这里的插件代码可以对照着ueditor.all.js里面看，就能大致明白添加插件的流程（如果可以改核心的这个文件，就方便多了.....）； 2、http://fex.baidu.com/ueditor/#dev-developer 这个是官方的二次开发文档； 3、http://www.dookay.com/n/12290 这个是网上提供的二次开发的例子；开始： 1、在原有的引入ueditor的下面加上如下代码， <script type = "text/plain" id = "myEditor" > </script> <script src = "/js/UE/addTool.js" ></script> /*这个页面中放新增的按钮*/ 2、addTool.js中的内容如下： UE . registerUI ( 'lspace

百度富文本编辑器 UEditor 1.4.3 getContent会报错：Uncaught TypeError

阅读更多关于百度富文本编辑器 UEditor 1.4.3 getContent会报错：Uncaught TypeError

使用UEditor的setContent的时候报错，报错代码如下 Uncaught TypeError: Cannot set property 'innerHTML' of undefined 错： http://blog.csdn.net/u011117571/article/details/45167039 原因是没有等UEditor创建完成就使用UEditor的setContent函数了，可以通过如下代码解决：方法一： [javascript] view plain copy var 'editor' ue.addListener( "ready" function 方法二： [javascript] view plain copy var 'editor' ue.ready( function 文章来源: 百度富文本编辑器 UEditor 1.4.3 getContent会报错：Uncaught TypeError

富文本编辑器

阅读更多关于富文本编辑器

1. https://github.com/twz915/DjangoUeditor3 下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的settings文件,注册app 3.找到项目urls文件,配置DjangoUeditor路由 4.找到app下的models,在需要使用富文本框的字段使用UEditorField,相关参数含义可参考文档: https://github.com/zhangfisher/DjangoUeditor from import content=UEditorField(verbose_name= '博客内容' 700 400 'full' 'ueditor/images/' 'ueditor/files/' 'imageMaxSizing' : 1024000 '' 5.xadmin中添加插件ueditor 由于已经将xadmin源文件拷贝到了项目下，为extra_apps/xadmin，在xadmin下的plugin中新建一个ueditor.py文件,添加以下代码: import from import from import from import from import class def self self self None self class def self if 'ueditor'

解决ueditor二次加载(getEditor)加载失败的问题

阅读更多关于解决ueditor二次加载(getEditor)加载失败的问题

　　最近在做项目的时候用到了ueditor控件，正常使用第一次加载没有问题，因为没有刷新页面，第二次加载的时候就会加载失败，ueditor部分出现空白，查看了一下功能基本可以定位到是getEditor时出现了问题，具体怎么解决直到我发现了下面的这篇博文，具体内容如下：大家自己看看官方的js文件ueditor.all.js有以下的代码 /** * @name getEditor * @since 1.2.4+ * @grammar UE.getEditor(id,[opt]) => Editor实例 * @desc 提供一个全局的方法得到编辑器实例 * * * ''id'' 放置编辑器的容器id, 如果容器下的编辑器已经存在，就直接返回 * * ''opt'' 编辑器的可选参数 * @example * UE.getEditor('containerId',{onready:function(){//创建一个编辑器实例 * this.setContent('hello') * }}); * UE.getEditor('containerId'); //返回刚创建的实例 * */ UE . getEditor = function ( id , opt ) { var editor = instances [ id ]; if (! editor ) { editor =

Html引入百度富文本编辑器ueditor

阅读更多关于 Html引入百度富文本编辑器ueditor

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面ueditor编辑器,这里不多说,可以参考之前的一篇博客: Html引入百度富文本编辑器ueditor ,这里默认你已经实现了ueditor的引入如下图: 1.此时你上传的图片都是保存在本地的,如果想要跨域传到其它服务器，需要在ueditor/php/config.json配置文件中的图片配置项 imageUrlPrefix 加上域名,这样你在上传完图片之后返回给你的就是全路径的图片, 在任何地方都可以显示,我这里以客户端a.com通过编辑器上传图片到img.com上,所以 imageUrlPrefix 配置为http://img,com: 方法,此方法就是demo中上传文件的主处理方法,修改这个上传方法比做什么代理页面、加js什么的更简单也更好理解,就算多个页面引入也没得问题: private

订阅 Ueditor