A lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and services.
This is the documentation for v5. If you are looking for docs of v4 you can get them here.
Features
- Supported: supports IE8+ (assuming
Promiseis polyfilled) - Plugin Based: only load what you want.
- Isomorphic: Can be used both on server and client side.
- Customizable: So much that creating a custom plugin is also few lines of code.
- Modern: written in ES2015
Contents
Installation
To install the stable version:
npm install --save embed-js
CDN
Basic Usage
You need to use plugins or presets to do anything. By default embed-js does nothing.
Let's assume that the HTML structure is as written below
<div id="element">
<!--===== your string here =======-->
</div>
Creating an instance of embed.js
import EmbedJS from 'embed-js'
import url from 'embed-plugin-url'
import emoji from 'embed-plugin-emoji'
const x = new EmbedJS({
input: document.getElementById('element'),
plugins: [
url(),
emoji()
]
})
Next step is replacing the original text with the processed text.
//Render the result
x.render();
There may be cases where you just want the processed string to use it according to your need. You can get it by the following method. This canbe used on the server side to get the string. Still if the plugin involves interactions, you will have to load it onthe client side.
//Get the resulting string
x.text().then(({ result }) => {
console.log(result); //The resulting string
})
If you wan't to destroy the instance. It will also replace the processed string with the original string.
//Destroy the instance
x.destroy()
Options
| option | default | Description |
|---|---|---|
| plugins | [] | Accepts an array of plugins. |
| preset | null | Accepts a preset. Currently accpets only one preset. It can be combined with plugins. |
| inlineEmbed | true | If case you want to to embed contents at the end of texts, turn this to false. |
| replaceUrl | false | Useful when inlineEmbed is set to true. Replace text with the embed. |
| fetch | window.fetch or window.unfetch |
If you are willing to use the library on both server and client side you need to pass an isomorphic fetch library like isomorphic-unfetch or isomorphic-fetch. This is only needed if you are using a plugin that has to make a HTTP request. |
Development
- Fork the repo
- clone the repo then
cd embed.js - create a new branch
- Then
npm install && yarn build:watch - Create a PR
Note: This projects adheres to a Code of Conduct.
License
MIT © Ritesh Kumar
-
实际效果 效果演示地址 安装插件 pnpm install vue-pdf-embed pnpm install vue3-pdfjs 左侧pdf菜单组件 <template> <div class="pdf-view-list"> <div class="item active-item" v-for="(item, index) in pageTotalNum" @click="i
-
本来想的很简单 觉得 把要展示到第几页的页码给到v-for的 i in PageRange 中的PageRange即可 但是本地没问题 打包部署就不显示pdf 1.先安装vue-pdf-embed 具体的安装使用方法可以参考这位博主的博文 安装使用中可能遇到的问题都有写 很详细 https://blog.csdn.net/duanhy_love/article/details/124662550
-
描述 内嵌内容容器，在 Weex 容器中通过 <web> 实现，在 Web 容器中通过 <iframe> <embed> 实现。 安装 $ npm install rax-embed --save 属性 属性 类型 默认值 必填 描述 支持 src String - ✘ 嵌入的页面地址 urlParam String | Object - ✘ 传递给子页面的参数 page_inside_e
-
在C++程序中可以内嵌一个ZendVM，实现与PHP程序的交互。需要依赖PHP官方的embed模块。编译PHP时需要增加--enable-embed参数。 编写程序 #include "phpx_embed.h" #include <iostream> using namespace php; using namespace std; int main(int argc, char * arg
-
The Page Embed plugin embeds a page in the content using an iframe (Inline frames). The size of these iframes can be configured to be responsive or another user-defined dimension. The ability to use i
-
The Page Embed plugin is a premium plugin from Tiny that embeds a page in the content using an iframe (Inline frames). The Page Embed plugin allows an external webpage to be embedded in an HTML docume
-
Live example This example shows how to use the Page Embed plugin to embed a page in the content in a responsive or exactly sized iframe.For more information on the Page Embed plugin, see the docs. Tin
-
描述 (Description) HTML 标记表示外部应用程序或交互式内容的容器。 例子 (Example) <!DOCTYPE html> <html> <head> <title>HTML Embed Tag</title> </head> <body> <embed src = "/html/yourfile.mid" width = "250"