uniGUI学习之UniHTMLMemo1富文本编辑器

1]系统自带的富文本编辑器

2]jQuery+Bootstarp富文本编辑器插件summernote.js


1]系统自带的富文本编辑器


 1、末尾增加<p>

2、增加字体

3、解决滚屏问题

4、输入长度限制问题

5、显示 并 编辑 HTML源代码(主要是图片处理)


1、末尾增加<p>

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_HTML

UniHTMLMemo1.Lines.Add("<p>"+UniHTMLMemo3.Text);
UniHTMLMemo1.Lines.Clear();//清空输入框
  • 1.
  • 2.

在这里你会发现我在发送文字处增加了“<p>”,那是因为如果不增加这个,接收窗口显示时会把多次信息链接到一起,没有换行。

2、增加字体

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_css_02

function beforeInit(sender, config)
{config.fontFamilies = ['楷体','黑体','隶书','幼圆','华文中宋'];
}

3、解决滚屏问题

也许是uniHTMLMemo的BUG,uniMemo在不断增加新的消息时会自动滚屏,但是UniHTMOMemo不会,可在发完消息后和收到消息后添加调用javaScript函数解决。

/*HTMLMemo好友聊天滚屏*/

UniSession.AddJS('Ext.defer(function(){var me='+ UniHTMLMemo1.JSName +'.iframeEl.el.dom; me.contentWindow.scrollTo(0, me.contentDocument.scrollingElement.scrollHeight)}, 200);');
  • 1.

4、输入长度限制问题

该控件没有了MaxLength属性,可以在ClientEvents的UniEvents的beforeinit事件中实现

function beforeInit(sender, config)
{ config.enforceMaxLength=true;
config.maxLength=450;
}
  • 1.
  • 2.
  • 3.
  • 4.

5、显示 并 编辑 HTML源代码(主要是图片处理)

   5.1引用本地图片

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_css_03

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_HTML_04

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_HTML_05

 5.2先从Word里等复制图片,再 粘贴到UniHTMLMemo1

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_HTML_06

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_HTML_07

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_HTML_08


2]jQuery+Bootstarp富文本编辑器插件summernote.js,  

解决系统自带的不能插入图片,字体少等问题   https://www.lanrenzhijia.com/comm/4520.html

最终效果:

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_富文本编辑器_09

 将文件解压到与EXE同一个目录下

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_富文本编辑器_10

 将UniHTMLFrame1的HTML设置为

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_css_11

 

更多初始设置:   https://www.likecs.com/show-540425.html

<style>.m{ width: 800px; margin-left: auto; margin-right: auto; }
</style><script>
$(function(){$('.summernote').summernote({height: 200,tabsize: 2,lang: 'zh-CN'});
});
</script>    
<div class="m">        <div class="summernote">涂磊  欢迎您!</div>
</div>
  • 1.

同时 ,加入引用CSS和JS文件

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_富文本编辑器_12

