浏览器中插入富文本编辑器

常用的富文本编辑器有CKEditor、UEEditor、TinyEditor、KindEditor等、以下以kindeditor编辑器的使用为例。

 

1.官网下载KindEditor编辑器http://kindeditor.net/down.php,

当前最新版本为4.1.11,解压缩后放入项目的static目录,作为js插件引用。解压后的目录结构如下。

 

2.editor模板文件,在模板中引入kindeditor插件,并创建一个textarea标签,然后通过KindEditor.create创建一个对象指向textarea标签。

<p>生成富文本编辑器</p>
<textarea name="content" id="content"></textarea>  <!--创建textarea标签-->
<script src="/static/plugins/kindeditor/kindeditor-all-min.js"></script>  <!--引入kindeditor插件-->
<script>editor = KindEditor.create('#content', {  //通过KindEditor创建对象,#content表示指向textarea,resizeType: 2,allowPreviewEmoticons: true,allowImageUpload: true,filePostName: 'imageFile',uploadJson: '/tupian',items: ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','strikethrough','removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image','link'],})
</script>

创建文本编辑器对象的方法editor = KindEditor.create('textarea标签',{ '初始化参数' , items:['编辑器上显示的控件'] } )

textarea标签:表示创建的编辑器对象指向改textarea标签,即textarea标签会显示为一个编辑器

create的第二个参数为一个字典,items表示设置哪些控件会显示在编辑器上,其余参数表示对编辑器的初始化操作。参见http://kindeditor.net/docs/option.html

初始化参数:

width、height:编辑器宽度、长度

themeType:主题风格,在解压后的文件夹themes中,包含default和simple两种风格的css文件,可通过link引入css文件并在themeType指定

resizeType: 编辑器调整大小,值为0表示无法调整,1可以改变高度,2可以同时改变高度和宽度

allowPreviewEmoticons: 是否允许预览表情,true表示可以预览,需要在items中添加emoticons,true表示鼠标放在某个表情上会显示预览

allowImageUpload:是否允许上传本地图片,true表示允许,需要在items中添加image,false只能上传网络图片

filePostName: 上传文件的类型,默认为图片imageFile

uploadJson:文件上传后的处理函数

 

items:

items: [         'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage','flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak','anchor', 'link', 'unlink', '|', 'about']

显示效果如下:

其中source表示将输入内容显示为html格式

code表示插入程序代码

map表示插入google地图,baidumap表示插入百度地图

  

对模板的处理

def editor(req):return render(req,'editor.html')def tupian(req):print(req.POST)print(req.FILES)dic = {'error':0,'url':'/static/img/1.jpg','message':'something wrong...'}return JsonResponse(dic)

其中tupian函数表示对图片上传的处理,如果dic的error为0表示上传成功,会将url指定的图片显示到编辑器中预览,如果值为1表示失败,会将message返回,并弹出错误提示框,提示框内容为message。

 

在kindeditor编辑器中,可通过edirot.html()获取编辑器中已输入的所有内容。

kindeditor提供了一种方法,在页面加载完成后生成编辑器,并且不依赖jQuery。

<textarea name="content" id="content"></textarea>
<input type="button" οnclick="submit()" value="‘提交"></input>
<script src="/static/plugins/kindeditor/kindeditor-all-min.js"></script>
<script>var editor = nullKindEditor.ready(function () {editor = KindEditor.create('#content', {······})})function submit() {console.log(editor.html())}
</script>

 

转载于:https://www.cnblogs.com/Forever77/p/11115532.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

获取Extjs文本域中的内容

经常在Ext.select()和Ext.query()等问题上纠结&#xff0c;今天终于有了点新认识&#xff1a; 需求&#xff0c;假设我们的页面上有个panel ,其id为clusterstab_edit_details,这个panel的内部有个textarea,这个textarea的name为editDetails_Description,那么我们有多少方法可以…

Asp.NetCoreWebApi - RESTful Api

REST 常用http动词 WebApi 在 Asp.NetCore 中的实现3.1. 创建WebApi项目.3.2. 集成Entity Framework Core操作Mysql 3.2.1. 安装相关的包(为Xxxx.Infrastructure项目安装)3.2.2. 建立Entity和Context3.2.3. ConfigureService中注入EF服务3.2.4. 迁移数据库3.2.5. 数据库迁移结果…

android动画影子效果,Android TV常用动画的效果,View选中变大且有阴影(手机也能用)...

因为电视屏幕比较大&#xff0c;而我们看电视时距离电视有一定距离&#xff0c;这样就需要动画效果比较明显&#xff0c;这个动画就是应用最广泛的&#xff0c;因为很酷&#xff0c;呵呵&#xff0c;你懂得&#xff0c;看了就知道。效果如下图&#xff1a;public class MainAct…

linux 高可用----keepalived+lvs

什么是高可用&#xff1f; HA&#xff08;high availability&#xff09;即高可用性&#xff1b;就是在高可用集群中发生单点故障时&#xff0c;能够自动转移资源并切换服务&#xff0c;以保证服务一直在线的机制。 LVS LVS&#xff1a;&#xff08;linux virtual server&#…

用户配置相关文件

用户配置相关文件小总结 /etc/passwd 记录用户相关的信息 /etc/shadow 密码影子文件 /etc/group 记录用户组相关的信息 /etc/gshadow 密码影子文件&#xff08;组密码&#xff09; /etc/passwd 文件中各段的内容 第1段&#xff1a;用户名 第…

华为5c android n风格,华为荣耀畅玩5C的屏幕怎么样

华为荣耀畅玩5C的屏幕怎么样屏幕方面&#xff0c;华为荣耀畅玩5C采用了5.2英寸1080P级别GFF贴合屏幕&#xff0c;塑料边框采用了弧面状的设计&#xff0c;握感比较舒适。华为荣耀畅玩5C采用了双主天线的设计&#xff0c;分别在上下的塑料区域。此外&#xff0c;边框以及后盖的上…

spring解析配置文件(三)

一、从XmlBeanDefinitionReader的registerBeanDefinitions&#xff08;doc,resource&#xff09;开始 1 protected int doLoadBeanDefinitions(InputSource inputSource, Resource resource) 2 throws BeanDefinitionStoreException { 3 try { 4 …

使用kibana和elasticsearch日志实时绘制图表

前言&#xff1a; 此文接的是上篇&#xff0c;上次的内容是&#xff0c;用python操作elasticsearch存储&#xff0c;实现数据的插入和查询。 估计有些人一看我的标题&#xff0c;以为肯定是 logstash kibana elasticsearch的组合。这三个家伙也确实总是勾搭在一块。 其实logst…

android 网络调试 源代码,Android源代码调试环境搭建

我们在调试Android应用程序的时候&#xff0c;有时候遇到一些莫名其妙的问题&#xff0c;因此我们需要查看Android内部是如何调用的。我们都知道Android是一个伟大的开源项目&#xff0c;因此debug的时候肯定是支持源代码级别调试的。采用源代码调试&#xff0c;一方面有利于发…

如何使用HTTP压缩优化服务器

鉴于互联网上的宽带有限&#xff0c;网络管理人员任何旨在加速接入速度的努力都是有价值的。其中的一个方法就是通过HTTP压缩技术实现接入速度的加速&#xff0c;它通过减少在服务器和客户端之间传输的数据量&#xff0c;显著地提高网站的性能。数据压缩本身并不新鲜。但是&…

OpenGL研究3.0 多边形区域填充

OpenGL研究3.0 多边形区域填充 DionysosLai(906391500qq.com)2014-06-22 所谓多边形区域填充。就是将多边形内部区域&#xff0c;所有已相同色块填充。注意&#xff1a;这里讨论的多边形是简单多边形&#xff08;即不考虑诸如五角星这样的相交多边形&#xff09;。简单多边形&a…

ping、网络抖动与丢包

基本概念&#xff1a; ping: PING指一个数据包从用户的设备发送到测速点&#xff0c;然后再立即从测速点返回用户设备的来回时间。也就是俗称的“网络延迟” 一般以毫秒&#xff08;ms&#xff09;计算 一般PING在0~100ms都是正常的速度&#xff0c;不会有较为明显的卡顿。 测试…

[luoguP2801] 教主的魔法(二分 + 分块)

传送门 以为对于这类问题线段树都能解决&#xff0c;分块比线段树菜&#xff0c;结果培训完才知道线段树是一种特殊的分块方法&#xff0c;有的分块的题线段树不能做&#xff0c;看来分块还是有必要学的。 对于这个题&#xff0c;先分块&#xff0c;然后另开一个数组对于每个块…

鸿蒙系统适配开发,捕获科技拟建立鸿蒙开发组 为区块链钱包客户适配鸿蒙系统做筹备...

遭遇美国“实体清单”封杀的第85天&#xff0c;华为“鸿蒙”横空出世&#xff01;8月9日下午&#xff0c;在华为全球开发者大会上&#xff0c;当余承东正式宣布鸿蒙系统(Harmony OS)发布的时候&#xff0c;全场掌声雷动&#xff01;世界上第一个由中国企业自主研发的全平台微内…

关于VCP(Virtual Com Port)拓展的调试经历(一)

* The Overview 前日&#xff0c;接到老板部署的任务&#xff0c;将现有的基于STM32L151与L432的LoRaWAN程序中添加USB CDC(Communication Device Class)功能&#xff0c;并枚举为VCP(Virtual Com Port)用以替代以往的串口打印。很疑惑为什么以前架构代码的时候没有添加进去。。…

三星s6 android 8.0,再见Android 8.0,三星s6全系列系统都停止了,第一代国王已经倒下了吗?...

对于Android用户而言&#xff0c;最令人兴奋的事情是系统更新&#xff0c;因为该更新意味着更流畅的体验和更加用户友好的功能. 但是&#xff0c;旧的三星S6并不是那么幸运&#xff0c;并且不再错过Android 8.0.三星s6的全系列指的是三星s6&#xff0c;三星s6 edge&#xff0c;…

Exchange 2010无法安装问题解决方法

当你在活动目录(AD)森林中安装多台全局编录服务器(GC)之后,默认情况下你会发现在AD站点里面自动生成二条站点连接,从上面的截图可以看到目前在AD森林的Default-First-Site-Name(默认站点)里面有6台GC。 从上面的截图可以看到目前只有一台叫做Sh-Site1GC(全局编录服务器)是处于运…

一加6android9玩飞车掉,解锁新速度:一加6T深度评测

解锁新速度&#xff1a;一加6T深度评测2019-11-02 14:28:595点赞2收藏4评论创作立场声明&#xff1a;我们只谈智能硬件&#xff0c;向改变生活的智能硬件Say“嗨”&#xff01;作为安卓旗舰机成员&#xff0c;一加这个品牌在玩机一类的同学手里可是大放光彩&#xff0c;各种刷机…

探讨跨域请求资源的几种方式

[转自&#xff1a;http://www.cnblogs.com/dojo-lzz/p/4265637.html] 什么是跨域JSONPproxy代理corsxdr由于浏览器同源策略&#xff0c;凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表&#xff08;来源&#xff09; JSONP 这种…

python处理excel文件(xls和xlsx)

一、xlrd和xlwt 使用之前需要需要先安装&#xff0c;windows上如果直接在cmd中运行python则需要先执行pip3 install xlrd和pip3 install xlwt&#xff0c;如果使用pycharm则需要在项目的解释器中安装这两个模块&#xff0c;File-Settings-Project:layout-Project Interpreter&a…