Разработка плагина Tinymce: вставьте HTML, PHP, SQL, JS-код и выделите код

Автор：Eve Cole Время обновления：2025-03-28 20:48:02

Несколько дней назад я чувствовал, что код вставки блога был нелегким в использовании. Итак, редактор 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.

Основной код заключается в следующем:

Кода -копия выглядит следующим образом:

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_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>

Функция inserthtml (значение)

{

tinymce.execcommand ('mceinsertcontent', false, значение);

}

</script>

где код JS должен инициализация tinymce. Пример загрузки не включает Tinymce, вам нужно скачать его самостоятельно. Затем измените SRC кода JS.

Кода -копия выглядит следующим образом:

Приведенный выше код используется для открытия файла insertcode.php.

Затем давайте посмотрим на вставку. Код этого файла.

Прежде всего, код JS

Кода -копия выглядит следующим образом:

<сценарий языка = 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 = name = name = poord value = отправить onclick = insertCode () style = border: 1px solid #000; высота линии: 18px; Ширина: 60px;/> ';

}еще

{

<babel> выберите тип кода для вставки

</select>

</label>

<Метка>

</label>

<p>

</label>

</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_ireplace ('<br>', n, $ str);

$ str = str_ireplace ('<pre', '<pre name = code', $ str);

вернуть $ str;

}

Echo Transcode ($ article_content);

dp.syntaxhighlighter.highlightall ('code');

</script>

Хорошо, все кончено.