uniGUI学习之UniHTMLMemo1富文本编辑器((62)_富文本编辑器_13

js/bootstrap.min.js
dist/summernote.js
dist/lang/summernote-zh-CN.js
dist/bootstrap.css
dist/summernote.css

登录后复制 

lang: \'zh-CN\',height: 300,placeholder: "详情...",minHeight: null, // set minimum height of editormaxHeight: null, // set maximum height of editorfocus: false,disableDragAndDrop: true,dialogsInBody: true,dialogsFade: true,fontSizes: [\'8\', \'9\', \'10\', \'11\', \'12\', \'13\', \'14\', \'15\', \'16\', \'17\', \'18\', \'19\', \'20\', \'21\', \'22\', \'23\', \'24\', \'25\'],fontNames: [\'Arial\', \'Arial Black\', \'Comic Sans MS\', \'Courier New\',\'Helvetica Neue\', \'Helvetica\', \'Impact\', \'Lucida Grande\',\'Tahoma\', \'Times New Roman\', \'Verdana\', \'Microsoft YaHei\'],toolbar: [// [groupName, [list of button]][\'style\', [\'bold\', \'italic\', \'underline\', \'clear\', \'fontsize\', \'fontname\']],[\'color\', [\'color\']],[\'font\', [\'style\', \'strikethrough\', \'superscript\', \'subscript\', \'height\']],//[\'para\', [\'ul\', \'ol\', \'paragraph\']],[\'para\', [\'paragraph\']],//[\'video\', [\'video\']],[\'picture\', [\'picture\']],[\'link\', [\'link\']],[\'table\', [\'table\']],//[\'hr\', [\'hr\']],[\'undo\', [\'undo\']],[\'redo\', [\'redo\']],[\'help\', [\'help\']],[\'codeview\', [\'codeview\']]],

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

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

相关文章

【MySQL】启动 和 连接 MySQL

启动停止 mysql安装成功后在cmd输入 net start mysql80 //启动 net stop mysql80 //停止 mysql连接 方式1. 通过客户端去连接 方式2.使用cmd去连接 描述&#xff1a;-u是指定 用户 -p是指定密码 mysql -u root -p password

NVM下载和安装NodeJS教程(环境变量配置)

前言:一个公司很多项目,可能每个项目node版本要求不一样,导致每次切换项目,你要重新下载node,非常麻烦,这个时候,就有了nvm,非常的方便实用,也是程序员必备. 1.nvm是什么? nvm全英文也叫node.js version management&#xff0c;是一个nodejs的版本管理工具。nvm和n都是node.…

基于java+swing+mysq学生成绩管理系统(含课程报告)

基于javaswingmysq学生成绩管理系统_含课程报告 一、系统介绍二、功能展示三、项目相关3.1 乱码问题3.2 如何将GBK编码系统修改为UTF-8编码的系统&#xff1f; 四、其它1.其他系统实现 五、源码下载 一、系统介绍 本系统使用 Swing MySQL IntelliJ IDEA 开发。为管理人员提供…

Mac brew install youtube-dl 【 youtube 下载工具:youtube-dl 安装】

文章目录 1. 简介2. 预备3. 安装4. 命令5. 测试 1. 简介 youtube-dl - 从youtube.com或其他视频平台下载视频 https://github.com/ytdl-org/youtube-dl 2. 预备 安装并配置 git安装 brew 3. 安装 MacBook-Pro ~ % brew install youtube-dl Warning: youtube-dl has been …

蓝桥杯专题-真题版含答案-【国庆星期日】【三色棋】【蒙地卡罗法求 PI】【格雷码(Gray Code)】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

JVM学习之类加载子系统

类加载子系统 类加载子系统负责从文件或者网络中加载Class文件&#xff0c;class文件在开头有特定的标识 ClassLoader只负责class文件的加载&#xff0c;是否可运行是执行引擎决定的 加载的类信息放在方法区。除了类信息之外&#xff0c;方法区也会放运行时常量池&#xff0c…

TCP报文头(首部)详解

本篇文章基于 RFC 9293: Transmission Control Protocol (TCP) 对TCP报头进行讲解&#xff0c;部分内容会与旧版本有些许区别。 TCP协议传输的数据单元是报文段&#xff0c;一个报文段由TCP首部&#xff08;报文头&#xff09;和TCP数据两部分组成&#xff0c;其中TCP首部尤其重…

基于EasyExcel的数据导入导出

前言&#xff1a; 代码复制粘贴即可用&#xff0c;主要包含的功能有Excel模板下载、基于Excel数据导入、Excel数据导出。 根据实际情况修改一些细节即可&#xff0c;最后有结果展示&#xff0c;可以先看下结果&#xff0c;是否是您想要的。 台上一分钟&#xff0c;台下60秒&a…

【数据在内存中的存储】

目录 整数在内存中的存储大小端字节序和字节序判断浮点数在内存中的存储 1. 整数在内存中的存储 整数的二进制表示方法有三种: 原码、反码和补码 三种表示方法均有符号位和数值位两部分&#xff0c;符号位0表示“正”,1表示"负",而数值位最高的一位被当做符号位,剩…

《工程数值计算Python教程》笔记

文章目录 [toc]第一章&#xff1a;绪论 1.1 1.1 1.1|数值计算在工程科学中的重要性 1.2 1.2 1.2|数值计算方法 1.3 1.3 1.3|程序设计盒图计算方法的选取减少运算次数避免相近的数相减 1.4 1.4 1.4|误差的来源、表示及传递误差的来源和分类模型误差观测误差截断误差舍入误差 误差…

RabbitMQ消息顺序性保障

RabbitMQ 没有属性设置消息的顺序性&#xff0c;只能设置消息的优先级&#xff0c;因此消息顺序性保障只能在 consumer 上实现 场景分析&#xff1a; 生产者向 RabbitMQ 里发送了三条数据&#xff0c; 顺序依次是 data1-> data2 -> data3&#xff0c;压入的是一个内存…

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)

