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 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\']]
         ],

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【星环云课堂大数据实验】kafka消息发布与订阅

文章目录 一、Kafka概述二、实验环境三、实验准备四、实验目的五、实验步骤5.1、创建Kafka Topic5.2、Kafka消息发布5.3、Kafka消息订阅 六、实验感悟 一、Kafka概述 Kafka是由Apache软件基金会开发的一个开源流处理平台&#xff0c;由Scala和Java编写。该项目的目标是为处理实…

持续集成交付CICD:Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用

目录 一、实验 1.部署Ansible自动化运维工具 2.K8S 节点安装nginx 3.Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用 二、问题 1.ansible安装报错 2.ansible远程ping失败 3. Jenkins流水线通过ansible命令直接ping多台机器的网络状态报错 一、实验 …

Hadoop分布式配置小白篇(附加各阶段问题解决方式)

看的黑马的课&#xff0c;记录一下配置步骤 目录 1.VMware安装&#xff1a; 方法1&#xff1a; 方法2&#xff1a; 2.创建虚拟机 1.ISO镜像文件获取&#xff08;CentOS&#xff09;&#xff1a; 2.创建&#xff08;简略步骤&#xff09; 3.克隆虚拟机&#xff08;克隆伪…

idea第一次提交到git(码云)

1.先创建一个仓库 2.将idea和仓库地址绑定 2.将idea和仓库地址绑定

《Kotlin核心编程》笔记:集合、序列与内联函数

集合的高阶函数API map 操作 val list listOf(1, 2, 3, 4, 5, 6) val newList list.map { it * 2 }当然&#xff0c;在 Java 8 中&#xff0c;现在也能像Kotlin那样去操作集合了。 上面的方法实际上就是一个高阶函数&#xff0c;它接收的参数实际上就是一个函数&#xff0…

使用Pytorch从零开始构建LoRA

引言 在这篇博文中&#xff0c;我将向大家展示如何使用Pytorch从头开始构建 LoRA。LoRA 是Low-Rank Adaptation或Low-Rank Adapters的缩写&#xff0c;它提供了一种高效且轻量级的方法来微调预先存在的语言模型。这包括BERT和RoBERTa等掩码语言模型&#xff0c;以及GPT、Llama…

微服务实战系列之ZooKeeper(中)

前言 昨日博主的第一篇ZooKeeper&#xff0c;对它自身具备的能力做了初步介绍。书接上文&#xff0c;马不停蹄&#xff0c;我们继续挖掘它内在的美&#xff0c;充分把握它的核心与脉络。 揭秘ZooKeeper Q&#xff1a;集群一致性协同是如何进行的 我们讲到分布式&#xff0c;…

Linux--LAMP 平台部署及应用

5.1 LAMP平台概述 LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务及其应用开发环境。LAMP是一个缩写词&#xff0c;具体包括Linux操作系统&#xff0c;Apache 网站服务器、MySQL数据库服务器&…

modbus 通信协议介绍与我的测试经验分享

1、简介 Modbus 协议是一种通信协议&#xff0c;用于工业自动化系统中的设备间通信。该协议最初由 Modicon 公司开发&#xff0c;并于 1979 年发布。 Modbus 协议通过串行通信格式进行通信&#xff0c;在物理层上支持 RS-232、RS-422 和 RS-485 等多种通信方式。在协议层面&am…

python3GUI--仿win风格天气By:PyQt5

文章目录 一&#xff0e;前言二&#xff0e;展示1.首页-白色1.首页-白色22.首页-黑色3.天气预报视频4.天气资讯-白色5.天气资讯-黑色6.收藏夹-白色7.收藏夹-黑色8.搜索9.mini-白色10.mini-黑色11.光遇天气 三&#xff0e;心得四&#xff0e;总结五&#xff0e;参考 一&#xff…

软件设计师——计算机网络(三)

&#x1f4d1;前言 本文主要是【计算机网络】——软件设计师——计算机网络的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1…

uniapp之屏幕右侧出现滚动条去掉、隐藏、删除【好用!】

目录 问题解决大佬地址最后 问题 解决 在最外层view上加上class“content”;输入以下样式。注意&#xff1a;两个都必须存在在生效。 .content {/* 跟屏幕高度一样高,不管view中有没有内容,都撑开屏幕高的高度 */height: 100vh; overflow: auto; } .content::-webkit-scrollb…

【JavaWeb】往浏览器打印一个hello world

上集:建一个web项目 第一步&#xff1a;建好Servlet类的文件 右键src&#xff0c;建一个class 就行 第二步&#xff1a;编代码 可以直接复制粘贴 用来测试的类 import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; //↓是注解&#xff0…

同义词替换降低论文抄袭率的有效性探讨 papergpt

大家好&#xff0c;今天来聊聊同义词替换降低论文抄袭率的有效性探讨&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 标题&#xff1a;同义词替换降低论文抄袭率的有效性探…

持续集成交付CICD:Jenkins使用GitLab共享库实现基于SaltStack的CD流水线部署前后端应用

目录 一、实验 1.Jenkins使用GitLab共享库实现基于SaltStack的CD流水线部署前后端应用 2.优化共享库代码 二、问题 1.Jenkins手动构建后端项目流水线报错 一、实验 1.Jenkins使用GitLab共享库实现基于SaltStack的CD流水线部署前后端应用 &#xff08;1&#xff09;GitLa…

云原生之深入解析Kubernetes Operator的最佳实践和最常见的问题分析

一、Kubernetes Operator 简介 Kubernetes Operator 是通过连接主 API 并 watch 时间的一组进程&#xff0c;一般会 watch 有限的资源类型。当相关 watch 的 event 触发的时候&#xff0c;operator 做出响应并执行具体的动作。这可能仅限于与主 API 交互&#xff0c;但通常会涉…

python快速实现简单的图片透明化

整张图片透明化的完整代码如下&#xff1a; import os import glob from PIL import Imagedef convert_to_transparent(image_path, output_folder):image Image.open(image_path)image image.convert("RGBA")data image.getdata()new_data []for item in data:…

verilog语法进阶-分布式ram原语

概述 官方提供的原语 RAM16X1S_1 #(.INIT(16h0000) // Initial contents of RAM) RAM16X1S_1_inst (.O(O), // RAM output.A0(A0), // RAM address[0] input.A1(A1), // RAM address[1] input.A2(A2), // RAM address[2] input.A3(A3), // RAM address[3…

SpringMVC上传下载文件解读

知识点 文件上传&#xff08;File Upload&#xff09;&#xff1a; 创建一个控制器方法&#xff0c;使用 MultipartFile 参数来接收上传的文件。在 Spring 配置文件中配置一个 MultipartResolver&#xff0c;常用的实现类是 CommonsMultipartResolver。在 MultipartResolver …

PyTorch官网demo解读——第一个神经网络(1)

神经网络如此神奇&#xff0c;feel the magic 今天分享一下学习PyTorch官网demo的心得&#xff0c;原来实现一个神经网络可以如此简单/简洁/高效&#xff0c;同时也感慨PyTorch如此强大。 这个demo的目的是训练一个识别手写数字的模型&#xff01; 先上源码&#xff1a; fr…