Hace unos días, sentí que el código de inserción del blog no era fácil de usar. Entonces, el editor HTML de Sina fue reemplazado por Tinymce. Y se ha desarrollado una simple inserción de código. . . El siguiente es mi proceso de desarrollo.
Primero, mi versión Tinymce es la versión: 3.2.7 (2009-09-22).
El código de inserción de TinyMCE requiere llamar a tinymce.execcommand ('mceinsertContent', falso, valor); Método de TinyMCE. Los parámetros no necesitan cambiarse, el valor es lo que desea insertar.
Por ejemplo, escribí una función,
La copia del código es la siguiente:
función inserthtml (valor)
{
tinymce.execCommand ('mceinsertContent', falso, valor);
}
Más tarde, para este ejemplo, se proporciona una descarga. En el ejemplo. Hay tres documentos involucrados en total.
tinymce.html insertcode.php save.php estos tres archivos.
Tinymce.html es la página de cuadro de texto TinyMCE.
El código principal es el siguiente:
La copia del código es la siguiente:
<script type = text/javaScript src = http: //www.vevb.com/tinymce/tiny_mce.js> </script>
<script type = text/javaScript>
tinymce.init ({
// opciones generales
convert_urls: falso,
Modo: exacto,
Elementos: Artículo_Content,
// Modo: TextEasas,
Tema: Avanzado,
complementos: safari, rompecabezas de página, estilo, capa, tabla, guardado, advhr, advimage, advLink, emociones, iPell, inlinepopups, insertDateTime, previsión, medios de búsqueda, búsqueda, imprime, contextmenu, pasta, dirección, pantalla completa, no editable, visual, no brote, XHTMLXTRAS, TEMPLATE, TEMPLATE, WORDCOUN
// opciones de tema
theme_advanced_buttons1: Guardar, newDocument, |, negrita, cursiva, subrayar, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatelect, fontSelect, fontSizesElect, FontSizeSelect,
theme_advanced_buttons2: Cortar, copiar, pegar, pasear, pastor, |, buscar, reemplazar, |, bullist, numlist, |, outeneral, sangría, blockquote, |, deshacer, rehacer, |, enlace, aniquilar, ancla, imagen, limpieza, ayuda, código, |, insertar Date, tiempo previo, previo, |, forecolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor, backcolor the
theme_advanced_buttons3: TableControls, |, HR, removeFormat, VisualAid, |, sub, sup, |, Charmap, emociones, iPell, Media, Avhr, |, imprime, |, LTR, RTL, |, Fullscreen,
theme_advanced_buttons4: InsertLayer, Moveforward, Movebackward, Absolute, |, styleProps, |, cite, ABBR, acrónimo, Del, ins, attribs, |, VisualChars, no rompiendo, plantilla, PageBreak,
theme_advanced_toolbar_location: arriba,
theme_advanced_toolbar_align: izquierda,
theme_advanced_statusbar_location: Bottom,
theme_advanced_resing: verdadero,
// CSS de contenido de ejemplo (debería ser el CSS de su sitio)
content_css: css/content.css,
// Diálogo de listas de enlace/imagen/medios/plantilla
TEMPLATE_EXTERNAL_LIST_URL: LISTS/TEMPLATE_LIST.JS,
externo_link_list_url: lists/link_list.js,
externo_image_list_url: lists/image_list.js,
Media_external_list_url: lists/media_list.js,
// Reemplazar valores para el complemento de plantilla
Template_replace_values: {
Nombre de usuario: algún usuario,
Staffid: 991234
}
});
</script>
<script type = text/javaScript>
función inserthtml (valor)
{
tinymce.execCommand ('mceinsertContent', falso, valor);
}
</script>
donde el código JS es inicializar TinyMCE. El ejemplo de descarga no incluye TinyMCE, debe descargarlo usted mismo. Luego cambie el SRC del código JS.
La copia del código es la siguiente:
<input name = button type = button onClick = window.open ('insertcode.php', 'insertar código', 'height = 500, width = 600, top = 300, izquierda = 300, barra de herramientas = no, menuBar = no, scrollbars = no, reenizable = no, ubicación = no, status = no') valor = hacer clic aquí para insertar el código/>>>
El código anterior se usa para abrir el archivo InsertCode.php.
A continuación, echemos un vistazo a InsertCode. El código de este archivo.
En primer lugar, el código JS
La copia del código es la siguiente:
<Script Language = javascript src = http: //www.gosoa.com.cn/js/jquery.js> </script>
<Script Language = JavaScript>
función insertcode ()
{
Vare val vale = $ ('#postcontent'). html ();
var codeType = $ ('#CodeType'). Val ();
// window.opener.inserthtml ('<textarea shows = 3 cols = 50 name = code class ='+CodeType+'>'+valor+'</textarea>');
Window.opener.inserthtml ('<pre name = code class ='+CodeType+'>'+valor+'</pre>');
window.close ();
}
</script>
El siguiente es el código PHP y HTML
La copia del código es la siguiente:
<? Php
error_reporting (0);
$ content = $ _post ['content'];
if (! vacía ($ contenido))
{
$ CodeType = $ _post ['CodeType'];
echo '<div id = postcontent>';
$ content = htmlspecialchars ($ content);
Echo $ contenido;
echo '</div>
<input type = Hidden name = codeType id = codeType value = '. $ CodeType. />
<input type = button name = enviar value = enviar onClick = insertCode () style = border: 1px sólido #000; Línea de altura: 18px; ancho: 60px;/> ';
}demás
{
?>
<Div Style = Margin: 0 Auto>
<Form ID = form1 name = form1 método = post accy = insertCode.php>
<Lel etiqueta> seleccione el tipo de código para insertar
<Seleccionar nombre = CodeType id = CodeType>
<opción valor = 'php'> php </opción>
<opción valor = 'js'> js </ppection>
<opción valor = 'html'> html </opción>
<opción valor = 'c'> c </opción>
<opción valor = 'ASP'> ASP </ppection>
<opción valor = 'xml'> xml </opción>
<opción valor = 'java'> java </ppection>
<opción valor = 'java'> java </ppection>
<opción valor = 'csharp'> c#</opción>
<opción valor = 'sql'> sql </opción>
</select>
</seleting>
<Tabel>
<TextArea name = Content ID = Content cols = 30 filas = 20 estilo = ancho: 600px; Altura: 200px; Border: 1px discontinuo #333> </textarea>
</seleting>
<p>
<Label Style = Padding-Left: 50px;>
<input type = enviar name = enviar value = envío style = border: 1px sólido #000; Línea de altura: 18px; Ancho: 60px;/>
</seleting>
</p>
<p> </p>
</form>
</div>
<? Php
}
?>
En InsertCode.php, la función InsertCode () se usa para llamar a la función Inserthtml () de la página TinyMce.html e inserta el código en la página TinyMce.html.
En el código, ¿por qué necesitamos '+valor+'?
Debido a que estamos mostrando la página, usaremos el complemento SyntaxHighLighter para resaltar el código.
Otro punto a explicar, aquí, $ content = htmlspecialchars ($ content); Realizamos la operación de escape HTMLSpecialChars para el código en sí. De esta manera, el código insertado en la base de datos será seguro.
Ok, veamos Save.php nuevamente, esta página se usa para mostrar el contenido enviado.
El código principal es el siguiente:
La copia del código es la siguiente:
<?
$ Artículo_Content = $ _post ['Artículo_content'];
transcode de funciones ($ str)
{
if (vacía ($ str))
{
devolver falso;
}
$ str = str_replace ('', '', $ str);
$ str = str_replace ('', '', $ str);
$ str = str_ireplace ('<br>', n, $ str);
$ str = str_ireplace ('<pre', '<pre name = code', $ str);
devolver $ str;
}
echo transcode ($ artículo_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 ('código');
</script>
Ok, se acabó.