머리말:
회사의 개발 프로젝트에는 이모티콘 플러그인을 사용해야하므로 오랫동안 바이두어에있었습니다. 많은 이모티콘 플러그인은 많은 JS 파일을 참조해야하며 기성품 데모가 없습니다. 일부 플러그인은 많은 그림을 참조하고 각 이모티콘은 다시 요청해야합니다. 이러한 기능의 경우 많은 JS와 IMG를 소개하려는 노력의 가치가 없습니다 ...
따라서 블로거는 향후 쉽게 사용할 수 있도록 작은 "표현 플러그인"을 코딩했습니다.
기능
기능 : 표현식에 해당하는 문자 형식을 배경으로 전달하고 배경은 문자열을 반환하고 프론트 엔드는 문자열을 해당 표현식으로 구문 분석하여 페이지에 표시합니다.
사용 방법 :
옵션에서 필요한 매개 변수를 구성하십시오
var 옵션 = {emojiarray : [ 'shener'], // 이모티콘 문자열 배열을 채우십시오. 'emojicontainer', // // 이모티콘 SendId를 저장하는 컨테이너 객체 : 'send', // 정보를 보내는 버튼 idemojitranslatecls : 'emoji-comment', // emoji로 변환 해야하는 컨테이너 클래스 이름은 자동으로 렌더링하기 위해 클래스를 추가하는 데만 필요합니다. 이모티콘 (옵션); text.init ();대략적인 효과의 스크린 샷 : (UI는 필요에 따라 아름답게 할 수 있습니다)
Send를 클릭 한 후 배경으로 전송 된 데이터는 다음과 같습니다.
이모티콘 플러그인의 세 가지 원칙 :
• 표현식을 표시하는 방법?
CSS Sprites (Picture Integration Technology)는 먼저 배경 아이콘을 설정 한 다음 각 작은 아이콘의 위치, 너비, 높이를 정의하고 표시하려는 표현식을 표시합니다. 이 기간 동안 발생하는 문제 : 표시된 표현식의 크기를 제어하는 방법은 무엇입니까? 내가 생각한 첫 번째는 배경 크기 방법이지만 위치를 재정의하는 것은 매우 "물리적"입니다. 나중에, 미래가 어두워지면, 나는 속성 변환을 발견했다 : 스케일 (1.5); 현재 요소 스케일링 비율을 제어하기 위해 하하, 한 줄의 코드가 수행됩니다 ~ 표현이 크거나 작아 크기에 만족하지 않습니까? 모든 코드를 완료하십시오 • 입력 상자에 이모티콘을 표시하는 방법은 무엇입니까?
처음에 나는 입력의 텍스트 주변을 선택했지만 입력 상자에 이모티콘 "부록"을 넣으면 아이콘이 표시되지 않았습니다. 나중에, 나는 div를 시도한 다음 "부록"을 시도한 후 표현이 성공적으로 표시 될 수 있음을 발견했지만 DIV는 텍스트를 입력 할 수 없었습니다.
예비 아이디어 : 실시간으로 DIV에 Textarea 값을 추가하기 위해 입력을 사용하여 사용하십시오. 마찬가지로, 이것은 감사하지 않습니다 ~ 계속 탐구합니다 ...
나중에 나는 많은 속성을 발견했다. 만족스러운 = "참"이며 행복하게 만족할 수 있습니다.
처음에는 SPAN을 사용하여 Emoticon 아이콘을 호스팅하지만 DIV 또는 SPAN 태그가있는 이미지를 배치하면 Contentestable이 기본적으로 마지막 Div/Span에 추가되므로 Emoticon 아이콘을 입력 한 다음 텍스트를 입력하게됩니다. 마지막 텍스트는 마지막 div/span에 있으므로 텍스트가 표시되지 않습니다. 좋아 ... 너무 피곤 해요 ...
div/span이 불가능하기 때문에 IMG 태그를 사용하여 표현식을 호스팅하고 이제 정상적으로 입력 할 수 있습니다.
[Contenteditable은 문제가 있고, 풍부한 텍스트를 지원하고, 불충분하며, 사용자 경험이 좋지 않습니다. 】
예를 들어, 사용자가 붙여 넣으면 자동으로 형식을 가져옵니다. 예는 다음과 같습니다.
이것은 풍부한 텍스트 기능을 제거하기위한 온라인 마스터의 코드입니다. 구체적인 참조 : 마스터 블로그 게시물
• 사진과 텍스트를 변환하는 방법?
현재 강력한 규칙을 사용해야합니다. 먼저 html ()을 사용하여 컨텐츠를 얻은 다음 컨텐츠를 처리하십시오. 텍스트로 변환 :
1 content.replace (/<img/b [^>]*/, imgobj [j]) // 모든 <img/> 일치하고 해당 형식으로 바꾸십시오.
2 imgobj.push (형식 + img [i] .getAttribute ( "alt") + 형식); // 여기서 형식을 사용합니다. 그래서 그것은 이것과 유사한 형식입니다 : 두려운 : 이미지로 변환하려면 :
var keys = '//+|-|||| ball | a | ab | abc | abcd | abcd | accept ...'// 여기에 나열됩니다. regex = new regexp ( ':(' + keys + ') :', 'g'), // // 형식과 같은 형식과 일치합니다. $ (obj [i]). cherver (regex, emoji) // 함수 emoji () {var key = argument []; return '<img src = ""class = "emoji emoji emoji emoji emoji emoji emoji emoji emoji. 해당 IMG 형식}전체 플러그인의 코드 형식도 일반적인 캡슐화 방법입니다.
// emoji 객체 mutable 속성 함수 이모 지 (옵션) {this.emoji = 옵션.emojiarray, this.textAreaid = 옵션 .textAreaid, this.loadid = 옵션 .loadid, this.sendid = 옵션. 옵션 .emojitranslatecls;}// 인스턴스가 생성 될 때마다 위의 속성이 재생되므로 고정 메소드의 경우 더 많은 메모리를 소비합니다. 이것은 환경 친화적이거나 효율적이지 않습니다. 따라서, 변하지 않은 특성 및 방법은 프로토 타입 객체에 직접 정의 될 수있다. 현재 모든 고정 된 방법은 실제로 동일한 메모리 주소이며 프로토 타입 객체를 가리키므로 작동 효율을 향상시킵니다.
emoji.prototype = {init : function () {// 일부 초기화 메소드를 this.toemoji (); this.loademoji (); this.bindevent ();}, bindevent : function () {}, toemoji : function () {}, // 서버 데이터를 이모티콘으로 변환 totext : function () {} // 텍스트로 변환 : function () {} // emoticons}자, 이러한 표현식 플러그인이 완료 되더라도 묶기 쉽습니까? 현재, 당신은 당분간 jQuery에 의존해야합니다. 에너지가있는 경우 기본 J를 기반으로 O (∩_AT) O를 계속 땜질하십시오. 특정 구현 코드는 GitHub에 있습니다. 마지막으로 github 주소를 첨부하십시오 : https://github.com/beidan/emoji
위의 것은 편집자가 0부터 시작하여 편집자가 소개 한 JavaScript 소개이며 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!