mp html Скачать - mp html -исходный код скачать

mp html

Другие ресурсы

v2.5.0

Скачать

MP-HTML

Мощный компонент текстового текста, богатый апплетом

Функциональное введение

Поддерживает использование в нескольких основных платформах апплета и uni-app
Поддерживает богатые теги (включая table , video , svg и т. Д.)
Поддерживает богатые эффекты событий (автоматический предварительный просмотр изображений, обработки ссылок и т. Д.)
Настройка поддержки карт заполнителей (загрузка, ошибки, превью)
Поддерживает богатые функции, такие как прыжок в якорь, длинное нажатие и копирование
Поддерживает большинство HTML -сущностей
Богатые плагины (поиск ключевых слов, редактирование контента, формулы latex и т. Д.)
Высокая эффективность, сильная толерантность к разлому и легкий вес ( ≈25KB , 9KB gzipped )

Посмотреть функцию введения, чтобы узнать больше

Как использовать

Нативная платформа

Метод npm
1. Установить компонентные пакеты в каталог проекта
```
npm install mp-html
```
2. Проверьте使用npm 模块в инструменте разработчика (если нет опции, он не требуется) и нажмите工具- 构建npm
3. Добавьте в файл json , который должен использовать страницу
```
{
  "usingComponents" : {
    "mp-html" : " mp-html "
  }
}
```
4. Добавьте в файл wxml , который необходимо использовать страницу
```
 < mp-html content =" {{html}} " />
```
5. Добавьте в файл js , который должен использовать страницу
```
 Page ( {
  onLoad ( ) {
    this . setData ( {
      html : '<div>Hello World!</div>'
    } )
  }
} )
```
Метод исходного кода
1. Скопируйте пакет кода ( dist/platform ) соответствующей платформы в исходном коде в каталог components и переименовать в mp-html
2. Добавьте в файл json , который должен использовать страницу
```
{
  "usingComponents" : {
    "mp-html" : " /components/mp-html/index "
  }
}
```
Следующие шаги такие же, как и выше

Проверьте быстрое начало, чтобы узнать больше

Uni-App

Метод исходного кода

Скопируйте контент в dist/uni-app в исходном коде в каталог Project Root и может быть непосредственно введен через рынок плагинов.

Добавить в файл vue , который должен использовать страницу

< template >
  < view >
    < mp-html :content = " html " />
  </ view >
</ template >
< script >
  import mpHtml from ' @/components/mp-html/mp-html '
  export default {
    // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
    components : {
      mpHtml
    },
    data () {
      return {
        html : ' <div>Hello World!</div> '
      }
    }
  }
</ script >

Метод npm
1. Установить компонентные пакеты в каталог проекта
```
npm install mp-html
```
2. Добавить в файл vue , который должен использовать страницу
```
< template >
  < view >
    < mp-html :content = " html " />
  </ view >
</ template >
< script >
  import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
  export default {
    // 不可省略
    components : {
      mpHtml
    },
    data () {
      return {
        html : ' <div>Hello World!</div> '
      }
    }
  }
</ script >
```
При введении проектов, работающих с использованием метода cli через npm , вам необходимо настроить transpileDependencies в vue.config.js . Для получения подробной информации см. #330
Если используется в nvue , скопируйте содержимое в каталоге dist/uni-app/static в static каталог проекта, в противном случае оно не будет работать

Проверьте быстрое начало, чтобы узнать больше

Свойства компонентов

свойство	тип	значение по умолчанию	иллюстрировать
контейнерный стиль	Нить		Стиль контейнера (2.1.0+)
содержание	Нить		Строка HTML для рендеринга
копия	Логический	истинный	Разрешить ли автоматическое копирование внешних ссылок при нажатии
домен	Нить		Основное доменное имя (для строчки ссылок)
Ошибка-Имг	Нить		Ссылка заполнителя, когда возникает ошибка изображения
ленивая нагрузка	Логический	ЛОЖЬ	Сообщите ли ленивая загрузка картинок
Загрузка-IMG	Нить		Ссылки заполнителей во время загрузки изображения
пауза-видео	Логический	истинный	Автоматически паузу других видео при воспроизведении видео
Предварительный просмотр	Логический	истинный	Разрешить ли изображение автоматически предварительно просмотреть при нажатии
прокручивать стойку	Логический	ЛОЖЬ	Добавить ли слой прокрутки в каждую таблицу, чтобы он мог прокручивать горизонтально в одиночку
выбираемый	Логический	ЛОЖЬ	Нажмите ли текст долго нажмите на копирование
Settitle	Логический	истинный	Установить содержимое тега заголовка на заголовок страницы
Show-Img-Menu	Логический	истинный	Должно ли нажимать изображение на долгое время, чтобы отобразить меню
в стиле тега	Объект		Установите стиль по умолчанию тега
Использование Анкор	Логический	ЛОЖЬ	Использовать ли якорные ссылки

