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.…

git各分支简介

一、master 主分支 所有用户可见的正式版本&#xff0c;都从master发布&#xff08;也是用于部署生产环境的分支&#xff0c;确保master分支稳定性&#xff09; 主分支作为稳定的唯一代码库&#xff0c;不做任何开发使用 master 分支一般由develop以及hotfix分支合并&#…

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

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

生产环境_Spark解析JSON字符串并插入到MySQL数据库

业务背景&#xff1a; 最近开发有一个需求&#xff0c;是这样的 我需要将一段从前端传过来的JSON字符串进行解析&#xff0c;并从中提取出所需的数据&#xff0c;然后将这些数据插入到MySQL数据库中。 json格式样例如下 { \"区域编号\": \"001\", …

什么是npm?

npm&#xff08;全称Node Package Manager&#xff09;是一个用于管理Node.js包和模块的命令行工具。它是一个包管理器&#xff0c;允许您在您的项目中方便地安装、管理和升级模块和依赖项。 npm已成为JavaScript生态系统中最流行的包管理器之一&#xff0c;它提供了一个庞大的…

不设默认值(js的问题)

给动态变量设置默认值是一个非常好的实践&#xff0c;可以预防发生意想不到的错误。下面是一个常见错误的例子&#xff1a; function addTwoNumbers(a, b) { ​​ console.log(a b); ​​} ​​addTwoNumbers(); ​​// NaN 结果是 "NaN"&#xff0c;因为 a 是…

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 …

如何在PHP中使用PDO预处理语句?

在PHP中使用PDO&#xff08;PHP Data Objects&#xff09;来执行预处理语句是一种安全的方式来与数据库进行交互&#xff0c;以防止SQL注入攻击。以下是如何在PHP中使用PDO预处理语句的基本步骤&#xff1a; 建立数据库连接&#xff1a; 首先&#xff0c;您需要使用PDO建立与数…

蓝桥杯专题-真题版含答案-【国庆星期日】【三色棋】【蒙地卡罗法求 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首部尤其重…

7个精选的矢量数据库和搜索引擎项目

目录 矢量数据库简介1.Milvus相似性搜索引擎2.Qdrant下一代矢量数据库3.Chroma嵌入式数据库4.Weaviate矢量数据库5.RediSearch全文搜索引擎6.矢量数据库7.Vald分布式向量搜索引擎 矢量数据库简介 向量数据库是一种用于存储、检索和分析向量的数据库。在图片搜索、语音搜索等应…

基于EasyExcel的数据导入导出

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

【数据在内存中的存储】

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

Java中的链式编程风格与应用案例

引言 链式编程是一种在编程中经常使用的风格&#xff0c;它可以使代码更加简洁、易读和易于维护。在Java中&#xff0c;链式编程可以通过方法链的方式来实现。本文将介绍Java中的链式编程风格&#xff0c;并通过几个应用案例来说明其实际应用。 一、链式编程的概念与特点 链式…

如何理解Rust语言中的“impl”关键字

在Rust编程语言中&#xff0c;impl是一个关键字&#xff0c;用于为类型实现方法和特性&#xff08;traits&#xff09;。impl关键字后面可以跟一个类型或者特性名称&#xff0c;然后在大括号中定义该类型或特性的具体实现。 当我们使用impl关键字为一个类型实现方法时&#xf…

Go实现MapReduce

背景 当谈到处理大规模数据集时&#xff0c;MapReduce是一种备受欢迎的编程模型。它最初由Google开发&#xff0c;用于并行处理大规模数据以提取有价值的信息。MapReduce模型将大规模数据集分解成小块&#xff0c;然后对这些小块进行映射和归约操作&#xff0c;最终产生有用的…

《工程数值计算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;压入的是一个内存…