UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点

通过UEditor提供的API接口可以很方便的读写操作内容并设置编辑器里的样式
页面中的脚本
<script>$(function () {init();_template();});function _template() {var html = '<ul><li>大因云屏</li><li>超高分GIS地图</li><li>KVM操作</li><li>高清输入节点</li><li>智能音箱系统</li><li>智能会议交互终端</li></ul><p class="foot"><img src="/public/images/pic10.jpg"></p><h1>指挥中心解决方案系统图</h1><img src="/public/images/pic11.jpg"><h1>大因云屏与传统系统对比图</h1><img src="/public/images/pic13.jpg">';if (windw.editorcontent && editorcontent.setContent) {editorcontent.setContent(html);//插入自定义内容到编辑器editorcontent.document.body.className += ' content ';}}//初始化function init() {//加载ueditor脚本editorcontent = new baidu.editor.ui.Editor();editorcontent.render('content');//content为id号try {//添加自定义类名content,用于设置编辑器里的样式editorcontent.addListener('ready', function (editor) {(editorcontent.document.body.className += ' content ')});editorcontent.sync();} catch (err) {}}</script>

  

\js\ueditor\themes\iframe.css 自定义编辑器里的样式
/*可以在这里添加你自己的css*/.content{padding:20px;background:#f6f6f6;
}.content img{width:98%;
}

参考:
UEditor API:ready
From WizNote

转载于:https://www.cnblogs.com/huangtailang/p/6520242.html

ueditor插入自定义内容和样式相关推荐

  1. 百度编辑器(UEditor)自定义内容样式

    笔者在做微信编辑器的时候遇到这样的问题,当固定编辑器窗口的情况下图片太大会出现横向滚动调条,但是通过外部css并不能解决此问题,所以还需从编辑器本身入手,那么接下来就随着本文来看如何自定义内容样式. ...

  2. (11) 修改ueditor 插入代码时的样式

    在csdn插入代码时是跳出一个弹出框,黑底白色,非常清楚,在ueditor这里,底色是非常浅的灰色,不仔细看都看不出有底色,所以想,做出弹出框估计比较麻烦,改成黑底白色应该简单些. 在网上搜了下,发现 ...

  3. 往写好的html插入标签,写一个可插入自定义标签的 Textarea 组件

    - "插入自定义标签是什么鬼?" - "比如你要插入一个的标签..." - "什么情况下会有这种需求?" - "得罪了产品的情况下 ...

  4. ueditor 编辑html文件名,UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法...

    UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法 使用ueditor编辑器,附件默认在ueditor/php/upload/,  我的附件地址是网站根目录下/data/u ...

  5. ueditor 工具栏配置_百度ueditor编辑器自定义工具栏

    百度ueditor编辑器自定义工具栏: //引入编辑器配置文件和核心文件 //内容容器 var ue = UE.getEditor('content', { toolbars: [ [ //自定义的工 ...

  6. 百度编辑器(UEditor)自定义工具栏

    百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何 ...

  7. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  8. android自定义progressbar样式,Android开发中如何实现自定义ProgressBar的样式

    Android开发中如何实现自定义ProgressBar的样式 发布时间:2020-11-20 16:08:10 来源:亿速云 阅读:294 作者:Leah Android开发中如何实现自定义Prog ...

  9. element 日历组件-自定义内容

    这只是个子组件 <template><div ref="topBox" class="swiper-in page-container bg-white ...

  10. input发送a.jax_JAX-RS 2.0:自定义内容处理

    input发送a.jax 我试图想到一个更好的标题,但未能拿出一个! 请多多包涵--. JAX-RS 2.0规范允许我们无缝地将JAXB对象编组到HTTP请求/响应主体,或从HTTP请求/响应主体中解 ...

最新文章

  1. LeetCode(1.俩数之和)JAVA
  2. @scheduled注解配置时间_探究 Spring 的定时任务配置
  3. css3+jQuery制作导航菜单(带动画效果)
  4. mmap 内存映射详解
  5. 学成在线--19.新增课程(数据字典)
  6. Django - AJAX
  7. html5图片剪切板,JavaScript 网页端复制图片到剪切板
  8. zookeeper Error contacting service. It is probably not running
  9. wamp 配置 mysql_PHPWAMP配置应该如何修改,Web服务器、php、mysql的具体配置修改
  10. 运行初始化过程代码笔记
  11. SpringBoot系列: 单元测试2
  12. python网络编程讲解_详解Python Socket网络编程
  13. 一步一步实现KNN分类算法
  14. 人脸识别 | AI产品经理需要了解的CV通识(二)
  15. PGMIntro概率图模型
  16. The following paths are ignored by one of your .gitignore
  17. python金融数据缺失处理_机器学习之Python数据缺失处理
  18. 官网Tomcat下载方法
  19. 手机设置邮箱无法验证服务器失败,用手机邮箱设置怎么总显示无法验证帐户信息...
  20. Javascript基础之-强制类型转换(三) 1

热门文章

  1. 中移动、中联通、中电信取消网间结算政策:实行对等互联,互不结算
  2. Linux 平台下 Tomcat 的安装与优化
  3. GitHub 年度报告,2017 年最受欢迎的编程语言
  4. Django初级手册1-项目和应用的创建与简单的数据库操作
  5. [BZOJ1668][Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富
  6. css案例学习之父子块的margin
  7. setInterval 函数
  8. jquery之hasClass
  9. 用代码排出自己的名字
  10. System.Web.Helpers.Json 与 Newtonsoft.Json 的性能对比