-2
嗨StackOverflow社區Django和Java腳本問題 - 我做錯了什麼？
我做錯了什麼，但無法弄清楚它是什麼。我遇到了一些Java Script的麻煩，好像Django不需要它。我正在嘗試將以下Java腳本添加到我的網站，但代碼只是不想粘。這是一個可行的例子，但我不能在code以下的代碼中複製它。
JavaScript應該採取一些標籤，如：lol：並自動將其轉換爲可編輯p標籤內的表情符號。它也應該改變：somegif：一個動畫gif（請通過上面的鏈接看一個可行的例子代碼）。我究竟做錯了什麼？
這裏是我的HTML：
(function() {
var $input, emojiMap;
emojiMap = {
':lol:': '😆',
':somegif:': '<img src="http://i.giphy.com/pPzjpxJXa0pna.gif" />'
};
$input = $('.input');
$input.on('keyup input', function (ev) {
var code, range, replacement, selection, text;
text = $input.html();
for (code in emojiMap) {
if (window.CP.shouldStopExecution(1)) {
break;
}
replacement = emojiMap[code];
text = text.replace(code, replacement);
}
window.CP.exitedLoop(1);
$input.html(text);
range = document.createRange();
selection = window.getSelection();
range.setStart(this, this.childNodes.length);
range.collapse(true);
selection.removeAllRanges();
return selection.addRange(range);
});
}.call(this));
input,
.input {
border: 1px solid #ccc;
display: block;
font-family: sans-serif;
font-size: 1em;
padding: .5em;
width: 50vh;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
{% load static from staticfiles %}
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<!-- Custom Styles CSS -->
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
<!-- jQuery Implementation-->
<script src="{% static 'js/jquery-1.12.2.min.js'%}"></script>
<script src="{% static 'js/rango-jquery.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body id="body_color">
<div class="container" id="top_container">
<div class="row"> <!-- Major Row containing both the chat window and the autoring window -->
<div class="col-lg-4 center-block">
<h1>{{secretDisplay.secretTitle}}</h1>
<div class="row">
<div class="col-ls-12">
<p contenteditable="true" class="center-block input"></p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
</body>
你忘了告訴我們問題是什麼 – Sayse
對不起將編輯。 – Z101