uniGUI学习之UniHTMLMemo1富文本编辑器

news2024/9/22 4:21:20

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 editor
         maxHeight: null, // set maximum height of editor
         focus: 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.coloradmin.cn/o/1316373.html

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

相关文章

Ubuntu 常用命令之 ls 命令用法介绍

Ubuntu ls 命令用法介绍 ls是Linux系统下的一个基本命令&#xff0c;用于列出目录中的文件和子目录。它有许多选项可以用来改变列出的内容和格式。 以下是一些基本的ls命令选项 -l&#xff1a;以长格式列出文件&#xff0c;包括文件类型、权限、链接数、所有者、组、大小、最…

【程序】STM32 读取光栅_编码器_光栅传感器_7针OLED

文章目录 源代码工程编码器基础程序参考资料 源代码工程 源代码工程打开获取&#xff1a; http://dt2.8tupian.net/2/28880a55b6666.pg3这里做了四倍细分&#xff0c;在屏幕上显示 速度、路程、方向。 接线方法&#xff1a; 单片机--------------串口模块 单片机的5V-------…

渗透实验基础教程(完整版):

#江南的江 #每日鸡汤&#xff1a;影响我们人生的绝不仅仅是环境&#xff0c;其实是心态在控制个人的行动和思想。同时&#xff0c;心态也决定了一个人的视野事业和成就&#xff0c;甚至一生。 #初心和目标&#xff1a;成为网络安全达人。。。 渗透实验基础教程&#xff08;完整…

STM32-HAL库11-SPI通讯(F103C6T6做主机,F103C8T6做从机)

STM32-HAL库11-SPI通讯&#xff08;F103C6T6做主机&#xff0c;F103C8T6做从机&#xff09; 一、所用材料 STM32F103C6T6最小系统板-主机 STM32F103C8T6最小系统板-从机 串口调试助手X-COM 二、所学内容 主要为实现SPI的轮询发送功能&#xff0c;在DSP280049C初学&#xff…

行政前台快递管理教程

行政前台快递管理&#xff0c;成了企业前台工作人员不可逃避的话题。看似简单的几个字&#xff0c;却难倒了不少人。身边有从事行政前台工作的朋友&#xff0c;应该或多或少都会听其抱怨过...... 为什么公司寄件管理这么难&#xff1f; 为什么员工不能按规定寄件&#xff1f;…

【算法刷题】每日打卡——动态规划(1)

背包问题 例题一 有 N件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整数…

nlp与cv的发展

Transformer的出现,促进了更高容量模型的建立,为大模型的出现奠定基础. &#x1f9d0;大模型通常具有十亿个以上参数(仅供参考) &#x1f62e;左边的蓝色是CV领域、右下绿色是NLP、右上蓝色是多模态&#x1f603;基础模型(Foundational Models)首次由Bommasani等人在《Stanford…

Quartus 18.1软件及支持包安装教程

安装前最好关闭电脑的杀毒软件和防火墙 安装包可以到Quartus官网下载需要的版本&#xff0c;注意选择操作系统 Quartus官网&#xff1a;FPGA 设计软件 - 英特尔 Quartus Prime (intel.cn) 下载解压后以管理员的身份运行 QuartusSetup-18.1.0.625.exe文件&#xff0c;版本不同…

openGauss学习笔记-162 openGauss 数据库运维-备份与恢复-导入数据-通过INSERT语句直接写入数据

文章目录 openGauss学习笔记-162 openGauss 数据库运维-备份与恢复-导入数据-通过INSERT语句直接写入数据162.1 使用openGauss数据库提供的客户端工具向openGauss数据库写入数据162.2 通过JDBC/ODBC驱动连接数据库执行INSERT语句向openGauss数据库写入数据162.2.1 函数原型162.…

【JavaWeb学习笔记】10 - 手写Tomcat底层,Maven的初步使用

一、Maven 1.Maven示意图 类似Java访问数据库 2.创建Maven案例演示 配置阿里镜像 找到setting目录 但一开始配置不存在该文件 需要去Maven主目录下的conf拿到settings拷贝到上述目录 拷贝到admin/.m2后打开该settings 在<mirrors>内输入镜像地址 <mirror> …

根文件系统(一):基础

本文主要探讨210根文件系统相关知识。 根文件系统 存储设备(flash等)是分块(扇区),访问存储设备是按块号 (扇区号)来访问,文件系统(软件)对存储设备扇区进行管理,将对扇区的访问变成对目录和文件名的访问 根文件系统init进程的应用程序和其他应用程序,提供根目…

【docker】部署minio对象存储并用rclone同步

docker部署minio对象存储并用rclone同步 本文首发于 ❄️慕雪的寒舍 1.什么是minio&#xff1f; minio是一个开源的对象存储服务器&#xff0c;兼容S3协议。 官网&#xff1a;https://min.io/ 官方在开源的基础上也提供云端S3服务&#xff0c;分为个人和企业&#xff0c;有不…

Linux的权限(二)

目录 前言 文件类型和访问权限&#xff08;事物属性&#xff09; 补充知识 文件类型 文件操作权限 修改文件权限 chmod指令 文件权限值的表示方法 字符表示方法 8进制数值表示方法 权限有无带来的影响 修改文件角色 chown与chgrp指令 目录的rwx权限 补充知识 …

TensorFlow神经网络中间层的可视化

TensorFlow神经网络中间层的可视化 TensorFlow神经网络中间层的可视化1. 训练网络并保存为.h5文件2. 通过.h5文件导入网络3. 可视化网络中间层结果&#xff08;1&#xff09;索引取层可视化&#xff08;2&#xff09;通过名字取层可视化 TensorFlow神经网络中间层的可视化 1. …

nodejs+vue+微信小程序+python+PHP技术下的音乐推送系统-计算机毕业设计推荐

3.2.1前台用户功能 前台注册用户的功能如下&#xff1a; 注册登录&#xff1a;用户填写个人信息&#xff0c;并验证手机号码进行账户注册&#xff0c;注册成功后方可登录系统。 歌手介绍&#xff1a;用户可以在线进行歌手介绍信息查看等。 音乐库&#xff1a;用户可以在音乐库查…

Flink的处理函数

之前的流处理API&#xff0c;无论是基本的转换、聚合&#xff0c;还是更为复杂的窗口操作&#xff0c;其实都是基于DataStream进行转换的&#xff0c;所以可以统称为DataStream API。 在Flink更底层&#xff0c;我们可以不定义任何具体的算子&#xff08;比如map&#xff0c;f…

Arrays.asList()方法:陷阱与解决之道

在Java编程中&#xff0c;Arrays类提供了一系列用于操作数组的实用方法。其中&#xff0c;​Arrays.asList()​方法是一个常用的方法&#xff0c;用于快速将数组转换为List集合。然而&#xff0c;这个方法存在一些潜在的陷阱&#xff0c;可能导致出现意外的行为。本文将介绍​A…

智能优化算法应用:基于和声算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于和声算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于和声算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.和声算法4.实验参数设定5.算法结果6.参考文献7.MA…

管理类联考——数学——真题篇——按知识分类——几何——解析几何

文章目录 解析几何2023真题&#xff08;2023-07&#xff09;-几何-解析几何-最值-画图求最值-两线相减求最大-联想三角形的“两边差小于第三边”&#xff0c;当为第三边为最大真题&#xff08;2023-19&#xff09;-几何-解析几何-最值-画图求最值-圆方程画出圆的形状-两点间距离…

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

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