例如:
但我输入的文字符合自己设定的正则表达式的规则,则自动给当前块加上相关属性
例如当我笔记中存在成都时,自动给当前块加上“地点”:“成都”的属性
例如:
但我输入的文字符合自己设定的正则表达式的规则,则自动给当前块加上相关属性
例如当我笔记中存在成都时,自动给当前块加上“地点”:“成都”的属性
监听编辑器输入事件,仅供参考
(()=>{
// 编辑器输入事件
onEditorInput((editor) => {
// 获取光标所在元素
const currEl = getCursorElement();
console.log('当前元素', currEl);
// 获取当前块
const currBlock = currEl.closest('[data-type]');
console.log('当前块', currBlock);
});
// 编辑器输入事件
function onEditorInput(callback) {
whenElementExist(isMobile()?'body':'.layout__center').then(async element => {
// 等待笔记列表加载完毕
await sleep(40);
// 监听编辑器加载事件
observeDomChange(element, async (mutation) => {
if (mutation.target.classList?.contains("protyle-wysiwyg")) {
console.log(mutation.target);
const editor = mutation.target;
if(editor && editor.closest){
// 等待编辑器加载完毕
const protyle = editor.closest(".protyle");
if(protyle.dataset.loading !== 'finished'){
await whenElementExist(()=>editor?.closest(".protyle") === 'finished');
}
if(!editor.getAttribute('custom-listened')){
editor.setAttribute('custom-listened', true);
//console.log('listen editor');
editor.addEventListener('input', ()=>{
//console.log('editor inputed');
callback(editor);
})
}
}
}
});
});
}
// 获取光标所在元素
function getCursorElement() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
// 获取选择范围的起始位置所在的节点
const startContainer = range.startContainer;
// 如果起始位置是文本节点,返回其父元素节点
const cursorElement = startContainer.nodeType === Node.TEXT_NODE
? startContainer.parentElement
: startContainer;
return cursorElement;
}
return null;
}
// 观察元素被添加
function observeDomChange(selector, callback) {
// 定义一个回调函数,当DOM发生变化时调用
const onChange = function(mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
callback(mutation);
}
}
};
// 创建一个观察器实例,并传入回调函数
const observer = new MutationObserver(onChange);
// 配置观察选项:指定需要观察哪些变动
const config = { attributes: false, childList: true, subtree: true };
// 获取目标节点
const targetNode = typeof selector === 'string' ? document.querySelector(selector) : selector;
// 如果目标节点存在,则开始观察
if (targetNode) {
observer.observe(targetNode, config);
}
// 返回一个函数,用于停止观察
return () => {
observer.disconnect();
};
}
// 是否手机端
function isMobile() {
return !!document.getElementById("sidebar");
}
// 延迟执行
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
return new Promise(resolve => {
const checkForElement = () => {
let element = null;
if (typeof selector === 'function') {
element = selector();
} else {
element = document.querySelector(selector);
}
if (element) {
resolve(element);
} else {
requestAnimationFrame(checkForElement);
}
};
checkForElement();
});
}
})();
监听编辑器输入事件,仅供参考
(()=>{
// 编辑器输入事件
onEditorInput((editor) => {
// 获取光标所在元素
const currEl = getCursorElement();
console.log('当前元素', currEl);
// 获取当前块
const currBlock = currEl.closest('[data-type]');
console.log('当前块', currBlock);
});
// 编辑器输入事件
function onEditorInput(callback) {
whenElementExist(isMobile()?'body':'.layout__center').then(async element => {
// 等待笔记列表加载完毕
await sleep(40);
// 监听编辑器加载事件
observeDomChange(element, async (mutation) => {
if (mutation.target.classList?.contains("protyle-wysiwyg")) {
console.log(mutation.target);
const editor = mutation.target;
if(editor && editor.closest){
// 等待编辑器加载完毕
const protyle = editor.closest(".protyle");
if(protyle.dataset.loading !== 'finished'){
await whenElementExist(()=>editor?.closest(".protyle") === 'finished');
}
if(!editor.getAttribute('custom-listened')){
editor.setAttribute('custom-listened', true);
//console.log('listen editor');
editor.addEventListener('input', ()=>{
//console.log('editor inputed');
callback(editor);
})
}
}
}
});
});
}
// 获取光标所在元素
function getCursorElement() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
// 获取选择范围的起始位置所在的节点
const startContainer = range.startContainer;
// 如果起始位置是文本节点,返回其父元素节点
const cursorElement = startContainer.nodeType === Node.TEXT_NODE
? startContainer.parentElement
: startContainer;
return cursorElement;
}
return null;
}
// 观察元素被添加
function observeDomChange(selector, callback) {
// 定义一个回调函数,当DOM发生变化时调用
const onChange = function(mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
callback(mutation);
}
}
};
// 创建一个观察器实例,并传入回调函数
const observer = new MutationObserver(onChange);
// 配置观察选项:指定需要观察哪些变动
const config = { attributes: false, childList: true, subtree: true };
// 获取目标节点
const targetNode = typeof selector === 'string' ? document.querySelector(selector) : selector;
// 如果目标节点存在,则开始观察
if (targetNode) {
observer.observe(targetNode, config);
}
// 返回一个函数,用于停止观察
return () => {
observer.disconnect();
};
}
// 是否手机端
function isMobile() {
return !!document.getElementById("sidebar");
}
// 延迟执行
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
return new Promise(resolve => {
const checkForElement = () => {
let element = null;
if (typeof selector === 'function') {
element = selector();
} else {
element = document.querySelector(selector);
}
if (element) {
resolve(element);
} else {
requestAnimationFrame(checkForElement);
}
};
checkForElement();
});
}
})();
Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。
Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。
链滴是一个记录生活的地方。
记录生活,连接点滴
C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。
心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。
互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。
GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。
AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。
Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。
Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。
SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。
Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。
持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。
jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。
RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加 [css]
或 [js]
用于区分代码片段类型。
V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。
Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。
Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。
程序员是从事程序开发、程序维护的专业人员。
Thank God It's Friday! 感谢老天,总算到星期五啦!
沉迷游戏伤身,强撸灰飞烟灭。
为成为自由职业者在家办公而努力吧!
互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。
七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。
ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。
Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。