TinyMCE и SVG

Question

Я использую последний/текущий редактор TinyMCE (<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>), и он, похоже, не способен отображать <svg>. У меня есть некоторый HTML, сохраненный в базе данных, которая содержит некоторые <svg>. При загрузке в TinyMCE он не отображается.

Это известная проблема (я искал и не нашел много)? Любые обходные пути?

Answer 1

Швы быть TinyMCE, который удаляет его, потому что это пустой тег: http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2015/1/tinymce-and-svgs/

Вы могли быть в состоянии использовать это внутри INIT:

extended_valid_elements : "svg[*]", 

Он работает с другими пустыми тегами и т.д. , но никогда не пробовали с SVG.

С форума поста я связан с:

нормально, я сделал некоторые отладки в TinyMCE и проблема, кажется, что элемент SVG обнаружен как пустой, и для этого удалены.

Unfortunatley не существует способа изменить это поведение, но там - это некоторые обходные пути.

1. Всегда есть имя атрибут объявления для элемента SVG: <svg name="something"

2. Всегда есть атрибут данных MCE для SVG элемента: <svg data-mce-something="something"

3. включают некоторые текстовое содержимое внутри элемента SVG: <svg>&nbsp;</svg> Используя эти методы, я мог бы успешно сэкономить inline svg в xhtml

Answer 2

TinyMCE полосы пустые и недействительные теги. Вы можете решить ее

1. Добавление '& NBSP' к каждому элементу пустого:

   svg.find('*').each(function() { 
       if (!$(this).html()) { 
       $(this).text(' '); 
       } 
   }); 
   

   здесь SVG ваш Jquery завернутый SVG элемент.

2. Расширение valid elements согласно svg element reference *

   extended_valid_elements: "svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]" 
   

   * Обратите внимание, я добавил только те элементы, которые имеют значение для моего дела.

Answer 3

Я попробовал первое предложение Коен и он работал для существующего контента SVG (я добавил это в setup обратного вызова). Однако он по-прежнему отфильтровывал теги SVG при вставке HTML в редактор исходного кода, а затем подтверждал диалог.

Порывшись немного в исходный код TinyMCE, чтобы увидеть, где эти элементы фактически удалены (это в DomParser классе) я нашел недокументированные настройки для Schema класса, который определяет метки, которые могут быть пустыми без снятия редактора. Единственное неприятное, что вы не можете использовать его в , добавьте в существующий список, вы можете только переопределить его. Поэтому при настройке вы также должны указывать теги, которые есть там, по умолчанию. Используйте это в настройках, которые вы предоставляете TinyMCE при инициализации его:

// First the list of tags that it normally knows about by default: 
non_empty_elements: "td,th,iframe,video,audio,object,script,pre,code,area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,source,wbr,track" 
// Now we add tags related to SVGs that it doesn't normally know about: 
+ "svg,defs,pattern,desc,metadata,g,mask,path,line,marker,rect,circle,ellipse,polygon,polyline,linearGradient,radialGradient,stop,image,view,text,textPath,title,tspan,glyph,symbol,switch,use", 

Таким образом, эти теги SVG никогда не должны быть отфильтрованы, потому что они пусты - до тех пор, как они справедливы и в целом, например, установив extended_valid_elements, как предложено выше, или позволяя все элементы Коен (не рекомендуется, поскольку это оставляет вас уязвимыми для атак XSS):

extended_valid_elements: "*[*]" 

Пожалуйста, обратите внимание, что это работает для моей версии 4.5.8 от TinyMCE. Поскольку этот параметр недокументирован, он может больше не работать в текущих или будущих версиях. Также они могли бы скорректировать список по умолчанию, который я переопределяю здесь в более поздних версиях. Найди nonEmptyElementsMap и в Schema.js в их исходном коде, чтобы найти список по умолчанию в вашей версии (два списка объединяются) и обратите внимание, что там теги разделены пробелами, но когда вы сами поставляете список, список разделяется запятыми (для любой причины).