Ueditor富文本编辑器

Ueditor富文本编辑器插件应用步骤如下：

1.引入css和js文件

2.设置承载标签

设置富文本编辑器的承载标签，必须设置id属性。一般使用textarea或script标签，使用script标签时，必须设置type=”text/plain”

3.实例化富文本编辑器

getEditor的参数为承载标签的id值，可增加第二个参数进行自定义配置项

4.实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Ueditor富文本编辑器测试</title><link rel="stylesheet" type="text/css" href="themes/default/css/umeditor.css"><script type="text/javascript" src="third-party/jquery.min.js"></script><script type="text/javascript" src="umeditor.config.js"></script><script type="text/javascript" src="umeditor.min.js"></script><script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body><!-- 设置承载标签，一般使用两种标签（textarea、script，使用script标签时，必须设置type="text/plain"），必须要设置id属性 --><textarea id="content"></textarea><script type="text/javascript">
// 实例化富文本编辑器，getEditor第一个参数就是承载标签的id值var um = UM.getEditor('content',{//自定义配置项会覆盖配置文件中的配置项initialFrameWidth:600, //初始化编辑器宽度initialFrameHeight:300,  //初始化编辑器高度isShow : true,    //默认显示编辑器initialContent:'请编辑内容',//自定义工具栏toolbar:['source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |','insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify |','link unlink | emotion image video  | map','| horizontal print preview fullscreen', 'drafts', 'formula'],// 自定义字体大小fontsize:[10, 11, 12, 14, 16, 18, 20, 24, 36]
})
</script></body>
</html>

效果图：

代码及相关文件详见GitHub主页 富文本编辑器插件Ueditor

https://github.com/Jianxq12/ITcast/tree/master/Ajax

转载于:https://www.cnblogs.com/Jianxq12/p/7684306.html

Ueditor富文本编辑器相关推荐

  1. ueditor富文本编辑器过滤了代码，如何取消？

    后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...

  2. java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  3. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  4. java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器

    spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片 依赖库版本: spring boot ...

  5. php引入百度Ueditor富文本编辑器

    php引入百度Ueditor富文本编辑器 文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...

  6. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

  7. UEditor富文本编辑器不显示问题

    项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...

  8. QT QWebEngineView+UEditor富文本编辑器

    QT QWebEngineView+UEditor富文本编辑器 一.简述 记--简单使用QWebEngineView+UEditor富文本编辑器实现一个简单的编辑器,支持图片(支持右键粘贴,支持直接拖 ...

  9. UEditor 富文本编辑器-后端实现文件上传功能

    一.背景 前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能 本文根据文章:vue+Ueditor集成 [前后端分离项目][图片.文件上传][富文本编辑] ...

最新文章

  1. IE6 IE7 IE8(Q) 不支持 JSON 对象
  2. sort();对结构体数组的排序
  3. 电子计算机的应用是第四次信息技术革命,造纸术和印刷术的发明和应用第四次电报.PPT...
  4. 阿里云(腾讯云类似)服务器控制台配置开放所有的端口
  5. JavaScript判断office的版本
  6. 按键脚本c语言,按键精灵脚本代码大全 按键精灵命令使用方法
  7. [词汇] 十四、动词
  8. 信息安全-终端安全-Windows安全配置
  9. Gif动图如何自制？一招教你快速完成gif制作
  10. Arduino 入门学习笔记5 按键控制激光发生器
  11. 生信漫谈如何绘制蛋白序列的二级结构可视化图
  12. python计算英文字符数
  13. 瑞吉外卖——菜品展示功能（移动端）
  14. c语言存储图像jpg,用c语言如何读取和保存jpg图片文件?
  15. samba配置共享打印机
  16. 如何运行app和exe程序
  17. spacedesk如何将手机作为电脑的扩展屏幕
  18. 洛谷——P3906 Geodetic集合
  19. IE浏览器打印预览只打印第一页
  20. HTMLCSS学习笔记 纯知识点版 (尚硅谷2019李立超版)

热门文章

  1. 【译】Engineering Security Through Coordination Problems
  2. CVE-2015-8966/AndroidID-31435731
  3. android6.0源码分析之Camera2 HAL分析
  4. Xposed源码剖析——hook具体实现
  5. 使用AndroidStudio创建自定义gradle插件并被引用实战例子
  6. linux的模块化,GoboLinux 017 发布，模块化的 Linux 发行版
  7. python 排序_Python 排序了解一下？
  8. JZOJ 5637. 【NOI2018模拟4.8】一双木棋
  9. 影响中国发展的七大垂直搜索引擎
  10. CVPR 2018 TRACA:《Context-aware Deep Feature Compression for High-speed Visual Tracking》论文笔记