|
|
@@ -0,0 +1,348 @@
|
|
|
+<template>
|
|
|
+ <div class="wrapper">
|
|
|
+ <Editor
|
|
|
+ v-model="content"
|
|
|
+ :init="editorInit"
|
|
|
+ :api-key="apiKey"
|
|
|
+ output-format="text"
|
|
|
+ @change="handlerFunction"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+/* eslint-disable */
|
|
|
+import { reactive, ref, onMounted, defineEmits } from "vue";
|
|
|
+import Editor from "@tinymce/tinymce-vue";
|
|
|
+import { faker } from "@faker-js/faker";
|
|
|
+import {searchTwitterUser} from "../../http/publishApi"
|
|
|
+
|
|
|
+// import Quill from "quill";
|
|
|
+// import "quill/dist/quill.snow.css";
|
|
|
+
|
|
|
+// import mention from "quill-mention"; // 引入mention 组件
|
|
|
+
|
|
|
+// import "quill-mention/dist/quill.mention.min.css";
|
|
|
+
|
|
|
+// 为quill 注册mention 组件
|
|
|
+
|
|
|
+// Quill.register({
|
|
|
+// "modules/mention": mention,
|
|
|
+// });
|
|
|
+
|
|
|
+// let editor = reactive({});
|
|
|
+// const editorOptions = {
|
|
|
+// placeholder: "", // 文本提示信息
|
|
|
+
|
|
|
+// modules: {
|
|
|
+// toolbar: [], // 定义菜单栏 （粗体，下划线，颜色，排序）
|
|
|
+// mention: {
|
|
|
+// // 重点： 提醒功能配置项
|
|
|
+
|
|
|
+// allowedChars: /^[A-Za-z\s]*$/, // 正则匹配
|
|
|
+// mentionDenotationChars: ["@"], // 匹配符号，匹配到@符号弹出提醒框
|
|
|
+// offsetLeft: 4,
|
|
|
+// source: (searchTerm, renderList, mentionChar) => {
|
|
|
+// // 数据源（遍历成{id, value}形式）
|
|
|
+// console.log("111", searchTerm);
|
|
|
+// const values = [
|
|
|
+// {
|
|
|
+// id: 1,
|
|
|
+// value: "sdsd",
|
|
|
+// },
|
|
|
+// {
|
|
|
+// id: 2,
|
|
|
+// value: "kkkie",
|
|
|
+// },
|
|
|
+// ];
|
|
|
+// renderList(values, searchTerm); // 渲染函数（生成提醒框）
|
|
|
+// },
|
|
|
+
|
|
|
+// onSelect: (data, insertItem) => {
|
|
|
+// // 注意：选中后的回调函数
|
|
|
+// const item = {
|
|
|
+// text: `@${data.value}`,
|
|
|
+// name: data.value,
|
|
|
+// id: data.id,
|
|
|
+// };
|
|
|
+// insertItem(data); // 注意：这个函数必须加上，有这个才会在文本框显示选中的值
|
|
|
+// getText(data);
|
|
|
+// // this.onSelectd(item) // 返回给后端的选中提醒的人
|
|
|
+// },
|
|
|
+// },
|
|
|
+// },
|
|
|
+// };
|
|
|
+let content = ref("");
|
|
|
+const emits = defineEmits(["changeAccountVal"])
|
|
|
+
|
|
|
+// const onHandleChange = () => {};
|
|
|
+// const getText = () => {
|
|
|
+// console.log(editor.getText());
|
|
|
+// };
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // let container = document.getElementById('quill');
|
|
|
+ // editor = new Quill(container, editorOptions);
|
|
|
+ // editor.on('text-change', () => {
|
|
|
+ // console.log(editor.getText())
|
|
|
+ // });
|
|
|
+});
|
|
|
+const handlerFunction = (value) => {
|
|
|
+ emits('changeAccountVal', content.value);
|
|
|
+ console.log("handlerFunction", content.value);
|
|
|
+};
|
|
|
+
|
|
|
+var fakeServer = (function () {
|
|
|
+ /* Use TinyMCE's Promise shim */
|
|
|
+ // var Promise = tinymce.util.Promise;
|
|
|
+
|
|
|
+ /* Some user profile images for our fake server (original source: unsplash) */
|
|
|
+ var images = [
|
|
|
+ "Abdullah_Hadley",
|
|
|
+ "Abriella_Bond",
|
|
|
+ "Addilynn_Dodge",
|
|
|
+ "Adolfo_Hess",
|
|
|
+ "Alejandra_Stallings",
|
|
|
+ "Alfredo_Schafer",
|
|
|
+ "Aliah_Pitts",
|
|
|
+ "Amilia_Luna",
|
|
|
+ "Andi_Lane",
|
|
|
+ "Angelina_Winn",
|
|
|
+ "Arden_Dean",
|
|
|
+ "Ariyanna_Hicks",
|
|
|
+ "Asiya_Wolff",
|
|
|
+ "Brantlee_Adair",
|
|
|
+ "Carys_Metz",
|
|
|
+ "Daniela_Dewitt",
|
|
|
+ "Della_Case",
|
|
|
+ "Dianna_Smiley",
|
|
|
+ "Eliana_Stout",
|
|
|
+ "Elliana_Palacios",
|
|
|
+ "Fischer_Garland",
|
|
|
+ "Glen_Rouse",
|
|
|
+ "Grace_Gross",
|
|
|
+ "Heath_Atwood",
|
|
|
+ "Jakoby_Roman",
|
|
|
+ "Judy_Sewell",
|
|
|
+ "Kaine_Hudson",
|
|
|
+ "Kathryn_Mcgee",
|
|
|
+ "Kayley_Dwyer",
|
|
|
+ "Korbyn_Colon",
|
|
|
+ "Lana_Steiner",
|
|
|
+ "Loren_Spears",
|
|
|
+ "Lourdes_Browning",
|
|
|
+ "Makinley_Oneill",
|
|
|
+ "Mariana_Dickey",
|
|
|
+ "Miyah_Myles",
|
|
|
+ "Moira_Baxter",
|
|
|
+ "Muhammed_Sizemore",
|
|
|
+ "Natali_Craig",
|
|
|
+ "Nevaeh_Cates",
|
|
|
+ "Oscar_Khan",
|
|
|
+ "Rodrigo_Hawkins",
|
|
|
+ "Ryu_Duke",
|
|
|
+ "Tripp_Mckay",
|
|
|
+ "Vivianna_Kiser",
|
|
|
+ "Yamilet_Booker",
|
|
|
+ "Yarely_Barr",
|
|
|
+ "Zachary_Albright",
|
|
|
+ "Zahir_Mays",
|
|
|
+ "Zechariah_Burrell",
|
|
|
+ ];
|
|
|
+
|
|
|
+ /* Create an array of 200 random names using faker.js */
|
|
|
+ var userNames = [];
|
|
|
+ for (var i = 0; i < 200; i++) {
|
|
|
+ userNames.push(faker.name.findName());
|
|
|
+ }
|
|
|
+
|
|
|
+ /* This represents a database of users on the server */
|
|
|
+ var userDb = {};
|
|
|
+ // /docs/images/unsplash/uifaces-unsplash-portrait-' + images[Math.floor(images.length * Math.random())] + '.jpg
|
|
|
+ userNames
|
|
|
+ .map(function (fullName) {
|
|
|
+ var id = fullName.toLowerCase().replace(/ /g, "");
|
|
|
+ return {
|
|
|
+ id: id,
|
|
|
+ name: fullName,
|
|
|
+ fullName: fullName,
|
|
|
+ description: faker.name.jobTitle(),
|
|
|
+ image: "https://img2.baidu.com/it/u=4244073868,573478915&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
|
|
|
+ };
|
|
|
+ })
|
|
|
+ .forEach(function (user) {
|
|
|
+ userDb[user.id] = user;
|
|
|
+ });
|
|
|
+
|
|
|
+ /* This represents getting the complete list of users from the server with the details required for the mentions "profile" item */
|
|
|
+ var fetchUsers = function () {
|
|
|
+ return new Promise(function (resolve, _reject) {
|
|
|
+ /* simulate a server delay */
|
|
|
+ setTimeout(function () {
|
|
|
+ var users = Object.keys(userDb).map(function (id) {
|
|
|
+ return {
|
|
|
+ id: id,
|
|
|
+ name: userDb[id].name,
|
|
|
+ image: userDb[id].image,
|
|
|
+ description: userDb[id].description,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ resolve(users);
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ /* This represents requesting all the details of a single user from the server database */
|
|
|
+ var fetchUser = function (id) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ /* simulate a server delay */
|
|
|
+ setTimeout(function () {
|
|
|
+ if (Object.prototype.hasOwnProperty.call(userDb, id)) {
|
|
|
+ resolve(userDb[id]);
|
|
|
+ }
|
|
|
+ reject('unknown user id "' + id + '"');
|
|
|
+ }, 300);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ fetchUsers: fetchUsers,
|
|
|
+ fetchUser: fetchUser,
|
|
|
+ };
|
|
|
+})();
|
|
|
+
|
|
|
+/* These are "local" caches of the data returned from the fake server */
|
|
|
+var usersRequest = null;
|
|
|
+var userRequest = {};
|
|
|
+
|
|
|
+var mentions_fetch = function (query, success) {
|
|
|
+ /* Fetch your full user list from somewhere */
|
|
|
+ // if (usersRequest === null) {
|
|
|
+ // usersRequest = fakeServer.fetchUsers();
|
|
|
+ // }
|
|
|
+ // usersRequest.then(function (users) {
|
|
|
+ // /* `query.term` is the text the user typed after the '@' */
|
|
|
+ // users = users.filter(function (user) {
|
|
|
+ // return user.name.indexOf(query.term.toLowerCase()) !== -1;
|
|
|
+ // });
|
|
|
+
|
|
|
+ // users = users.slice(0, 10);
|
|
|
+
|
|
|
+ // /* Where the user object must contain the properties `id` and `name`
|
|
|
+ // but you could additionally include anything else you deem useful. */
|
|
|
+ // console.log('users',users)
|
|
|
+ // success(users);
|
|
|
+ // });
|
|
|
+ console.log('searchTwitterUser', query)
|
|
|
+ searchTwitterUser({
|
|
|
+ params: {
|
|
|
+ name : query.term
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code == 0) {
|
|
|
+ let dataList = [];
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let item = res.data[i];
|
|
|
+ dataList.push({
|
|
|
+ id: i + '',
|
|
|
+ name: item.screenName,
|
|
|
+ image: item.avatarlUrl,
|
|
|
+ description: item.name
|
|
|
+ })
|
|
|
+ }
|
|
|
+ success(dataList);
|
|
|
+ }
|
|
|
+ console.log('searchTwitterUser',res)
|
|
|
+ })
|
|
|
+};
|
|
|
+
|
|
|
+var mentions_menu_hover = function (userInfo, success) {
|
|
|
+ /* Request more information about the user from the server and cache it locally */
|
|
|
+ if (!userRequest[userInfo.id]) {
|
|
|
+ userRequest[userInfo.id] = fakeServer.fetchUser(userInfo.id);
|
|
|
+ }
|
|
|
+ userRequest[userInfo.id].then(function (userDetail) {
|
|
|
+ var div = document.createElement("div");
|
|
|
+
|
|
|
+ div.innerHTML =
|
|
|
+ '<div class="card">' +
|
|
|
+ '<img class="avatar" src="' +
|
|
|
+ userDetail.image +
|
|
|
+ '"/>' +
|
|
|
+ "<h1>" +
|
|
|
+ userDetail.fullName +
|
|
|
+ "</h1>" +
|
|
|
+ "<p>" +
|
|
|
+ userDetail.description +
|
|
|
+ "</p>" +
|
|
|
+ "</div>";
|
|
|
+
|
|
|
+ success(div);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+var mentions_menu_complete = function (editor, userInfo) {
|
|
|
+ var span = editor.getDoc().createElement("span");
|
|
|
+ span.className = "mymention";
|
|
|
+ span.setAttribute("data-mention-id", userInfo.id);
|
|
|
+ span.appendChild(editor.getDoc().createTextNode("@" + userInfo.name));
|
|
|
+ return span;
|
|
|
+};
|
|
|
+
|
|
|
+var mentions_select = function (mention, success) {
|
|
|
+ console.log('mention', mention, success)
|
|
|
+ /* `mention` is the element we previously created with `mentions_menu_complete`
|
|
|
+ in this case we have chosen to store the id as an attribute */
|
|
|
+ // var id = mention.getAttribute("data-mention-id");
|
|
|
+ // /* Request more information about the user from the server and cache it locally */
|
|
|
+ // if (!userRequest[id]) {
|
|
|
+ // userRequest[id] = fakeServer.fetchUser(id);
|
|
|
+ // }
|
|
|
+ // userRequest[id].then(function (userDetail) {
|
|
|
+ // var div = document.createElement("div");
|
|
|
+ // div.innerHTML =
|
|
|
+ // '<div class="card">' +
|
|
|
+ // '<img class="avatar" style="width: 40px" src="' +
|
|
|
+ // userDetail.image +
|
|
|
+ // '"/>' +
|
|
|
+ // "<h1>" +
|
|
|
+ // userDetail.fullName +
|
|
|
+ // "</h1>" +
|
|
|
+ // "<p>" +
|
|
|
+ // userDetail.description +
|
|
|
+ // "</p>" +
|
|
|
+ // "</div>";
|
|
|
+ // success();
|
|
|
+ // });
|
|
|
+};
|
|
|
+
|
|
|
+const apiKey = ref("qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc");
|
|
|
+let editorInit = reactive({
|
|
|
+ plugins: ["mentions"],
|
|
|
+ content_style:
|
|
|
+ ".mymention{ color: blue; }" +
|
|
|
+ "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
|
|
|
+ mentions_selector: ".mymention",
|
|
|
+ mentions_fetch: mentions_fetch,
|
|
|
+ mentions_menu_complete: mentions_menu_complete,
|
|
|
+ mentions_select: mentions_select,
|
|
|
+ // mentions_menu_hover: mentions_menu_hover,
|
|
|
+ mentions_item_type: "profile",
|
|
|
+ toolbar: false,
|
|
|
+ menubar: false,
|
|
|
+ branding: false,//tiny技术支持信息是否显示
|
|
|
+ statusbar: false,
|
|
|
+ paste_data_images: false,
|
|
|
+ width: 264,
|
|
|
+ height: 50,
|
|
|
+ border: false,
|
|
|
+ resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
|
|
|
+ placeholder: "Enter account number", //textarea中的提示信息
|
|
|
+ // language: "zh_CN", //语言类型
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/deep/ .tox-tinymce {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+</style>
|