Просмотреть свойства, чтобы узнать больше

События компонентов

имя	Время триггера
нагрузка	Когда дерево DOM загружено
готовый	Когда изображение загружено
ошибка	Когда возникает ошибка рендеринга
Imgtap	Когда изображение нажимается
Linktap	Когда ссылка нажимается

Смотрите события, чтобы узнать больше

API

Некоторые методы api предоставляются на экземплярах компонентов для вызова

имя	эффект
в	Ограничьте диапазон анкерных прыжков до свитка
Навигатето	Якорный прыжок
getText	Получите текстовое содержание
получить	Получите местоположение и размер богатого текстового контента
SetContent	Установить богатый текстовый контент
Imglist	Получите массив всех изображений
Паусемедия	Пауза воспроизведение аудио и видео (2.2.2+)
SetPlaybackrate	Установите скорость воспроизведения аудио и видео (2.4.0+)

Проверьте API, чтобы узнать больше

Плагины расширения

В дополнение к основным функциям этот компонент также обеспечивает богатые расширения и может быть выбран по мере необходимости.

имя	эффект
аудио	Музыкальный проигрыватель
редактируемый	Богатое редактирование текста
эмодзи	Анализировать смайлики
Выделять	Подсветка блока кода
отметка	Рендеринг отметки
Поиск	Поиск ключевых слов
стиль	Стили сопоставления в тегах стиля
txv-video	Используя видео Tencent
IMG-Cache	Кэш изображения от @pentatea
латекс	Рендеринг латексной формулы от @Zeng-j
карта	Дисплей карты от @whoooami

Проверьте плагин, чтобы узнать больше

Варианты использования

Официальный пример	Счастливого торгового центра	Какая жизнь	Проверка продовольственного метода	Вейму	Читайте классическую литературу

Science Review	Технологическое путешествие программиста	Диандианский блог	Отличные ноты	365 вопросов	Общие книги в том же городе

Технологический источник доля	Ваш код потрясающий	Истинный	Mottoni	Шаблон Демо	Ай Вали

Вышеуказанные рейтинги не находятся в определенном порядке, и собираются более заметные варианты использования (пожалуйста, добавьте его)

Лицензия и поддержка

Лицензия бесплатно (включая коммерческое использование), копирование или изменение этой лицензии на компонент MIT
Необходимо пройти достаточное тестирование, прежде чем использовать в производственной среде. Вы не несете ответственности за любые потери, вызванные bug плагина (вы можете самостоятельно изменить исходный код)
Свяжитесь с нами и добро пожаловать, чтобы присоединиться к группе связи QQ :
Группа 1 (полная): 699734691
Группа 2 (полная): 778239129
Группа 3: 960265313
поддерживать

Обновление журнала

v2.5.0 (20240422)
1. U play Event добавляет src и другие данные информации
2. U preview-img атрибута поддерживает настройку для all , чтобы включить данные предварительного просмотра base64
3. U editable Flug-модуль добавляет простой режим (нажмите текст, чтобы редактировать его напрямую)
4. U latex Plug-моч поддерживает детали формулы на уровне блоков
5. F Исправлена проблема потерь фонового потери в некоторых случаях таблицы.
6. F Исправлена некоторые проблемы, которые svg не может быть подробно отображаться
7. F Исправлена проблема, что стиль не может быть распознан в пакете uni-app h5 и app .
8. F в некоторых случаях исправила проблему неверного дисплея в плагинте latex .
9. F Исправлена проблема, что таблица editable плагинов не может быть удалена
10. F Исправлена проблема editable плагина uni-app Package vue3 h5 щелчок ошибки изображения
11. F Исправлена проблема, где editable плагин uni-app нажимает на таблицу без строки меню
v2.4.3 (20240121)
1. Подробности плагина карты A от @whoooami
2. F Исправлена вопрос о том, что foreignobject не может быть отображен в деталях svg
3. F Исправлена проблема неправильного отображения в случае объединенных ячеек в таблице части подробного
4. F Исправлена проблема установки object-fit в тегах img для Invalid
5. F Исправлена проблема, которую формула подключаемого модуля latex завершит детали линии
6. F Исправлена проблема, что щелчок audio не может быть отредактирована, когда обмен editable пакетами uni-app и audio . Подробности @whoooami
7. F Исправлена проблема, которую Alipay Applet устанавливает изображения ширины и высоты, которые могут отображать ненормально.
8. F Исправлена проблема, с которой апплет WeChat Package uni-app сообщит об ошибке в replace of undefined в некоторых случаях.
9. F Исправлена проблема, с которой программа uni-app Package Kuaishou Mini не отображается подробно
Руководство по обновлению можно увидеть из метода обновления 1.x