Desenvolvimento de plug-in Tinymce: Insira HTML, PHP, SQL, Código JS e destaque o código

Autor：Eve Cole Data da Última Atualização：2025-03-28 20:48:02

Alguns dias atrás, senti que o código de inserção do blog não era fácil de usar. Então, o editor HTML de Sina foi substituído por Tinymce. E uma simples inserção de código foi desenvolvida. . . O seguinte é o meu processo de desenvolvimento.

Primeiro, minha versão Tinymce é a versão: 3.2.7 (2009-09-22).

O código de inserção de tinymce requer chamado tinymce.execCommand ('mCeinsertContent', false, valor); Método de Tinymce. Os parâmetros não precisam ser alterados, o valor é o que você deseja inserir.

Por exemplo, eu escrevi uma função,

A cópia do código é a seguinte:

função inserthtml (valor)

{

tinymce.execCommand ('mCeInsertContent', false, valor);

}

Mais tarde, para este exemplo, é fornecido um download. No exemplo. Existem três documentos envolvidos no total.

tinymce.html insertcode.php save.php Esses três arquivos.

tinymce.html é a página da caixa de texto Tinymce.

O código principal é o seguinte:

A cópia do código é a seguinte:

tinymce.init ({

// Opções gerais

convert_urls: false,

Modo: exato,

Elementos: Artigo_content,

// modo: textareas,

Tema: Avançado,

Plugins: Safari, PageBreak, estilo, camada, tabela, salvar, advm, advogado, advogado, emoções, iessell, inlinepopups, insertDatime, visualização, mídia, pesquisa de pesquisa, impressão, semente de contexto, pasta, direcionalidade, tela completa, não comidas, visuais, ratinhos, XHTMLX, XHTML,

// Opções de temas

theme_advanced_buttons1: salvar, newdocument, |, negrito, itálico, sublinhado, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleSelect, formatSelect, fontelect, fontsizelect, fontsizelect,

tema_advanced_buttons2: corte, copie, colar, pastaText, pastaword, |, pesquise, substituir, |, bullist, numlist, |, ousadia, recuo, blockQuote, |, desfazer, refazer, link, link, unir, âncora, imagem, limpeza, code, code, |, insertDate, insertime, vincular, visualizar, visualizar, imagem, limpeza, code, code, |

theme_advanced_buttons4: insertLayer, moveforward, movebackward, absoluto, |, styleprops, |, cite, abbr, sigla, del, ins, atribui, |, visualchars, não quebra

tema_advanced_toolbar_location: top,

tema_advanced_toolbar_align: esquerda,

tema_advanced_statusbar_location: inferior,

tema_advanced_resizing: true,

// Exemplo de conteúdo CSS (deve ser o seu site CSS)

Content_Css: css/content.css,

// Listas de gota para diálogos de link/imagem/mídia/modelo

template_external_list_url: lists/template_list.js,

external_link_list_url: lists/link_list.js,

external_image_list_url: lists/image_list.js,

media_external_list_url: lists/media_list.js,

// Substitua os valores para o plug -in de modelo

template_replace_values: {

Nome de usuário: algum usuário,

StaffID: 991234

}

});

</script>

função inserthtml (valor)

{

tinymce.execCommand ('mCeInsertContent', false, valor);

}

</script>

onde o código JS é inicializar o tinymce. O exemplo de download não inclui Tinymce, você precisa fazer o download. Em seguida, altere o SRC do código JS.

A cópia do código é a seguinte:

<nome de entrada = botão Tipo = botão onclick = window.open ('insertcode.php', 'Inserir código', 'altura = 500, largura = 600, topo = 300, esquerda = 300, barra de ferramentas = não, Menubar = Não, não, não, inserir aqui, não resgável = não).

O código acima é usado para abrir o arquivo InsertCode.php.

Em seguida, vamos dar uma olhada no InsertCode. O código deste arquivo.

Primeiro de tudo, o código JS

A cópia do código é a seguinte:

função insertCode ()

{

var value = $ ('#postcontent'). html ();

var codeType = $ ('#codeType'). val ();

// window.opener.inserthtml ('<textarea linhas = 3 cols = 50 name = code class ='+codeType+'>'+value+'</textarea>');

window.opener.inserthtml ('<pré -nome = code class ='+codeType+'' '+value+' </pre> ');

window.close ();

}

</script>

O próximo é o código PHP e HTML

A cópia do código é a seguinte:

<? php

error_reporting (0);

$ Content = $ _Post ['Content'];

if (! vazio ($ content))

{

$ codeType = $ _Post ['CodeType'];

eco '<div id = pós -conteúdo>';

$ content = htmlspecialchars ($ content);

eco $ conteúdo;

eco '</div>

<entrada de entrada = nome do botão = Valor de envio = envio onclick = insertCode () style = borda: 1px Solid #000; altura de linha: 18px; Largura: 60px;/> ';

}outro

{

<Boel> Selecione o tipo de código para inserir

<opção value = 'php'> php </pption>

<opção value = 'js'> js </pption>

<opção value = 'html'> html </pption>

<opção value = 'c'> c </pption>

<opção value = 'asp'> asp </pption>

<opção value = 'xml'> xml </pption>

<opção value = 'java'> java </pption>

<opção value = 'csharp'> c#</pption>

<opção value = 'sql'> sql </pption>

</leclect>

</belt>

<Boel>

<textário nome = conteúdo id = content cols = 30 linhas = 20 estilo = largura: 600px; Altura: 200px; Fronteira: 1px tracejado #333> </sexttarea>

</belt>

<p>

</belt>

</p>

</morm>

</div>

<? php

}

No InsertCode.php, a função InsertCode () é usada para chamar a função inserthtml () da página tinymce.html e inserir o código na página tinymce.html.

No código, por que precisamos de '+valor+'?

Como estamos exibindo a página, usaremos o plug-in SyntaxHightLighter para destacar o código.

Outro ponto a ser explicado, aqui, $ content = htmlspecialchars ($ content); Realizamos HTMLSpecialchars escapar operação para o próprio código. Dessa forma, o código inserido no banco de dados estará seguro.

OK, vejamos o SAVE.php novamente, esta página é usada para exibir o conteúdo enviado.

O código principal é o seguinte:

A cópia do código é a seguinte:

$ Artigo_content = $ _Post ['artigo_content'];

Função Transcode ($ STR)

{

se (vazio ($ str))

{

retornar falso;

}

$ str = str_replace ('', '', $ str);

$ str = str_ireplace ('<br>', n, $ str);

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

retornar $ str;

}

Echo Transcode ($ artigo_content);

dp.syntaxhighLighter.highlightall ('código');

</script>

OK, acabou.