تنزيل tiptap appmsg editor - تنزيل رمز مصدر tiptap appmsg editor

tiptap appmsg editor

موارد أخرى

1.0.0

تنزيل

Tiptap-appmsg-editor

مثال على محرر حسابات WeChat العامة المبنية على Tiptap يدعم النسخ المستندة إلى النوع إلى منصة WeChat العامة ، ويدعم المطورين لتطوير مكتبات الأنماط ومكتبات القالب كإدراج للمحتوى ؛ مثل 135editor ، ييبان ، إلخ.

أمثلة عبر الإنترنت

Vite+Vue3 إصدار

Vue-tiptap-appmsg-editor

قائمة نقاط الوظيفة

نمط النص (حجم الخط ، اللون ، تسليط الضوء ، ارتفاع الخط ، ارتفاع الخط ...)
نمط نص واضح
تخطيط المحتوى (المحاذاة ، التباعد ، المسافة البادئة ، العائمة)
التاريخ التراجع/إعادة
إدراج الصورة
محتوى كتلة الكود
محتوى الفيديو
تقسيم الخط
قائمة مرتبة/غير مرتبة
ارتباط تشعبي
ارتباط تشعبي الصورة
WeChat Applet
إدراج التعبير
مواصفات تطوير مكتبة نمط الرسوم
أدخل أنماط وقوالب الرسوم
انقر بنقرة واحدة نسخ
عدد الكلمات

تحديث مستمر ...

دليل الملف

 tiptap-appmsg-editorsrc
├─js
| ├─editor.js // tiptap编辑器实例
| ├─function.js // 编辑器功能实现
| ├─sidebar.js // 侧边栏实现
| ├─svg.js // svg图标插入
| ├─toolbar.js // 工具栏实现
├─images
|   ├─svg
|   ├─sprite
|   |   └emoji_sprite.png // 表情雪碧图
|   ├─icon
|   |  ├─icon-image-link.png // 图片超链接标识图
|   |  └icon-weapp-link.png // 小程序标识图
├─main.js
├─templates // 样式组件和内容模板
├─styles
|   ├─base.css
|   ├─editor.css  // 编辑器默认样式
|   ├─index.css // 页面主样式
|   └reset.css
├─plugins
|    ├─tabs // tab实现
|    ├─modal // 弹窗实现
|    ├─dropdown // 下拉菜单实现
|    ├─clickoutside // 点击外部关闭实现

محرر مخصص

تطوير محرر نمط مخصص بناءً على هذا المثال ، تحتاج إلى الانتباه إلى أنماط المحتوى

نظرًا لوجود النمط الافتراضي لمحتوى المقالة ، من أجل ضمان وجود الأنماط التالية في منطقة تحرير Tiptap والشريط الجانبي

. tiptap . ProseMirror {
  min-height : 960 px ;
  outline : none;
  color : rgba ( 0 , 0 , 0 , 0.9 );
  font-size : 17 px ;
  line-height : 1.6 ;
  text-align : justify;
}

. ProseMirror * {
  max-width : 100 % ;
  margin : 0 ;
  padding : 0 ;
  box-sizing : border-box !important ;
  word-wrap : break-word !important ;
}

. ProseMirror p {
  clear : both;
  min-height : 1 em ;
}

. ProseMirror > p {
  margin-top : 0 ;
  margin-bottom : 24 px ;
}

لمزيد من أنماط المحتوى ، يمكنك رؤية ملف النمط الافتراضي لمحتوى الحساب الرسمي: src/styles/editor.css

تطور مكون النمط

للمكونات المتوفرة والمرنة والتكيفية ، تحتاج إلى تطويرها وفقًا لبعض المواصفات

العلامات الأساسية

القسم: حاوية محتوى المكون ، مما يتيح نمط جميع قيم النمط

P: الفقرات النصية ، فقط محاذاة النص وأنماط الفقرة الأخرى مسموح بها. إذا لم يتم تضمين محتوى النص في علامة P ، فسيتم إضافته تلقائيًا بعد التحليل.

SPAN: حاوية نمط النص ، فقط أنماط نصية مثل اللون ، حجم الخط ، عائلة الخط ، وما إلى ذلك مسموح بها.

IMG: عنصر الصورة ، اترك جميع قيم النمط

علامات العلامات

العلامة التالية هي عقدة نمط علامة Tiptap ، والتي يتم إضافتها تلقائيًا بعد تحليل محتوى الإدراج ، دون عناية إضافية

إذا أدخل المحتوى

 < section style =" color: grey; text-decoration: underline " >
  < p >
    < span style =" font-size: 12px " > COMPANY BROCHURE </ span >
  </ p >
</ section >

نتيجة الإدراج الفعلي

 < section style =" color: grey; text-decoration: underline " >
  < p >
    < u >
      < span style =" font-size: 12px " > COMPANY BROCHURE </ span >
    </ u >
  </ p >
</ section >