1. wangEditor テキストエディタの使用
公式ウェブサイト：https://www.wangeditor.com/v5/installation.html#npm
1. インストールと使用方法
インストール
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save
main.js にスタイルを導入する
import '@wangeditor/editor/dist/css/style.css'
エディターを使用してページに js を導入します
import {
Editor, Toolbar } from "@wangeditor/editor-for-vue";
components: {
Editor, Toolbar },
テンプレート
<template>
<div>
<div style="border: 1px solid #ccc; margin-top: 10px">
<!-- 工具栏 -->
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
/>
<!-- 编辑器 -->
<Editor
style="height: 400px; overflow-y: hidden"
:defaultConfig="editorConfig"
v-model="html"
@onChange="onChange"
@onCreated="onCreated"
/>
</div>
</div>
</template>
js
<script>
import {
Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
name: "MyEditor",
components: {
Editor, Toolbar },
data() {
return {
editor: null,
html: "<p>hello world</p>",
toolbarConfig: {
},
editorConfig: {
placeholder: "请输入内容...",
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
},
},
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
},
onChange(editor) {
console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
},
},
mounted() {
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
},
};
</script>
ここまで編集すれば正常に表示できるようになります
2. 写真やビデオをアップロードする
1) バックグラウンド インターフェースへのアップロードは、ドキュメントの構成に従って直接実行できます。インターフェースの戻り形式もドキュメントと一致している必要があります。2) カスタム アップロード (通常は他のサーバーにアップロードされますが、私のものは
Qiniu クラウド サーバーにアップロードされます)
データ設定で写真とビデオをアップロードする
editorConfig: {
placeholder: "请输入内容...",
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
uploadImage: {
customUpload: async (file, insertFn) => {
let resultUrl = await this.upqiniu(file, file.name);
insertFn(resultUrl);
},
},
uploadVideo: {
customUpload: async (file, insertFn) => {
let resultUrl = await this.upqiniu(file, file.name);
insertFn(resultUrl);
},
},
},
},
this.upqiniu は、サーバーをアップロードし、最後にインターフェイスから返されたアドレスを返すために書いたコードです。
upqiniu(file, name) {
return new Promise((resolve) => {
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: null, // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
};
let putExtra = {
fname: `upload_pic_${
name}`, //文件原文件名
params: {
}, //用来放置自定义变量
mimeType: null, //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
};
var observable = qiniu.upload(
file,
`upload_pic_${
name}`,
this.token,
putExtra,
config
);
observable.subscribe({
next: (result) => {
// 主要用来展示进度
},
error: (errResult) => {
// 失败报错信息
},
complete: (result) => {
// 接收成功后返回的信息
let url = "http://image.gewu.pro/" + result.key;
resolve(url);
},
});
});
},
2.アンカーリンクを追加する
リッチテキストエディタで編集する際、左側にタイトルが表示され、編集後に左側のタイトルをクリックすると対応するタイトル位置にジャンプできることが要件ですが、ここではアンカーリンクを使用して実現しています。
1. エディットボックスのonchangeイベントでh1-h2のタグを取り出しアンカーリンクを追加します。
onChange() {
let reg = /<h[1-6][\s\S]*?h[1-6]>/g;
this.hArr = this.html.match(reg);//所有的h标签
this.titleArr = [];//添加锚链接的标题
if (this.hArr) {
this.hArr.forEach((item, i) => {
// 标题
let text = item.replace(/<[^>]+>/g, "");
this.titleArr.push(`<a href="#miao${
i}">${
text}</a>`);
});
}
},
2.エディタで保存するときに記事のタイトルにIDを追加します
let zhengwen = JSON.parse(JSON.stringify(this.html));
if (this.hArr) {
this.hArr.forEach((item, i) => {
// 替换文章标签
let itemArr = item.split("");
itemArr.splice(3, 0, ` id="miao${
i}"`);
let xinItem = itemArr.join("");
zhengwen = zhengwen.replace(item, xinItem);
});
}
// 最后将zhengwen （编辑器的文章内容）和 titleArr 单独传给接口查看的时候就能实现锚链接的功能
