<html>
<head>
    <script src="./node_modules/aotter-text-editor/dist/aotter-text-editor/aotter-text-editor.js"></script>
</head>
<body>
    <aotter-text-editor />
</body>
</html>

==或是直接下載唯一必要檔案aotter-text-editor.js==

【Vue 使用方式】

STEP.1 安裝

npm i aotter-text-editor

STEP.2 修改main.js

// main.js
import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements, applyPolyfills } from 'aotter-text-editor/loader'

Vue.config.productionTip = false;

// 告訴Vue將其視為普通HTML Element, 而非Vue Component
Vue.config.ignoredElements = ['aotter-text-editor'];

applyPolyfills().then(() => {
    defineCustomElements(window);
});

new Vue({
    render: h => h(App)
}).$mount('#app');

STEP.3 使用

// App.vue
<template>
    <div>
        <aotter-text-editor></aotter-text-editor>
    </div>
</template>

【Nuxt 使用方式】

STEP.1 安裝

npm i aotter-text-editor

STEP.2 修改nuxt.config.js設定

// nuxt.config.js
export default {
    // 其餘的nuxt config 內容

    plugins: [
        { src: '~/plugins/aotter-text-editor', mode: 'client' }
    ],
    
    ignoredElements: [
        // 告訴Vue將其視為普通HTML Element, 而非Vue Component
        'aotter-text-editor'
    ],
}

STEP.3 新增Plugin

// ~/plugins/aotter-text-editor.js
import { defineCustomElements, applyPolyfills } from 'aotter-text-editor/loader'

applyPolyfills().then(() => {
    defineCustomElements(window)
})

STEP.4 使用

// ~/pages/index.vue
<template>
    <div>
        <aotter-text-editor></aotter-text-editor>
    </div>
</template>

【APIs for Web】

<aotter-text-editor>接受兩種方式傳入初始的編輯器內容

方式1: 透過HTML Attribute

content接受Delta格式的字串

<aotter-text-editor
    content='
        [{
            "attributes": { "color": "red" },
            "insert": "標題"
        }, {
            "attributes": { "header": 1 },
            "insert": "\n"
        }, {
            "insert": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, magnam\n"
        }]
    '
/>

方式2: 透過內部的HTML

使用此種方式時，樣式需使用inline style定義

<aotter-text-editor>
    <h1 style="color: red">標題</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, magnam</p>
</aotter-text-editor>

==注意：當兩種方式同時使用時，會以Attribute內容為優先==

除了傳入初始內容，<aotter-text-editor>也暴露了一些事件供使用一個簡單的使用範例：

<body>
    <aotter-text-editor id="my-editor">
        <h1 style="color: red">標題</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, magnam</p>
    </aotter-text-editor>
    
    <script>
        const myEditor = document.querySelector('#my-editor');
        myEditor.addEventListenser('text-change', (e) => {
            console.log(e.detail.ops)
        })
    </script>
</body>

事件名稱	觸發時機	傳入參數	備註
text-change	當編輯器內容或樣式改變時	CustomEvent	CustomEvent.detail為編輯器當前Delta內容

Guide for App

【快速上手】

Aotter-Text-Editor透過WebView達成在App端使用原生UI對編輯器的控制 Aotter-Text-Editor在全域執行環境(window)下暴露了一個aotterTextEditor: Object物件該物件下最重要的一個方法為trigger: Function，用來執行編輯器的各種功能一個簡單的JavaScript程式碼例子如下，可以改變使用者反白的文字(未反白時，為接下來輸入的文字)的字型：

aotterTextEditor.trigger('font', 'monospace');

【iOS呼叫方式】(不確定是否可用，待測試)

方式1:透過evaluateJavaScript

參照：iOS呼叫JS函數方式 - 透過evaluateJavaScript

- (void)setFontToMonospace {
    NSString *trigger = @"aotterTextEditor.trigger('font', 'monospace');"
    [self.editorView evaluateJavaScript:trigger completionHanlder:^(NSString *result, NSError *error) {
        // 處理JavaScript回傳值
    }];
}

方式2:透過JavaScriptCore

參照：iOS呼叫JS函數方式 - 透過JavaScriptCore

// BasicsViewController.swift
import JavaScriptCore

var jsContext: JSContext!

func initializeJS() {
    self.jsContext = JSContext()
    // 指定 jssource.js 檔案路徑
    if let jsSourcePath = Bundle.main.path(forResource: "jssource", ofType: "js") {
        do {
            // 將檔案內容加載到 String 
            let jsSourceContents = try String(contentsOfFile: jsSourcePath)
 
            // 通過 jsContext 對象，將 jsSourceContents 中包含的腳本添加到 Javascript 運行時
            self.jsContext.evaluateScript(jsSourceContents)
        }
        catch {
            print(error.localizedDescription)
        }
    }
}

func setFontToMonospace() {
    let font = "monospace"
 
    if let trigger = self.jsContext.objectForKeyedSubscript("aotterTextEditor.trigger") {
        // 呼叫trigger函數，將編輯器反白部分文字字型改為monospace
        if let result = trigger.call(withArguments: [font]) {
            // 處理JavaScript回傳值
        }
    }
}

self.initializeJS()
self.setFontToMonospace()

【trigger參數清單】

aotterTextEditor.trigger接受的參數為

aotterTextEditor.trigger(【編輯器的樣式名稱】, 【(可選)該樣式的內容】)

樣式名稱	功能	樣式內容	內容型別	內容是否必填？
bold	文字加粗	true \| false	Boolean	否
italic	文字斜體	true \| false	Boolean	否
underline	文字底線	true \| false	Boolean	否
strike	文字刪除線	true \| false	Boolean	否
blockquote	插入引用	true \| false	Boolean	否
code-block	插入程式碼區塊	true \| false	Boolean	否
header	插入標題	'1' \| '2' \| '3' \| ... '6'	String	==是==
list	插入表單	'ordered' \| 'bullet'	String	==是==
indent	增減縮排	'-1' \| '+1'	String	==是==
direction	行列對齊方式	null	Null	否
size	字型大小	'small' \| 'normal' \| 'large' \| 'huge'	String	==是==
color	字體顏色	待補	待補	待補
background	字體背景顏色	待補	待補	待補
font	更改字型	'serif' \| 'monospace' \| or ...	String	==是==
align	文字對齊方式	'center' \| 'right' \| 'justify'	String	==是==
clean	清除格式	null	Null	否
link	插入超連結	待補	待補	待補
image	插入圖片	url	String	==是==

FAQs

What is aotter-text-editor?

Is aotter-text-editor popular?

Is aotter-text-editor well maintained?

Package last updated on 06 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

aotter-text-editor