中文输入辅助插件

简介

SanmiWriter 是一款旨在帮助用户中文输入的智能辅助插件，它能根据用户输入的词，预测用户下一个可能输入的字或者词语，并以类似输入法的形式呈现给用户选择，以达到快速输入的目的。

安装

• 使用 npm 安装

  npm i sanmi-writer
  

  推荐使用 npm 的方式安装，它能更好地和 webpack (opens new window) 打包工具配合使用。

• 导入 SanmiWriter

  import SanmiWriter from 'sanmi-writer'
  

使用

Ⅰ、RIS诊断辅助输入法

• 在TextArea中使用

示例效果

点击查看代码

<template>
    <div>
        <textarea id="txtarea" style="width: 600px; height: 200px;"></textarea>
    </div>
</template>

<script>
import SanmiWriter from 'sanmi-writer' 
export default {
    name: "MyTextarea",
    mounted() {
        this.$nextTick(function () {
            var editor = document.getElementById('txtarea');
            var helper = new SanmiWriter.RISTyper();
            helper.bind(editor);                
        }); 
    }  
}
</script>

• 在Tiptap中使用

示例效果

点击查看代码

<template>
    <div>
        <editor-content id="tiptap" :editor="editor" style="width: 600px; height: 200px; border: 1px solid grey;"/>
    </div>
</template>

<script>
import SanmiWriter from 'sanmi-writer' 
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
export default {
    name: "MyTiptap",
    data() {
        return {
            editor: null
        }
    },
    created() {
        this.editor = new Editor({
            content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
            extensions: [
                StarterKit,
            ]
        });  
    },
    mounted() {  
        this.$nextTick(function () {    
            var editor = document.getElementById('tiptap');
            var helper = new SanmiWriter.RISTyper();
            helper.bind(editor);                      
        });    
    },
    components: {
        EditorContent,
    }, 
    beforeDestroy() {
        this.editor.destroy()
    }   
}
</script>

<style>
    .ProseMirror {
        margin: 0 !important;
        width: 100%;
        resize: none;
        padding: 0 3px;
        height: 100%;
        border: 1px solid #dee1e7;
        display: block;
        text-align: left;
        overflow: auto;
        box-sizing: border-box;
    }
</style>

• 在Quill中使用

示例效果

点击查看代码

<template>
    <div>
        <quill-editor id="quill" v-model="content" style="width: 600px; height: 200px;"></quill-editor>
    </div>
</template>

<script>
import SanmiWriter from 'sanmi-writer'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
    name: "MyQuill",
    data() {
        return {
            content: '<h2>I am Example</h2>',
        }
    },
    mounted() {
        this.$nextTick(function () {
            var editor = document.getElementById('quill');
            var helper = new SanmiWriter.RISTyper();
            helper.bind(editor);                  
        });       
    },
    components: {
        quillEditor
    }
}
</script>

• 在wangEditor中使用

示例效果

点击查看代码

<template>
    <div>
        <div id="waneditor" style="width: 600px; height: 200px;"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div>
    </div>
</template>

<script>
import SanmiWriter from 'sanmi-writer'
import Editor from 'wangeditor'
export default {
    name: "MyWaneditor",
    data() {
        return {
            editor: null,
            editorData: ''
        }
    },
    mounted() {  
        var editor = new Editor('#waneditor');  
        editor.config.onchange = (newHtml) => {
            this.editorData = newHtml
        }  
        editor.create();
        this.editor = editor;

        this.$nextTick(function () {
            var editor = document.getElementById('waneditor');
            var helper = new SanmiWriter.RISTyper();
            helper.bind(editor);              
        });   
    },
    beforeDestroy() {
        this.editor.destroy();
        this.editor = null;
    }  
}
</script>