前言 我们知道echarts是一个非常强大的绘图库&#xff0c;基于这个库&#xff0c;我们可以绘制出精美的图表。对于一张图来说&#xff0c;其实比较重要的就是配置项&#xff0c;填入不同的配置内容就可以呈现出不同的效果。 当然配置项中除了样式之外&#xff0c;最重要的就是…

Stable Diffusion 微调及推理优化实践指南

随着 Stable Diffsuion 的迅速走红&#xff0c;引发了 AI 绘图的时代变革。然而对于大部分人来说&#xff0c;训练扩散模型的门槛太高&#xff0c;对 Stable Diffusion 进行全量微调也很难入手。由此&#xff0c;社区催生了一系列针对 Stable Diffusion 的高效微调方案&#xf…

Qt之QNetworkAccessManager 从本地和内存中上传数据到Http服务器

简述 接连做了好几个服务器的项目&#xff0c;例如文件传输用的Ftp和对象存储服务器(Object Storage Service)&#xff0c;简单的信息传输用的WebServer&#xff0c;之前也有用过HttpServer不过都和WebServer一样简单的调用接口提交数据并没有上传过文件&#xff0c;正好趁这次…

力扣LCR 130. 衣橱整理(DFS 解法)

Problem: LCR 130. 衣橱整理 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 首先该问题可以归纳为一类遍历二维矩阵的题目&#xff0c;此类中的一部分题目可以利用DFS来解决&#xff0c;具体到本题目&#xff1a; 我们可以利用一个布尔类型的二维数组记录我们已经访…

no module named ‘xxx‘

目录结构如下 我想在GCNmodel的model里引入layers的GraphConvolution&#xff1a;from GCNmodel.layers import GraphConvolution&#xff0c;但这样却报错no module named GCNmodel&#xff0c;而且用from layers import GraphConvolution也不行。然后用sys.path.appen(xxx)…

selenium-grid4.3.0两种模式记录

selenium-grid4.3.0两种模式记录 本文运行&#xff0c;需要提前配置好Java11以及安装好Chrom、Firefox、Safari其中一个浏览器&#xff0c;如果是Chrom、Firefox需要下载对应版本的驱动&#xff0c;并给 webdriver 配置环境变量&#xff0c;Safari浏览器Mac系统会自带&#xf…

使用下载代替物理串口输出-STM32 Debug (printf) Viewer

使用下载代替物理串口输出-STM32 Debug 硬件要求配置方法代码要求打印输出结果 硬件要求 STM32的PB9、PB10引脚的串口1通常用作其他功能使用后&#xff0c;无法通过printf()函数打印输出想要调试输出查看变量或调试信息。现已使用另外一种方法实现printf()函数打印输出。 ST…

Mr. Cappuccino的第67杯咖啡——MacOS通过PD安装Win11

MacOS通过PD安装Win11 下载ParallelsDesktop安装ParallelsDesktop激活ParallelsDesktop下载Windows11安装Windows11激活Windows11 下载ParallelsDesktop ParallelsDesktop下载地址 安装ParallelsDesktop 关闭上面的窗口&#xff0c;继续操作 激活ParallelsDesktop 关闭上面的…

【LeetCode刷题】-- 161.相隔为1的编辑距离

161.相隔为1的编辑距离 方法&#xff1a;一次遍历 首先&#xff0c;我们要确认字符串的长度不会相差太远。如果长度差了2个或更多字符&#xff0c;那么 s 和 t 就不可能是一次编辑之差的字符串。 接下来&#xff0c;我们假设 s 的长度总是短于或等于 t 的长度。如果不是这样&…