Несколько дней назад я чувствовал, что код вставки блога был нелегким в использовании. Итак, редактор HTML Sina был заменен Tinymce. И была разработана простая вставка кода. Полем Полем Ниже приведен мой процесс разработки.
Во-первых, моя версия Tinymce-версия: 3.2.7 (2009-09-22).
Код вставки tinymce требует вызова tinymce.execcommand ('mceinsertcontent', false, value); Метод TINYMCE. Параметры не нужно изменять, значение - это то, что вы хотите вставить.
Например, я написал функцию,
Кода -копия выглядит следующим образом:
Функция inserthtml (значение)
{
tinymce.execcommand ('mceinsertcontent', false, значение);
}
Позже, для этого примера, предоставлена загрузка. В примере. В общей сложности участвуют три документа.
tinymce.html insertcode.php save.php эти три файла.
tinymce.html - это текстовое поле Tinymce.
Основной код заключается в следующем:
Кода -копия выглядит следующим образом:
<script type = text/javascript src = http: //www.vevb.com/tinymce/tiny_mce.js> </script>
<script type = text/javascript>
tinymce.init ({
// Общие варианты
convert_urls: false,
Режим: точный,
Элементы: article_content,
// режим: textareas,
Тема: продвинутая,
Плагины: Safari, Page Breake, Style, Layer, Table, Save, Advhr, Advimage, Advlink, Emotions, Iespell, InlinePopups, INSERTDATETIME, Предварительный просмотр, СМИ, поиск, печать, контекст, вставка, направление, полноценные, необратимые, визуальные карты, неразличительные, xhtmlas, tremptrate, wrycount, visureatd, visualchras, xhtmlas, tremptrate, wercourtable, visualtras, xhtmlas, tremprate, needutaitable, visualdchars, xhtml
// варианты темы
theme_advanced_buttons1: save, newdocument, |, жирный, курсив, подчеркнутый, ударный, |, ustifyleft, reyifycenter, ustifyright, ustifyfull, styleselect, формат, выберите, fontselect, fontsizelect, fontsizeselect,, формат, fontselect, fontsizelectectectectelectect,
theme_advanced_buttons2: вырезать, копировать, вставить, вставить, пастетекст, пастевфорд, |, поиск, заменить, |, bulist, numlist, |, Outdent, adent, blockquote, |, Undo, Redo, |, Link, Unlink, Anchor, Image, очистка, справка, код, |, Insertdate, Inserttim
theme_advanced_buttons3: tablecontrols, |, hr, removeFormat, visualeAd, |, sub, sup, |, charmap, эмоции, iespell, media, Advhr, |, Print, |, Ltr, Rtl, |, FullScreen,
theme_advanced_buttons4: вставка, перемещение, перемещение, Absolute, |, StyleProps, |, Cite, Abbr, Abronym, Del, INS, Attribs, |, VisualChars, Nonbreight, шаблон, Page Breake, Page, Breake, Page, Breake, Page, Breake, Page, Breake, Page, Breake, Page, Breake, Page.
theme_advanced_toolbar_location: top,
theme_advanced_toolbar_align: слева,
theme_advanced_statusbar_location: внизу,
theme_advanced_resizing: true,
// Пример контента CSS (должен быть ваш сайт CSS)
content_css: css/content.css,
// DROP SILPIONS для диалогов Link/Image/Media/Stemplate
template_external_list_url: списки/template_list.js,
External_link_list_url: списки/link_list.js,
External_image_list_url: списки/image_list.js,
media_external_list_url: списки/media_list.js,
// заменить значения для плагина шаблона
template_replace_values: {
Имя пользователя: какой -то пользователь,
StaffId: 991234
}
});
</script>
<script type = text/javascript>
Функция inserthtml (значение)
{
tinymce.execcommand ('mceinsertcontent', false, значение);
}
</script>
где код JS должен инициализация tinymce. Пример загрузки не включает Tinymce, вам нужно скачать его самостоятельно. Затем измените SRC кода JS.
Кода -копия выглядит следующим образом:
<name name = кнопка типа = кнопка onclick = window.open ('insertcode.php', 'вставить код', 'height = 500, width = 600, top = 300, слева = 300, панель инструментов = no, menubar = no, scrollbars = no, reprable = no, location = nat, nate') value = value = quice, чтобы не сэкономить код/>
Приведенный выше код используется для открытия файла insertcode.php.
Затем давайте посмотрим на вставку. Код этого файла.
Прежде всего, код JS
Кода -копия выглядит следующим образом:
<script language = javascript src = http: //www.gosoa.com.cn/js/jquery.js> </script>
<сценарий языка = javascript>
Функция insertCode ()
{
var value = $ ('#postcontent'). html ();
var Codetype = $ ('#Codetype'). val ();
// window.opener.inserthtml ('<<textarea Rows = 3 cols = 50 name = code class ='+codetype+'>'+value+'</textarea>');
window.opener.inserthtml ('<pre name = code class ='+codetype+'>'+value+'</pre>');
window.close ();
}
</script>
Далее это PHP и HTML -код
Кода -копия выглядит следующим образом:
<? Php
error_reporting (0);
$ content = $ _post ['content'];
if (! пусто ($ content))
{
$ codetype = $ _post ['Codetype'];
echo '<div id = postcontent>';
$ content = htmlspecialChars ($ content);
Echo $ Content;
Echo '</div>
<input type = hidden name = codetype id = codetype value = '. $ codetype.' />
<input type = name = name = poord value = отправить onclick = insertCode () style = border: 1px solid #000; высота линии: 18px; Ширина: 60px;/> ';
}еще
{
?>
<div style = маржа: 0 Auto>
<form id = form1 name = form1 method = post action = insertcode.php>
<babel> выберите тип кода для вставки
<SELECT NAME = CODETYPE ID = CODETYPE>
<option value = 'php'> php </option>
<option value = 'js'> js </option>
<option value = 'html'> html </option>
<option value = 'c'> c </option>
<option value = 'asp'> asp </option>
<option value = 'xml'> xml </option>
<option value = 'java'> java </option>
<option value = 'java'> java </option>
<option value = 'csharp'> c#</option>
<option value = 'sql'> sql </option>
</select>
</label>
<Метка>
<textarea name = content id = content cols = 30 Rows = 20 Style = ширина: 600px; Высота: 200px; Граница: 1px пунктир #333> </textarea>
</label>
<p>
<label style = padding-left: 50px;>
<input type = отправить имя = отправить значение = отправить стиль = граница: 1px solid #000; высота линии: 18px; Ширина: 60px;/>
</label>
</p>
<p> </p>
</form>
</div>
<? Php
}
?>
В insertcode.php функция insertCode () используется для вызова функции inserTHTML () страницы tinymce.html и вставить код в страницу tinymce.html.
В коде, зачем нам нужно '+value+'?
Поскольку мы отображаем страницу, мы будем использовать плагин с синтаксисом, чтобы выделить код.
Еще один момент, который должен быть объяснен, здесь, $ content = htmlspecialChars ($ content); Мы выполнили операцию Escape HTMLSpecialChars для самого кода. Таким образом, код, вставленный в базу данных, будет безопасным.
ОК, давайте снова посмотрим на save.php, эта страница используется для отображения отправленного контента.
Основной код заключается в следующем:
Кода -копия выглядит следующим образом:
<?
$ Article_content = $ _post ['article_content'];
Функциональный транскод ($ str)
{
if (пусто ($ str))
{
вернуть ложь;
}
$ str = str_replace ('', '', $ str);
$ str = str_replace ('', '', $ str);
$ str = str_ireplace ('<br>', n, $ str);
$ str = str_ireplace ('<pre', '<pre name = code', $ str);
вернуть $ str;
}
Echo Transcode ($ article_content);
?>
<script class = javascript src =/tinymce/lightcode/scripts/shcore.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushcsharp.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushphp.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushjscript.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushjava.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushvb.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushsql.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushxml.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushdelphi.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushpython.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushruby.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushcss.js> </script>
<script class = javascript src =/tinymce/lightcode/scripts/shbrushcpp.js> </script>
<script class = javascript>
dp.syntaxhighlighter.highlightall ('code');
</script>
Хорошо, все кончено.